1. 程式人生 > >threeJS-Helper01-arrowHelper (箭頭)

threeJS-Helper01-arrowHelper (箭頭)

鄭重宣告:釋出此部落格純屬技術展示和交流!未得本人同意,禁止轉載!禁止商業目的!

需要電子檔書籍可以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>