three.js入门 —— 实现第一个3D案例

前言：

        three.js入门，根据文档实现第一个3D案例

效果图：

代码实现：

const scene = new THREE.Scene();
      //创建一个长方体几何对象Geometry
      const geometry = new THREE.BoxGeometry(100, 100, 100);
      //创建一个网络基础材质的材质对象Material (基础网络材质不会收到光照影响)
      const material = new THREE.MeshBasicMaterial({
        color: 0xff0000, //设置材质颜色
        transparent: true, //开启通明
        opacity: 0.5,
      });
      //测试--更换材质 -> 漫反射网络材质MeshLambertMaterial
      //   const material = new THREE.MeshLambertMaterial();
      //创建网络模型 ---- 两个参数分别为“几何体”，“材质”
      const mesh = new THREE.Mesh(geometry, material);
      //定义网络模型在三维场景中的位置
      mesh.position.set(0, 0, 0);
      //辅助观察坐标系
      const axeHelper = new THREE.AxesHelper(150);
      scene.add(axeHelper);
      //将网络模型添加至三维场景中
      scene.add(mesh);
      //定义相机渲染输出的画布尺寸
      const width = 800;
      const height = 500;
      //创建一个透视摄影相机
      const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
      //定义相机的位置
      camera.position.set(300, 300, 300);
      //相机观察的目标位置 ---- 可以是坐标点，也可以是指定物体的位置
      camera.lookAt(mesh.position);
      //创建光源 光源颜色和强度
      //   const pointLight = new THREE.SpotLight(0xeeeeee, 1,0,0);
      //   //光源位置
      //   pointLight.position.set(300, 0, 0);
      //   //添加光源至三维
      //   scene.add(pointLight);
      //创建渲染器对象
      const renderer = new THREE.WebGLRenderer();
      //设置画布尺寸
      renderer.setSize(width, height);
      //渲染器渲染方法 生成一个画布并把三维场景呈现在画布上
      renderer.render(scene, camera);
      //renderer.domElement获取到方法render()生成的画布
      document.body.appendChild(renderer.domElement);