Bagaimana cara memutar segitiga di sekitar tepinya?

Bagaimana sebuah segitiga, yang dibuat dengan three.js, dapat diputar pada salah satu sisinya? Ketika saya mencoba memutarnya, sepertinya ia berputar di sekitar pusatnya.

Segitiga dibuat dengan cara:

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 );

Saya perlu memutarnya di satu sisi untuk membuat prisma/segi enam.


javascript object rotation three.js
person Paul    schedule 27.12.2017    source sumber
comment
Bisakah Anda mengilustrasikan maksud Anda dengan Saya perlu memutarnya di sekitar satu sisi untuk membuat prisma/h eksagon.?   -  person prisoner849    schedule 28.12.2017
comment
Ketika segitiga ada di layar, sehingga Anda dapat melihat bidang penuhnya, dengan satu sisi menghadap ke atas, saya ingin memutar segitiga tersebut katakanlah searah jarum jam sebesar 60 derajat, di sekitar tepi atas ini, masukkan ke dalam objek induk, sehingga saya bisa putar segitiga berikutnya, dengan 120 derajat di sekeliling tepi atasnya dan seterusnya hingga segi enam muncul setelah 6 putaran (oleh karena itu 60 derajat per ubin).   -  person Paul    schedule 28.12.2017
comment
Saya kira, maksud Anda Anda ingin memutar segitiga itu di sekitar titik puncaknya [0.0, 1.0, 0.0]? Jika tidak, lebih baik tunjukkan gambaran penjelasan tentang hasil yang diinginkan.   -  person prisoner849    schedule 28.12.2017

Jawaban (1)


arrow_upward
1
arrow_downward

Untuk memutar segitiga pada salah satu sudutnya, sudut tersebut harus berada di pusat koordinat. Untuk tujuan ini Anda dapat menggunakan metode .translate ( x, y, z ) dari THREE.Geometry().

Lihatlah cuplikan kode.

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