基本结构
- 场景
- 相机
- 渲染
场景用来放入各种网格模型。每个网格模型为独立个体，又几何体和材质组成。
投影相机如同人眼，用来观察网格模型。
最终利用渲染对象对相机和场景进行渲染，将3D模型渲染在页面上。
创建几何体
THREE.BoxGeometry创建立方体
const geometry = new THREE.BoxGeometry(2, 2, 2)创建了一个长宽高为2的立方体
创建材质
THREE.MeshBasicMaterial 创建基础网格材质
const material = new THREE.MeshBasicMaterial({color: 0xff0000}); 创建了红色的基础网格材质
创建网格模型
THREE.Mesh网格模型表示每个具体是事物，由几何体和材质组成
const mesh = new THREE.Mesh(geometry, material)创建长宽高为2，材质为红色基础网格的立方体网格模型
创建场景
THREE.Scene 建立用来渲染3D模型的场景
const secen = new THREE.Scene(); scene.add(mesh) 创建场景后，将网格模型放入这个场景中
创建投影相机
THREE.OrthographicCamera 正投影相机，观察到的物体尺寸保持不变，不会有近大远小的效果
const camera = new THREE.OrthographicCamera( left,right,top,bottom,near,far)左边界 右边界 上边界 下边界 到相机最近端距离 到相机最远端距离
THREE.PerspectiveCamera 透视投影相机，如同人眼，有近大远小的效果
const camera = new THREE.PerspectiveCamera( fov, aspect, near, far )相机视觉角度 渲染结果输出区域的横向长度和纵向长度的比值 到相机最近端距离 到相机最远端距离
创建渲染
THREE.WebGLRenderer
const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.render(scene, camera)创建渲染对象后，需要设定渲染画布大小，即为3D模型最终被渲染出来的区域大小。最终进行模型渲染，传入场景和相机