naming a multiple collada objects differing from another

Question

we are currently able to load multiple collada files using the code below, we want to know how we will be able to name the collada files differently.

Here are some of the functions that we used:

function loadFiles(){
    urls.push('./model/e1.dae');
    urls.push('./model/e2.dae');
    urls.push('./model/e3.dae');
    urls.push('./model/e4.dae');
    urls.push('./model/e5.dae');
    for(var i =0; i<urls.length; i+=1) {
        var loader = new THREE.ColladaLoader();
        loader.options.convertUpAxis = true;
        loader.load(urls[i], function(collada) {

            var object = collada.scene;
            object.updateMatrix();
            object.position.x = Math.random()*500-200;
            object.position.y = Math.random()*200-100;
            object.scale.x = object.scale.y = object.scale.z = 2;
            object.rotation.y -= (90)*(Math.PI/180);
            object.rotation.x = (90)*(Math.PI/180);
            object.position.z = 10;
            scene.add(object);
            renderer.render(scene, camera);
        });
    }
}


function onDocumentMouseDown( event ){
    event.preventDefault();
    toIntersect = [];
    scene.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
            toIntersect.push(child);
        }
    });
    raycaster = projector.pickingRay( mouse2D.clone(), camera );
    var intersects = raycaster.intersectObjects( toIntersect );

    alert(intersects[0].object.name);
}

In loadfile function, we put the addresses of the each of the collada files into an array and load it using a loop. The rendering of the file works. But we are not able to make it alert the name and/or id of the object if it was clicked.

Instead of releasing different names, all of the objects rendered alerts "SketchUp" when clicked.

Renaming using "object.name = "name"" do not work either. We hope that you could answer this question.

Answer 1

I have done something similar and it's working perfectly for me in selecting one of collada model and getting it's name and id using raycaster. (There are multiple collada models rendered in a scene).

Here is the snippet of code and steps that is working for me :

• Create new directionvector object as a global variable.

var directionVector = new THREE.Vector3();

• Create new mouse, raycaster, and projector object as global variables.

var mouse = new THREE.Vector2();

var raycaster = new THREE.Raycaster();

var projector = new THREE.Projector();

• Create onDocumentMouseMove event function and attach it into your collada model container (the DOM where your renderer.domElement placed) after your collada models are loaded.

  function onDocumentMouseMove( event ) {
            event.preventDefault();
            mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
            mouse.y = -( event.clientY / window.innerHeight ) * 2 + 1;
  

  }

your_collada_model_container.mousemove( onDocumentMouseMove );

• Attach on click event into your collada model container (the DOM where your renderer.domElement placed).

• When your container is clicked, call this function :

  function selectColladaModel(){

   directionVector.set(mouse.x, mouse.y, 1);
            projector.unprojectVector(directionVector, camera);
            directionVector.sub(camera.position);
            directionVector.normalize();
            raycaster.set(camera.position, directionVector);
            var intersects = raycaster.intersectObjects(scene.children, true);
            if (intersects.length) {
                var target = intersects[0].object;
                if(target){
                    console.log(target.name+"    "+target.id);
                }
            } 
  

  }

Answer 2

Right after var object = collada.scene; you can say object.name = urls[i];. You might have a scope issue but you get the idea. Or otherwise you can do the naming in Sketchup so it comes out correct.