三.js不可见平面不能与raycaster.intersectObject一起工作
Three.js invisible plane not working with raycaster.intersectObject
我正在尝试制作可拖动的对象,如以下示例所示:https://www.script-tutorials.com/demos/467/index.html
应该可拖动的对象位于数组对象移动线中。
我使用以下代码向我的场景添加了一个平面:
plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(500, 500, 8, 8), new THREE.MeshBasicMaterial({color: 0x248f24, alphaTest: 0}));
plane.visible = false;
scene.add(plane);
在 onDocumentMouseDown 函数下出现问题。出于某种原因,如果平面可见性设置为 false (plane.visible = false),则在某个点,将不会填充相交的 objmovers。但是,如果飞机的能见度设置为 true,它将正常工作(但显然,这会导致一架巨大的飞机挡住一切):
function onDocumentMouseDown(event) {
// Object position movers
var vector = new THREE.Vector3(mouse.x, mouse.y, 1);
vector.unproject(camera);
raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
var intersectsobjmovers = raycaster.intersectObjects(objectMoverLines);
if (intersectsobjmovers.length > 0) {
console.log('clicking an object mover');
// Disable the controls
controls.enabled = false;
// Set the selection - first intersected object
objmoverselection = intersectsobjmovers[0].object;
// Calculate the offset
var intersectsobjmovers = raycaster.intersectObject(plane);
// At this point, intersectsobjmovers does not include any items, even though
// it should (but it does work when plane.visible is set to true...)
offset.copy(intersectsobjmovers[0].point).sub(plane.position);
} else {
controls.enabled = true;
}
}
另外,这是我目前在onDocumentMouseMove功能下拥有的功能:
function onDocumentMouseMove(event) {
event.preventDefault();
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
// Get 3D vector from 3D mouse position using 'unproject' function
var vector = new THREE.Vector3(mouse.x, mouse.y, 1);
vector.unproject(camera);
// Set the raycaster position
raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
if (objmoverselection) {
// Check the position where the plane is intersected
var intersectsobjmovers = raycaster.intersectObject(plane);
// Reposition the object based on the intersection point with the plane
objmoverselection.position.copy(intersectsobjmovers[0].point.sub(offset));
} else {
// Update position of the plane if need
var intersectsobjmovers = raycaster.intersectObjects(objectMoverLines);
if (intersectsobjmovers.length > 0) {
// var lookAtVector = new THREE.Vector3(0,0, -1);
// lookAtVector.applyQuaternion(camera.quaternion);
plane.position.copy(intersectsobjmovers[0].object.position);
plane.lookAt(camera.position);
}
}
requestAnimationFrame( render );
}
试试这个:
plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(500, 500, 8, 8),
new THREE.MeshBasicMaterial( {
color: 0x248f24, alphaTest: 0, visible: false
}));
scene.add(plane);
相关文章:
- 可以'使用inter.js进行测试时不要滚动
- 如何修复错误'对象没有't支持属性或方法'getScreenCTM''在Inter
- Three.js Raycaster.intersectObject仅检测前表面上的相交
- THREEjs Raycaster拦截Object问题
- 将 Three.js' Raycaster 限制为 HTML 的特定部分.避免偏移
- 三.js不可见平面不能与raycaster.intersectObject一起工作
- Raycaster 不会移动 BoxMesh 对象
- 如何从inter.js测试中加载node.js http模块
- Using ThreeJS StereoEffect and Raycaster
- Three.js Raycaster与球体的碰撞检测
- js Raycaster没有与我的自定义网格相交
- Raycaster不能与组合相机一起工作-三个js
- raycaster.intersectObject()每次返回相同的faceIndex
- three.js Raycaster intersectObjects