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來阻止對應緩存被清除。