携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情>>
今天来介绍three.js的坐标轴、轨道控制器及光源设置。
坐标轴 AxesHelper
参数：
- size：Number，可选参数，表示代表轴的线段长度，默认为1。
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
轨道控制器 OrbitControls
OrbitControls轨道控制器可以使得相机围绕目标进行轨道运动。
参数：
- object：("Camera"): （必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。
- domElement：("renderer.domElement"): 用于事件监听的HTML元素。
// 创建controls对象
const controls = new OrbitControls( camera, renderer.domElement );
// 可监听鼠标、键盘等控制器的事件
controls.addEventListener("change", () => {
// 执行渲染操作
renderer.render(scene, camera);
});
光源设置
灯光有很多种，这里我们用聚光灯SpotLight、点光源PointLight和环境光AmbientLight作为示例。
聚光灯SpotLight的光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大，可以投射阴影。
点光源PointLight是从一个点向各个方向发射的光源，可以认为是模拟一个灯泡发出的光，点光源可以投射阴影。
环境光AmbientLight会均匀的照亮场景中的所有物体，但是环境光不能用来投射阴影，因为它没有方向。
参数：
- color：可选参数，光颜色的rgb数值。
- intensity：可选参数，光照的强度。
// 创建聚光灯
var spotLight = new THREE.SpotLight(0xFFFFFF);
// 聚光灯位置
spotLight.position.set(30, 30, -30);
// 允许聚光灯投射阴影
spotLight.castShadow = true;
// 将聚光灯添加到场景中
scene.add(spotLight)
// 创建点光源
var pointLight = new THREE.PointLight(0xffffff, 1.0);
// 设置点光源位置
pointLight.position.set(400, 200, 300);
// 将点光源添加到场景中
scene.add(pointLight);
// 创建环境光
var ambient = new THREE.AmbientLight(0xffffff, 0.4);
// 将环境光添加到场景中
scene.add(ambient);
这里使用到的属性都是基本属性，想要了解更多属性，可以去Three.js官方文档学习threejs.org/docs/index.…
