[英]How do I rotate a triangle around an edge?
如何用three.js制作的三角形绕其中一个边缘旋转? 当我试图旋转它时,它看起来就像它的中心一样。
三角形由:
var triangleMesh;
var triangleGeometry = new THREE.Geometry();
triangleGeometry.vertices.push( new THREE.Vector3( 0.0, 1.0, 0.0 ) );
triangleGeometry.vertices.push( new THREE.Vector3( -1.0, -1.0, 0.0 ) );
triangleGeometry.vertices.push( new THREE.Vector3( 1.0, -1.0, 0.0 ) );
triangleGeometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
triangleGeometry.faces[0].vertexColors[0] = new THREE.Color(0xFF0000);
triangleGeometry.faces[0].vertexColors[1] = new THREE.Color(0x00FF00);
triangleGeometry.faces[0].vertexColors[2] = new THREE.Color(0x0000FF);
var triangleMaterial = new THREE.MeshBasicMaterial({ vertexColors:THREE.VertexColors, side:THREE.DoubleSide });
triangleMesh = new THREE.Mesh( triangleGeometry, triangleMaterial );
triangleMesh.position.set(-1.5, 0.0, 4.0 );
triangleMesh.position.z -= 5;
triangleMesh.rotation.z += angle * Math.PI / 180; // angle is from outer for loop
parent.add( triangleMesh );
我需要围绕一个边缘旋转它以构建棱镜/六边形。
要围绕其一个角旋转三角形,该角必须位于坐标的中心。 为了这个目的,你可以使用.translate ( x, y, z )
的方法THREE.Geometry()
看一下代码片段。
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(0, 0, 5); var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var ngon = 11; var radius = 2; var angle = Math.PI / ngon; var triHeight = Math.cos(angle) * radius; var triWidth = Math.sin(angle) * radius; var triangleMesh; var triangleGeometry = new THREE.Geometry(); triangleGeometry.vertices.push(new THREE.Vector3(0.0, triHeight, 0.0)); triangleGeometry.vertices.push(new THREE.Vector3(-triWidth, 0, 0.0)); triangleGeometry.vertices.push(new THREE.Vector3(triWidth, 0, 0.0)); triangleGeometry.faces.push(new THREE.Face3(0, 1, 2)); triangleGeometry.faces[0].vertexColors[0] = new THREE.Color(0xFF0000); triangleGeometry.faces[0].vertexColors[1] = new THREE.Color(0x00FF00); triangleGeometry.faces[0].vertexColors[2] = new THREE.Color(0x0000FF); triangleGeometry.translate(0, -triHeight, 0); // the upper vertex is at the center now var triangleMaterial = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors, side: THREE.DoubleSide }); triangleMesh = new THREE.Mesh(triangleGeometry, triangleMaterial); for (var i = 1; i < ngon; i++) { var newTri = triangleMesh.clone(); newTri.rotation.z = i * angle * 2; scene.add(newTri); } scene.add(triangleMesh); render(); function render() { requestAnimationFrame(render); renderer.render(scene, camera); }
body { overflow: hidden; margin: 0; }
<script src="https://threejs.org/build/three.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.