如何摆脱几何图形

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平面来偏移第二个网格的位置。如果您不想渲染任何内容，则可以始终将组用于这些目的。

因此，更换线路：

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

带有：

mesh = new THREE.Group();

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

Answer 2

上面的代码中有两个平面网格。第一个定义为：

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

第二个("门"(定义为：

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

删除定义第一个代码的代码将删除非门矩形。但您不能简单地删除该代码，您可以到此为止，因为请注意mesh2定义的最后一行：

mesh.add(mesh2);

这意味着mesh2被添加为mesh的子。pivot组也是mesh的子组。在这两种情况下，都可以将mesh替换为scene，这样就可以继续了。