three.js-坐标轴辅助器

坐标轴辅助器（AxesHelper）

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

const axesHelper = new THREE.AxesHelper( 5 );

scene.add( axesHelper );

文档地址：https://threejs.org/docs/index.html#api/zh/helpers/AxesHelper

构造函数（Constructor）

AxesHelper( size : Number )

size -- (可选的) 表示代表轴的线段长度. 默认为 1.

方法（Methods）

.setColors ( xAxisColor : Color, yAxisColor : Color, zAxisColor : Color ) : this

将轴颜色设置为 xAxisColor, yAxisColor,zAxisColor。

.dispose () : undefined

释放此实例分配的GPU相关资源。每当应用程序中不再使用此实例时，请调用此方法。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add(cube);

camera.position.z = 5;
const controls = new OrbitControls( camera, renderer.domElement );
// 坐标轴
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

展示效果：