Three.js初学（2）
- 三维坐标系的认识
- 1. 辅助坐标系
- 光源的影响
- 1. 光材质的影响
- 2. 光源介绍
- 点光源
- 环境光
- 平行光
- 3. 光源衰减/位置
- 相机控件
- 1. 引入扩展库
- 2. 使用方法
三维坐标系的认识
这一章节的主要作用是加强自我对三维坐标空间的认识。
1. 辅助坐标系
AxesHelper()的参数是辅助坐标系的线段的尺寸大小（设置时尽量比自己的三维场景几何体要大~）。坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上。
// AxesHelper：辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);
如果模型颜色太深看不起坐标轴，可以将材质设置为半透明颜色，这样可以清楚观察到辅助坐标系。
const material = new THREE.MeshBasicMaterial({color: 0xff0000, //设置材质颜色transparent:true,//开启透明opacity:0.3,//设置透明度
});
效果如下图所示：
其余具体代码由此可看：—> 上一篇博客详情
如果想要更进一步了解三维坐标系位置关系，可以试着更改Mesh模型对象在场景的尺寸大小以及渲染位置。也可以更改相机的位置坐标以及相机的LookAt()的方向。
光源的影响
在实际生活中物体表面的明暗效果是会受到光照强度的影响，比如晚上不开灯，你就很有可能看不到或者看不清物体，灯光越暗，视线越模糊。咱们用网格模型Mesh模拟生活中物体，用Light模拟光照对物体表面的影响。
1. 光材质的影响
在three.js提供的众多网格模型中，是有一些不受光照影响的。如下图所示：
漫反射网格材质MeshLambertMaterial会受到光照影响，不同面和光线夹角不同，立方体不同面就会呈现出来不同的明暗效果。
MeshPhongMaterial可以实现MeshLambertMaterial不能实现的高光反射效果。对于高光效果，你可以想象一下，你在太阳下面观察一辆车，你会发现在特定角度和位置，你可以看到车表面某个局部区域非常高亮.它就类似与一个镜面反射效果,比如你生活中拿一面镜子，放在太阳光下，调整角度，可以把太阳光反射到其它地方，如果反射光对着眼睛，也就是反射光线和视线平行的时候，会非常刺眼。
属性值：
- 高光亮度属性
.shininess
// 模拟镜面反射，产生一个高光效果
const material = new THREE.MeshPhongMaterial({color: 0xff0000,shininess: 20, //高光部分的亮度，默认30
});
- 高光颜色属性
.specular
// 模拟镜面反射，产生一个高光效果
const material = new THREE.MeshPhongMaterial({color: 0xff0000,shininess: 20, //高光部分的亮度，默认30specular: 0x444444, //高光部分的颜色
});
2. 光源介绍
| 光源种类 | 名称 |
|---|---|
| 环境光 | AmbientLight |
| 点光源 | PointLight |
| 聚光灯光源 | SpotLight |
| 平行光 | DirectionLight |
点光源
两个参数分别表示光源颜色和光照强度
- 参数1：0xffffff是纯白光,表示光源颜色
- 参数2：1.0,表示光照强度，可以根据需要调整，你可以可以直接访问光照强度属性
.intensity设置
const pointLight = new THREE.PointLight(0xffffff, 1.0);
pointLight.intensity = 2.0;//光照强度
通过点光源辅助观察对象PointLightHelper可视化点光源，可以借助相机控件OrbitControls旋转缩放三维场景便于预览点光源位置。
// 光源辅助观察
const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
scene.add(pointLightHelper);
可以试着更改原来光源的位置，观察光源变化情况。
环境光
环境光没有特定方向，只是整体改变场景的光照明暗。
//环境光:没有特定方向，整体改变场景的光照明暗
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient);
平行光
平行光就是沿着特定方向发射。
// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
// 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
directionalLight.position.set(80, 100, 50);
// 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0
directionalLight.target = mesh;
scene.add(directionalLight);
通过点光源辅助观察对象DirectionalLightHelper可视化点光源
const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5, 0xff0000);
scene.add(dirLightHelper);
3. 光源衰减/位置
实际生活中点光源，比如比如一个灯泡，随机距离的改变，光线会衰减，越来越弱，光源衰减属性.decay默认值是2.0，如果你不希望衰减可以设置为0.0。
光源其实就是一个灯泡，你放的位置不同，渲染的效果就不一样，需要注意的是光源位置尺寸大小
最后将光源添加到3D场景中即可
pointLight.decay = 0.0;//设置光源不随距离衰减
//点光源位置
pointLight.position.set(400, 0, 0);//点光源放在x轴上
scene.add(pointLight); //点光源添加到场景中
光源在x轴的效果如下图所示：
相机控件
平时开发调试代码，或者展示模型的时候，可以通过相机控件OrbitControls实现旋转缩放预览效果。
本质上就是改变相机的参数，比如相机的位置属性，改变相机位置也可以改变相机拍照场景中模型的角度，实现模型的360度旋转预览效果，改变透视投影相机距离模型的距离，就可以改变相机能看到的视野范围。
1. 引入扩展库
- 项目开发中引入方式：
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
- 如果在原生的HTML文件中：
<script type="importmap">{"imports": {"three": "../three.js/build/three.module.js","three/addons/": "../three.js/examples/jsm/"}}
</script><script type="module">
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
</script>
2. 使用方法
// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener('change', function () {renderer.render(scene, camera); //执行渲染操作
});//监听鼠标、键盘事件
- 旋转：拖动鼠标左键
- 缩放：滚动鼠标中键
- 平移：拖动鼠标右键
