three.js學習

1、創建一個攝像機

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

fov：視野角度，越大看到的物體越小（視野範圍）

aspect： 長寬比 一般基於cavnas的容器去設置

near：近平面距離

far：遠平面距離

2、創建盒子

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有效。

heightSegments — （可選）寬度的分段數，默認值是1。大於1有效。

depthSegments — （可選）寬度的分段數，默認值是1。大於1有效。

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、創建材質

4、創建場景

new THREE.Scene();