Three——二、加强对三维空间的认识
接上个例子我们接着往下看
辅助观察坐标系
THREE.AxesHelper()的参数表示坐标系坐标轴线段尺寸大小，你可以根据需要改变尺寸。
使用方法：
// AxesHelper：辅助观察的坐标系 const axesHelper = new THREE.AxesHelper(150); scene.add(axesHelper);
效果如下：
材质半透明设置
设置材质半透明,这样可以看到坐标系的坐标原点。
const material = new THREE.MeshBasicMaterial({ color: 0x51efe4, transparent: true, //开启透明 opacity: 0.5, //设置透明度 });
坐标轴
three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上。
设置模型在坐标系中的位置和尺寸
// 设置几何体长宽高，也就是x、y、z三个方向的尺寸 //对比三个参数分别对应xyz轴哪个方向 // 长100，宽60，高20 new THREE.BoxGeometry(100, 60, 20); // 以中心为原点向x轴坐标偏移100 mesh.position.set(100,0,0);
改变相机参数——预览新的渲染效果
你可以尝试源码中改变相机的参数，看看场景中的物体渲染效果怎么变化。
相机放在x轴负半轴，目标观察点是坐标原点，这样相当于相机的视线是沿着x轴正方向，只能看到长方体的一个矩形平面。
camera.position.set(-1000, 0, 0); camera.lookAt(0, 0, 0);
// 相机视线沿着x轴负半轴，mesh位于相机后面，自然看不到 camera.position.set(-1000, 0, 0); camera.lookAt(-2000, 0, 0);
相机far偏小，mesh位于far之外，物体不会显示在画布上。
// const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000); // 你可以进行下面测试，改变相机参数，把mesh放在视锥体之外，看看是否显示 // 3000改为300，使mesh位于far之外，mesh不在视锥体内，被剪裁掉 const camera = new THREE.PerspectiveCamera(30, width / height, 1, 300);
这里模型并不会出现在画布中
光源对物体表面影响
实际生活中物体表面的明暗效果是会受到光照的影响，threejs中同样也要模拟光照Light对网格模型Mesh表面的影响。
受光照影响材质
threejs提供的网格材质，有的受光照影响，有的不受光照影响。
基础网格材质MeshBasicMaterial不会受到光照影响。这个就是之前模型展示的材质
//MeshBasicMaterial不受光照影响 const material = new THREE.MeshBasicMaterial();
漫反射网格材质MeshLambertMaterial会受到光照影响，该材质也可以称为Lambert网格材质，音译为兰伯特网格材质。这种材质就是可以通过灯光去显示物体明暗的样子。
一个立方体长方体使用MeshLambertMaterial材质，不同面和光线夹角不同，立方体不同面就会呈现出来不同的明暗效果。
//MeshLambertMaterial受光照影响 const material = new THREE.MeshLambertMaterial();
光源简介
Three.js中给出了多种模拟生活中光源的API，在文档中查找light就可以看到
这三种光源看图片大家应该就可以理解，这里主要解释一下环境光后面还会说到
环境光主要就是把周围的场景的光打在模型上，比如阴，晴，日，夜，黄昏，黎明等，烘托主体，突出主体，在不使主体淹没在背景中，还具备营造环境气氛的作用
点光源PointLight可以类比为一个发光点，就像生活中一个灯泡以灯泡为中心向四周发射光线。
这里代码需要用到点光源，坐标，将光源加载场景中三部即可渲染在浏览器中查看效果
注意：这里的材质需要使用MeshLambertMaterial才能受到光照的影响
//点光源：两个参数分别表示光源颜色和光照强度 // 参数1：0xffffff是纯白光,表示光源颜色 // 参数2：1.0,表示光照强度，可以根据需要调整 const pointLight = new THREE.PointLight(0xffffff, 1.0); // pointLight.position.set(400, 0, 0);//点光源放在x轴上 pointLight.position.set(100, 60, 50); //设置光源的位置 // 光源和网格模型Mesh对应一样是三维场景的一部分，自然需要添加到三维场景中才能起作用。 scene.add(pointLight); // 添加光源到场景中
下面是演示效果：
相机控件OrbitControls
平时开发调试代码，或者展示模型的时候，可以通过相机控件OrbitControls实现旋转缩放预览效果。
引入扩展库OrbitControls.js
// 引入轨道控制器扩展库OrbitControls.js import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
注意：如果你在原生.html文件中，使用上面引入方式import { OrbitControls } from 'three/addons/controls/OrbitControls.js';，注意通过<script type="importmap">配置。
<script type="importmap"> { "imports": { "three": "../../../three.js/build/three.module.js", "three/addons/": "../../../three.js/examples/jsm/" } } </script>
使用方式：
// 相机控件 const control = ()=>{ // 可以对物体进行操作 controls = new OrbitControls(camera, renderer.domElement); controls.addEventListener('change', function () { // 每次拖动都会监听相机位置变化 console.log('camera.position',camera.position); }); } control()
平行光与环境光
平行光DirectionalLight和环境光AmbientLight进一步了解光照对应模型Mesh表面的影响
点光源辅助观察PointLightHelper
预览观察：可以借助相机控件OrbitControls旋转缩放三维场景便于预览点光源位置
借上面的点光源例子添加辅助观察
// 光源辅助观察 const pointLightHelper = new THREE.PointLightHelper(pointLight, 10); scene.add(pointLightHelper);
效果如下：
环境光设置
环境光AmbientLight没有特定方向，只是整体改变场景的光照明暗。环境光就不需要加位置了，只有整体
//环境光:没有特定方向，整体改变场景的光照明暗 // 光源 // 光源 const linght = () => { const ambient = new THREE.AmbientLight(0xffffff, 1.0); scene.add(ambient); }; linght();
平行光
平行光DirectionalLight就是沿着特定方向发射。
// 平行光 const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 设置光源的方向：通过光源position属性和目标指向对象的position属性计算 directionalLight.position.set(100, 50, 50); // 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0 directionalLight.target = mesh; scene.add(directionalLight);
平行光辅助观察DirectionalLightHelper
通过点光源辅助观察对象DirectionalLightHelper可视化点光源。
const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5,0xff0000); scene.add(dirLightHelper);
