threejs基础学习

1、创建一个摄像机

new THREE.PerspectiveCamera(fov, aspect, near, far);

fov：视野角度，越大看到的物体越小（视野范围）

aspect： 长宽比 一般基于cavnas的容器去设置

near：近平面距离

far：远平面距离

 

2、创建盒子

const geometry = new THREE.BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer);

width — X轴上面的宽度，默认值为1。

height — Y轴上面的高度，默认值为1。

depth — Z轴上面的深度，默认值为1。

widthSegments — （可选）宽度的分段数，默认值是1。大于1且线框（{wireframe : true}）有效。

heightSegments — （可选）宽度的分段数，默认值是1。大于1且线框（{wireframe : true}）有效。

depthSegments — （可选）宽度的分段数，默认值是1。大于1且线框（{wireframe : true}）有效。

const box = 1;
      const boxSegments =3;
      const geometry = new THREE.BoxGeometry(box, box, box, boxSegments, boxSegments, boxSegments);

      function makeInstance(geometry, color, x) {
        const material = new THREE.MeshBasicMaterial({wireframe : true});
        material.color = new THREE.Color('red');
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        cube.position.x = x;

        return cube;
      }

3、创建材质

const material = new THREE.MeshBasicMaterial({wireframe : true});·

material.color = new THREE.Color('red');

4、创建物体

const cube = new THREE.Mesh(geometry : Geometry, material : Material);
geometry —— （可选）Geometry或者BufferGeometry的实例，默认值是一个新的BufferGeometry。
material —— （可选）一个Material，或是一个包含有Material的数组，默认是一个新的MeshBasicMaterial。

5、创建场景

new THREE.Scene();

场景允许你在什么地方、摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方。

scene.add(cube); // 将物体加入场景

6、创建一个WebGLRenderer（渲染器）对象

const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerWidth/2); // 设置webGl的宽高

document.body.appendChild(renderer.domElement); // 将webGl加入到dom中

renderer.render(scene, camera);

// renderer使用照相机去渲染场景 4个参数( scene : Scene, camera : Camera, renderTarget : WebGLRenderTarget, forceClear : Boolean ) 

用相机(camera)渲染一个场景(scene)
renderTarget 渲染一般是在canvas上完成的，或者是renderTarget(如果有指定)
forceClear：为true，那么颜色、深度及模板缓存将会在渲染之前清除，即使渲染器的autoClear属性值是false。当forceClear设为true, 也可以通过将autoClearColor、autoClearStencil或autoClearDepth属性的值设为false来阻止对应缓存被清除。