鄭重聲明：發佈此博客純屬技術展示和交流！未得本人同意，禁止轉載！禁止商業目的！
需要電子檔書籍可以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>