如何使用Raycaster Three.js获取组对象的名称
如何使用Raycaster Three.js获取组对象的名称
提问于 2017-02-16 21:38:49
我想要得到这个组的名字，但是我想取这个名字，我取的名字是空的，代码是这样的
我要做的是，当鼠标在组网格上时，我就会提醒我，我知道我碰到了特定的网格。
` // +++++++++++++++++++++射线连铸机+++++++++++++++++++++
// creating group and add all the pieses
group = new THREE.Object3D(); //create an empty container
group.add(obj_body); //add a mesh with geometry to it
group.name = 'myGroupName';
scene.add(group);
ray_objects.push(group);
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
window.addEventListener( 'mousemove', onMouseMove, false );
window.addEventListener( 'onDocumentMouseDown', onMouseMove, false );
function onMouseMove( event ) {
// calculate mouse position in normalized device coordinates
// (-1 to +1) for both components
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// console.log(mouse.x);
$("#x_pos").html(mouse.x);
$("#y_pos").html(mouse.y);
// update the picking ray with the camera and mouse position
raycaster.setFromCamera( mouse, camera );
// calculate objects intersecting the picking ray
var intersects = raycaster.intersectObjects( ray_objects, true );
for ( var i = 0; i < intersects.length; i++ ) {
if (intersects.length > 0) {
var firstIntersectedObject = intersects[0];
// alert(firstIntersectedObject);
console.log(firstIntersectedObject);
intersects[ 0 ].object.material.color.set( 0x00ff00 );
// this will give you the first intersected Object if there aremultiple.
renderer.render( selected_scene, camera );
}
// alert(intersects);
}}` 回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-17 08:07:54
我认为韦斯特兰利在他的链接评论中的解释是相当好的，但这里有一个例子，如果你需要一些帮助的基本想法。我创建了4个立方体，每组2个，并将它们添加到各组中。当您在多维数据集上鼠标移动时，它们将将其组记录到控制台。
http://codepen.io/anon/pen/NdmZZo
var width = window.innerWidth;
var height = window.innerHeight;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();
var group1 = new THREE.Object3D();
var cubeGeometry = new THREE.CubeGeometry(50, 50, 50);
var cube1 = new THREE.Mesh(cubeGeometry);
cube1.position.set(0, 50, 50);
var cube2 = new THREE.Mesh(cubeGeometry);
cube2.position.set(0, 150, 50);
cube1.userData.parent = group1;
cube2.userData.parent = group1;
group1.add(cube1);
group1.add(cube2);
group1.name = "Group 1";
var group2 = new THREE.Object3D();
var cube3 = new THREE.Mesh(cubeGeometry);
cube3.position.set(300, 50, 50);
var cube4 = new THREE.Mesh(cubeGeometry);
cube4.position.set(300, 150, 50);
cube3.userData.parent = group2;
cube4.userData.parent = group2;
group2.add(cube3);
group2.add(cube4);
group2.name = "Group 2";
scene.add(group1);
scene.add(group2);
var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.z = 500;
render();
animate();
function animate() {
requestAnimationFrame( animate );
}
function render() {
renderer.render( scene, camera );
}
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onMouseMove( event ) {
// calculate mouse position in normalized device coordinates
// (-1 to +1) for both components
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// update the picking ray with the camera and mouse position
raycaster.setFromCamera( mouse, camera );
// calculate objects intersecting the picking ray
var intersects = raycaster.intersectObjects( scene.children, true );
if(intersects && intersects[0]) {
console.log('GROUP IS ' + intersects[0].object.userData.parent.name)
}
}
document.addEventListener('mousemove', onMouseMove)<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42285163
复制相关文章
相似问题
腾讯云开发者
