Three Js实现坐标轴

最近一直在学three js，因此我觉得作为新人在日常开发和学习中，坐标轴能粗略的帮我们定位元素位置和关系，所以本人使用 Three.js 学习和开发时基本都会打开坐标轴。本文使用 Three.js 的版本为最新版本，使用parcel进行打包发布并启动服务。

1.创建几何体

首先创建几何体，运用scene等类创建。

import * as THREE from "three";
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100)
camera.position.set(0, 0, 10);
scene.add(camera);
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xffff00})
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
console.log(cube)
scene.add(cube);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement)

创建后的图像如图所示：

2.实现三维效果

完成上述的几行代码忠厚就可以创建一个几何体了，但是这个由于没有带轨道器所以看不到三维的样式和立方体的形态，因此加几行代码即可。同时应该添加一个异步函数对于浏览器自动的每一帧都会重新渲染从而使得伴随着用户的鼠标转动而转动。

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
/**
*/
function animate() {
    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}
animate();

3.实现坐标轴

创建几何体和实现三维轨道转动效果之后，便可以通过three js中的坐标轴函数实现三维坐标帮助新手更加快速的判断几何体的方位，不至于学的时候弄的晕头转向的。

官方文档：

AxesHelper类

用于简单模拟3个坐标轴的对象，红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴。

代码示例

const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

当然在本次程序的代码中必须要将renderer.render(scene, camera)放置到animate函数，上面的实现坐标轴也是这个要求，因此对于坐标轴的用法较为简单，将如上函数放入即可，最后成图如图所示。