赞
踩
郑重声明:发布此博客纯属技术展示和交流!未得本人同意,禁止转载!禁止商业目的!
需要电子档书籍可以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>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。