threejs幾何三角形旋轉不居中
[英]threejs geometry triangle rotate not centered
問題描述
我已經嘗試了一段時間，但是我不知道為什么我的三角形沒有繞中心旋轉。 我想要2個三角形彼此相鄰並且1個旋轉60度。 但是如果我旋轉，所有的角都應該是相同的大小。
您可以在下面找到我的代碼段。 藍色三角形怎么可能向左移動？ 因為橙色右上角大於其他2個...
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - geometries</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { color: #eee; font-family:Monospace; font-size:13px; text-align:center; background-color: #ffffff; margin: 0px; padding: 0px; overflow: hidden; } #info { position: absolute; top: 0px; width: 100%; padding: 5px; } a { color: #0080ff; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.js"></script> <script> var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var aspect = SCREEN_WIDTH / SCREEN_HEIGHT; var camera, scene, renderer, stats; var frustumSize = 100000; function init() { camera = new THREE.OrthographicCamera( 0.5 * frustumSize * aspect / - 2, 0.5 * frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, -1000, 10000 ); camera.position.y = 400; scene = new THREE.Scene(); scene.background = new THREE.Color( 0xf0f0f0 ); camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.set( 0, 0, 2 ); camera.lookAt(0, 0, 0) scene.add( camera ); var light = new THREE.PointLight( 0xffffff, 0.8 ); camera.add( light ); drawSquare() var margin = 0.2; var t = new triangle(0.5); t.draw(); t.createSides(margin); // renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); // window.addEventListener( 'resize', onWindowResize, false ); } class triangle { constructor(length){ this.length = length; } draw(color='orange'){ var h = this.length * (Math.sqrt(3)/2); var shape = new THREE.Shape(); shape.moveTo( 0,-h/2 ); shape.lineTo( -this.length / 2, h / 2 ); shape.lineTo( this.length / 2, h / 2 ); var extrudeSettings = { steps: 2, depth: 0.4, bevelEnabled: false }; var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings ); geometry.center(); var line2 = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( {color: color} ) ); line2.position.set(0, 0, 0); scene.add(line2); this.mesh = line2; } createSides(margin){ for(var i = 0;i<3;i++){ var t = new triangle(this.length); t.draw('blue'); //t.mesh.position.x += this.length; t.mesh.geometry.rotateZ(THREE.Math.degToRad(60)); } } } function drawSquare(){ var size = 1; var geometry = new THREE.Geometry(); geometry.vertices.push( new THREE.Vector3(0, 0, 0), new THREE.Vector3(size, 0, 0), new THREE.Vector3(size, size, 0), new THREE.Vector3(0, size, 0), new THREE.Vector3(0, 0, 0)); var line2 = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: "red"})); line2.position.set(-size/2, -size/2, 0); scene.add(line2); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } // function animate() { requestAnimationFrame( animate ); render(); } function render() { renderer.render( scene, camera ); } init(); animate(); </script> </body> </html>
1 個解決方案
解決方案1
0 已采納 2019-04-12 20:26:16
以（0，0）為外接圓心的等邊三角形為：
var l = this.length;
var h = l * Math.sqrt(3) / 2; // 0.866
shape.moveTo( 0, h * 2/3 );
shape.lineTo( -l / 2, -h * 1/3 );
shape.lineTo( l / 2, -h * 1/3 );
FURTNER注意的是，該功能.center()的THREE.BufferGeometry
根據邊界框將幾何體居中。
您必須將其刪除：
var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
geometry.center();
當然，三角形不是以盒子為中心，而是圍繞外接圓的中心旋轉。 但這可以通過將三角形沿y軸移動-h/6來補償：
var line2 = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( {color: color} ) );
line2.position.set(0, -h / 6, 0);
參見示例。
var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var aspect = SCREEN_WIDTH / SCREEN_HEIGHT; var camera, scene, renderer, stats; var frustumSize = 100000; var triangles = []; var rot = 0 function init() { camera = new THREE.OrthographicCamera( 0.5 * frustumSize * aspect / - 2, 0.5 * frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, -1000, 10000 ); camera.position.y = 400; scene = new THREE.Scene(); scene.background = new THREE.Color( 0xf0f0f0 ); camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.set( 0, 0, 2 ); camera.lookAt(0, 0, 0) scene.add( camera ); var light = new THREE.PointLight( 0xffffff, 0.8 ); camera.add( light ); drawSquare(); drawCircle(1.0); var margin = 0.2; var t = new triangle(1.0); t.draw(); t.createSides(margin); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); window.addEventListener( 'resize', onWindowResize, false ); } class triangle { constructor(length){ this.length = length; } draw(color='orange'){ var shape = new THREE.Shape(); var l = this.length; var h = l * Math.sqrt(3) / 2; // 0.866 shape.moveTo( 0, h * 2/3 ); shape.lineTo( -l / 2, -h * 1/3 ); shape.lineTo( l / 2, -h * 1/3 ); var extrudeSettings = { steps: 2, depth: 0.0, bevelEnabled: false }; var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings ); //geometry.center(); var triangle = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: color, polygonOffset: true, polygonOffsetFactor: 1.0, polygonOffsetUnits: 4.0 } ) ); triangle.position.set(0, -h / 6, 0); scene.add(triangle); this.mesh = triangle; } createSides(margin){ for(var i = 0;i<1;i++){ var t = new triangle(this.length); t.draw('blue'); //t.mesh.position.x += this.length; t.mesh.geometry.rotateZ(THREE.Math.degToRad(60)); triangles.push(t); } } } function drawSquare(){ var size = 1; var geometry1 = new THREE.Geometry(); geometry1.vertices.push( new THREE.Vector3(-size/2, -size/2, 0), new THREE.Vector3(size/2, -size/2, 0), new THREE.Vector3(size/2, size/2, 0), new THREE.Vector3(-size/2, size/2, 0)); var line1 = new THREE.LineLoop(geometry1, new THREE.LineBasicMaterial({color: "green"})); line1.position.set(0, 0, 0.0); scene.add(line1); var geometry2 = new THREE.Geometry(); geometry2.vertices.push( new THREE.Vector3(-size/2, -size/2, 0), new THREE.Vector3(size/2, size/2, 0), new THREE.Vector3(size/2, -size/2, 0), new THREE.Vector3(-size/2, size/2, 0)); var line2 = new THREE.LineSegments(geometry2, new THREE.LineBasicMaterial({color: "green"})); line2.position.set(0, 0, 0.0); scene.add(line2); } function drawCircle(l){ var h = l * 0.866; var geometry3 = new THREE.Geometry(); geometry3.vertices.push( new THREE.Vector3(0, 0), new THREE.Vector3(0, h * 2/3), new THREE.Vector3(0, 0), new THREE.Vector3(-l / 2, -h * 1/3), new THREE.Vector3(0, 0), new THREE.Vector3(l / 2, -h * 1/3)); var line3 = new THREE.LineSegments(geometry3, new THREE.LineBasicMaterial({color: "red"})); line3.position.set(0, -h/6, 0.0); scene.add(line3); var geometry4 = new THREE.CircleGeometry( h * 2/3, 128 ); geometry4.vertices.shift(); var line4 = new THREE.LineLoop( geometry4, new THREE.LineBasicMaterial( { color: "red" } ) ); line4.position.set(0, -h/6, 0.0); scene.add(line4); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function animate() { requestAnimationFrame( animate ); render(); } function render() { triangles[0].mesh.geometry.rotateZ(THREE.Math.degToRad(1)); rot += 1; renderer.render( scene, camera ); } init(); animate();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
Threejs幾何顏色
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.