javascript - 如何摆脱几何？

Question

我试图在用户点击 three.js 中的球体时创建一扇打开的门。我试着用一个模型来做，但我设法让它出现在正确的位置，而不是通过动画旋转到它。

我决定尝试专注于一个更简单的场景，只使用我在 three.js 中制作的矩形。经过几个小时的尝试让它工作后，我设法让它旋转并在 90 度时停止。然而，它绕着位于矩形中心的 y 轴旋转。

我找到了这个教程:https://jsfiddle.net/uxzmsLfr/1/

var camera, scene, renderer;
var mesh, pivot;

 init();
 animate();

 function init() {

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;

scene = new THREE.Scene();

var geometry = new THREE.PlaneGeometry( 0.2, 0.5, 0.2 );
var material = new THREE.MeshNormalMaterial();

mesh = new THREE.Mesh( geometry, material );
mesh.position.set(0, -.25, 0);
scene.add( mesh );

var geo2 = geometry.clone();
geo2.rotateZ(THREE.Math.degToRad(90)); // ROTATE GEOMETRY SO IT'S IN THE CORRECT ORIENTATION

  var mesh2 = new THREE.Mesh( geo2, material );
mesh2.position.set( 0, .25, 0 ); // MOVE THE GEOMOETRY UP BY HALF SO PIVOT IS AT THE BOTTOM OF THE GEO
mesh2.rotation.set(0, 0, Math.PI / 2);
 mesh.add(mesh2);

pivot = new THREE.Group();
pivot.position.set( 0.0, 0.25, 0 ); // MOVE THE PIVOT BACK TO WORLD ORIGN
mesh.add( pivot ); // THIS ADDS THE PIVOT TO THE CENTRE OF THE GEOMOETRY, WHICH WAS THEN ADDING MESH2 IN THE WRONG PLACE
pivot.add( mesh2 );

// VISUALISE PIVOT
var pivotSphereGeo = new THREE.SphereGeometry( 0.01 );
var pivotSphere = new THREE.Mesh(pivotSphereGeo);
pivotSphere.position.set( 0,0,0 );
pivotSphere.position.z = 0.1;
 scene.add( pivotSphere );

scene.add( new THREE.AxesHelper() );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

}

function animate() {

requestAnimationFrame( animate );

    pivot.rotation.z += 0.01;

renderer.render( scene, camera );

}

到目前为止，我设法对我的代码做了同样的事情。我现在唯一苦恼的是如何移除静止的矩形？

如果您能给我任何帮助，我将不胜感激。

Answer 1

该示例使用网格 平面来偏移第二个网格的位置。如果您不想渲染任何内容，您始终可以将组用于这些目的。

所以，替换行:

mesh = new THREE.Mesh( geometry, material );

与:

mesh = new THREE.Group();

并相应地重命名变量以避免混淆代码。