threeJS-Helper01-arrowHelper （箭頭）
阿新 • • 發佈：2018-12-16
鄭重宣告：釋出此部落格純屬技術展示和交流！未得本人同意，禁止轉載！禁止商業目的！
需要電子檔書籍可以Q群：828202939 希望可以和大家一起學習、一起進步！！
如有錯別字或有理解不到位的地方，可以留言或者加微信15250969798，在下會及時修改！！！！！
three裡面Helper助手模組。相當於是debug助手了！
今天我們來看看怎麼新增一個箭頭的助手-arrowHelper ！
在前一個案例的基礎上加了一個箭頭並且給他加了一個旋轉的動畫
<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 animate = function () { requestAnimationFrame(animate); cube.rotation.x += 0.01; arrowHelper.rotation.z += 0.02; renderer.render(scene, camera); }; animate(); </script> </body> </html>