ThreeJs基础

基本结构

• 场景
• 相机
• 渲染

场景用来放入各种网格模型。每个网格模型为独立个体，又几何体和材质组成。

投影相机如同人眼，用来观察网格模型。

最终利用渲染对象对相机和场景进行渲染，将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模型最终被渲染出来的区域大小。最终进行模型渲染，传入场景和相机