参加本教程Draggable cubes我尝试移动我的个人几何立方体但不起作用。在下面的代码中,它适用于geometry2但不适用于geometry0,也许在geometry0中有一些不允许移动的设置?
//geometry0 doesn't move
geometry0 = new THREE.Geometry()
geometry0.vertices = [new THREE.Vector3(0.5, -0.5, 0.5), new THREE.Vector3(-0.5, -0.5, 0.5), new THREE.Vector3(-0.5, -0.5, -0.5), new THREE.Vector3(0.5, -0.5, -0.5), new THREE.Vector3(0.5, 0.5, 0.5), new THREE.Vector3(-0.5, 0.5, 0.5), new THREE.Vector3(-0.5, 0.5, -0.5), new THREE.Vector3(0.5, 0.5, -0.5)];
geometry0.faces = [new THREE.Face3(3, 2, 1), new THREE.Face3(3, 1, 0), new THREE.Face3(4, 5, 6), new THREE.Face3(4, 6, 7), new THREE.Face3(0, 1, 5), new THREE.Face3(0, 5, 4), new THREE.Face3(1, 2, 6), new THREE.Face3(1, 6, 5), new THREE.Face3(2, 3, 7), new THREE.Face3(2, 7, 6), new THREE.Face3(3, 0, 4), new THREE.Face3(3, 4, 7)];
geometry0.computeFaceNormals();
geometry0.computeVertexNormals();
var material0 = new THREE.MeshBasicMaterial( { color: 0x39d2dbe7fff39d2, transparent: true, opacity: 0 });
mesh0 = new THREE.Mesh( geometry0, material0);
egh0 = new THREE.EdgesHelper( mesh0, 0x000 );
egh0.material.linewidth = 2;
scene.add( egh0 );
geometry2 = new THREE.Geometry() // it works
geometry2.vertices = [new THREE.Vector3(0.5, -0.5, 0), new THREE.Vector3(0.5, -0.166667, 0.5), new THREE.Vector3(0, -0.5, 0.5), new THREE.Vector3(0.5, -0.5, 0.5)];
geometry2.faces = [new THREE.Face3(0, 1, 2), new THREE.Face3(0, 3, 1), new THREE.Face3(1, 3, 2), new THREE.Face3(2, 3, 0)];
geometry2.computeFaceNormals();
geometry2.computeVertexNormals();
var material2 = new THREE.MeshBasicMaterial( { color: 0xffff00 });
mesh2 = new THREE.Mesh( geometry2, material2);
scene.add(mesh2);
egh2 = new THREE.EdgesHelper( mesh2, 0x000 );
egh2.material.linewidth = 2;
scene.add( egh2 );
geometryContainer.push(mesh0);
geometryContainer.push(mesh2);
plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffff00, opacity: 0.25 } ) );
//plane.visible = false;
scene.add( plane );
function render()
{
renderer.clear();
renderer.render( scene, camera );
renderer.clearDepth();
renderer.render( scene_text, camera );
}
function onDocumentMouseMove( event ) {
event.preventDefault();
mouse2D.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse2D.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
var vector = new THREE.Vector3( mouse2D.x, mouse2D.y, 0.5 );
projector.unprojectVector( vector, camera );
var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
if ( SELECTED ) {
console.log("selected");
var intersects = raycaster.intersectObject( plane );
console.log(intersects[ 0 ]);
SELECTED.position.copy( intersects[ 0 ].point.sub( offset ) );
console.log(SELECTED.position);
render();
return;
}
var intersects = raycaster.intersectObjects( geometryContainer );
if ( intersects.length > 0 ) {
console.log(intersects);
if ( INTERSECTED != intersects[ 0 ].object ) {
if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
INTERSECTED = intersects[ 0 ].object;
INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
plane.position.copy( INTERSECTED.position );
plane.lookAt( camera.position );
render();
}
container.style.cursor = 'pointer';
} else {
if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
INTERSECTED = null;
container.style.cursor = 'auto';
}
}
function onDocumentMouseDown( event ) {
event.preventDefault();
var vector = new THREE.Vector3( mouse2D.x, mouse2D.y, 0.5 );
projector.unprojectVector( vector, camera );
var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
var intersects = raycaster.intersectObjects( geometryContainer );
console.log(intersects);
if ( intersects.length > 0 ) {
//controls.enabled = false;
controls.noRotate=true;
SELECTED = intersects[ 0 ].object;
var intersects = raycaster.intersectObject( plane );
offset.copy( intersects[ 0 ].point ).sub( plane.position );
container.style.cursor = 'move';
}
}
function onDocumentMouseUp( event ) {
event.preventDefault();
controls.noRotate=false;
//controls.enabled = true;
if ( INTERSECTED ) {
plane.position.copy( INTERSECTED.position );
SELECTED = null;
}
container.style.cursor = 'auto';
}