ฉันจะหมุนสามเหลี่ยมรอบขอบได้อย่างไร

สามเหลี่ยมที่สร้างด้วย 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 );

ฉันจะต้องหมุนมันไปรอบขอบด้านหนึ่งเพื่อสร้างปริซึม/หกเหลี่ยม


javascript object rotation three.js
person Paul    schedule 27.12.2017    source แหล่งที่มา
comment
คุณช่วยอธิบายได้ไหมว่าคุณหมายถึง ฉันจะต้องหมุนมันไปรอบขอบด้านหนึ่งเพื่อสร้างปริซึม/ h เอกพจน์   -  person prisoner849    schedule 28.12.2017
comment
เมื่อสามเหลี่ยมอยู่บนหน้าจอ เพื่อให้คุณมองเห็นระนาบทั้งหมด โดยให้ขอบด้านหนึ่งขึ้น ฉันต้องการหมุนสามเหลี่ยมสมมติว่าตามเข็มนาฬิกา 60 องศา รอบขอบด้านบนนี้ วางมันลงในวัตถุหลัก เพื่อที่ฉันจะสามารถ หมุนสามเหลี่ยมถัดไป โดยให้ 120 องศารอบขอบด้านบนของมัน และต่อไปเรื่อย ๆ จนกระทั่งมีรูปหกเหลี่ยมอยู่หลังจากการรัน 6 ครั้ง (ดังนั้น 60 องศาต่อไทล์)   -  person Paul    schedule 28.12.2017
comment
ฉันคิดว่าคุณหมายถึงว่าคุณต้องการหมุนสามเหลี่ยมนั้นรอบจุดยอดบนของมัน [0.0, 1.0, 0.0]? ถ้าไม่เช่นนั้น จะแสดงภาพอธิบายผลลัพธ์ที่ต้องการจะดีกว่า   -  person prisoner849    schedule 28.12.2017

คำตอบ (1)


arrow_upward
1
arrow_downward

หากต้องการหมุนสามเหลี่ยมรอบมุมใดมุมหนึ่ง มุมนั้นจะต้องอยู่ตรงกลางพิกัด เพื่อจุดประสงค์นี้ คุณสามารถใช้วิธี .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>

person prisoner849    schedule 28.12.2017