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

前言：

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

效果图：

代码实现：

const scene = new THREE.Scene();//创建一个长方体几何对象Geometryconst 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);