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>

threeJS-Helper01-arrowHelper （箭头）

猜你喜欢