three.js-点击鼠标获取对象名称

three.js - get object name with mouse click

本文关键字：取对象 获取 鼠标 js- three      更新时间：2023-09-26

我已经使用json加载程序将3个具有该名称的外部模型加载到我的场景中，现在我想通过单击它来获得模型/对象的名称。

下面是我用来加载模型的

var object_material = new THREE.MeshBasicMaterial({                 
                    color: 0xd6d6d6,                            
                    side: THREE.DoubleSide          
                });
    var   loader = new THREE.JSONLoader();
    loader.load("models/"+file,
                    function(geometry, object_material) 
                    {   
            var object = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(object_material));             
                        model = new THREE.Object3D();
                        model.id=file;
                        model.name='sample'+file;
                        model.userData.id='sampledata'+file;
                        model.add(object);    
                        model.position.set(obj_x,obj_y,obj_z);                                                  
                        model.mirroredLoop = true;
                        model.castShadow = true;
                        model.receiveShadow = true;         
                        scene.add(model);
                    }
                );

下面是我的鼠标下降功能

function onMouseDown(event) {
    event.preventDefault();
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
    projector.unprojectVector( vector, camera );

        var pLocal = new THREE.Vector3(0, 0, -1);
        var pWorld = pLocal.applyMatrix4(camera.matrixWorld);
        var ray = new THREE.Raycaster(pWorld, vector.sub(pWorld).normalize());
        // Get meshes from all objects
        var getMeshes = function(children) {
            var meshes = [];
            for (var i = 0; i < children.length; i++) 
            {
                if (children[i].children.length > 0) {
                    meshes = meshes.concat(getMeshes(children[i].children));
                } else if (children[i] instanceof THREE.Mesh) {
                    meshes.push(children[i]);
                }
            }
            return meshes;
        };
        function attributeValues(o) 
        {
            var out = [];
            for (var key in o) {
            if (!o.hasOwnProperty(key))
            continue;
            out.push(o[key]);
            }
            return out;
        }
        var objects = attributeValues(this.o3dByEntityId);
        var meshes = getMeshes(objects);
    var intersects = ray.intersectObjects(meshes);      
    raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
    var intersects = raycaster.intersectObjects( scene.children );
    console.log(scene);
    // this console displays all the objects under children - THREE.Object3D - name as name: "sample513.js" 
    if ( intersects.length > 0 )
    {
        // but for the clickedObject - the length is > 0 and name is empty
        var clickedObject = intersects[0].object;
        console.log(clickedObject.parent.userData.id); // return as undefined
        if ( INTERSECTED != intersects[ 0 ].object )
        {                               
            INTERSECTED= intersects[ 0 ].object;                
            name    =   INTERSECTED.name;                       
        }
    } else {
        console.log('intersects.length is 0');
    }
}

尽管我在userData中提供了模型名称，但我无法检索它。有人能指导我如何在点击

时检索对象的名称吗

试着通过这个例子。查看控制台中的消息。

<script src="js/controls/EventsControls.js"></script>
EventsControls = new EventsControls( camera, renderer.domElement );
EventsControls.attachEvent( 'onclick', function() {
    console.log( 'this.focused.name: ' + this.focused.name );
});

//如果使用拖放

EventsControls.attachEvent( 'dragAndDrop', function () {
    this.container.style.cursor = 'move';
    this.focused.position.y = this.previous.y;
});
EventsControls.attachEvent( 'mouseOut', function () {
    this.container.style.cursor = 'auto';
});
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "models/Tux.js", addModelToScene ); 

function addModelToScene( geometry, materials ) {
   var material = new THREE.MeshFaceMaterial( materials );
   model = new THREE.Mesh( geometry, material );
   model.scale.set( 10, 10, 10 ); model.name = 'Tux';
   model.rotation.x = -Math.PI/2; 
   model.position.set( 175, 45, 125 );
   scene.add( model ); 
   EventsControls.attach( model );
}

点击对象的父对象可能未定义。也许您可以通过控制台记录单击的对象，并查看访问id所需的路径。

相关文章：