Three.js初学（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, //高光部分的亮度，默认30
    specular: 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); //执行渲染操作
});//监听鼠标、键盘事件

• 旋转：拖动鼠标左键
• 缩放：滚动鼠标中键
• 平移：拖动鼠标右键