郑重声明：发布此博客纯属技术展示和交流！未得本人同意，禁止转载！禁止商业目的！
需要电子档书籍可以Q群：828202939 希望可以和大家一起学习、一起进步！！
如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，在下会及时修改！！！！！
three里面Helper助手模块。相当于是debug助手了！
今天我们来看看怎么添加一个箭头的助手-AxesHelper！
在前一个案例的基础上加了一个座标轴并加了一个动画
<html>
<head>
<title>座标轴</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<script src="../../../build/three.js"></script>
<script>
var scene = new THREE.Scene();
scene.background = new THREE.Color(0xcfcfcf);
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 2);//width, height, depth
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });//把wireframe设为false显示面
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
//箭头模块
//来自原点的方向。必须是单位向量
var dir = new THREE.Vector3(0, 10, 0);
// 规格化方向向量(转换为长度为1的向量)
dir.normalize();
// 箭头开始的点
var origin = new THREE.Vector3(0, 0, 0);
// 箭头的长度。默认值为1
var length = 3;
// 用于定义颜色的十六进制值。默认值为0xffff00
var hex = 0xffff00;
// 箭头的长度。默认值为0.2 *length
var headLength = 0.5;
// 箭头宽度的长度。默认值为0.2 * headLength。
var headWidth = 0.2;
// 箭头显示助手
var arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex,headLength,headWidth);
scene.add(arrowHelper);
// 座标轴模块
var size =3;// - （可选）表示轴的线的大小。默认值为1
var axesHelper = new THREE.AxesHelper( size );
scene.add( axesHelper );
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
arrowHelper.rotation.z += 0.02;
axesHelper.rotation.y+=0.01;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>