Select components of a model

Hi

I am new to threejs.

What I would like to do is to is render a model, say a house and then have a dropdown box with all the “components” of the house. When I select the component in the dropdown box the camera should focus on this component.

So I do know that I will use the controls.target.set option to be able to change where the camera is looking.

I would like to for example select the door and the controls should then update to show the position of that door.

Is there perhaps an example someone knows of which has similar functionality?

I do not see something like this on the examples page of threejs.

Kind Regards

Is the functionality on this page a bit what you are looking for? Here the camera focuses on the various continents when selected in the menu.

Internally the OrbitControls are used. The end position and -target are stored (‘obj’ being the camera):

obj.orbitTarget=new THREE.Vector3(targetx, targety, targetz);
obj.targetPosition = new THREE.Vector3(x, y, z);
obj.targetStep = Math.floor(2 / speed);

Then this function is used to update the camere each time frame:

   var f = function () {
                if (obj.targetPosition && obj.targetPosition != '') {
                    obj.targetStep--;
                    if (obj.position.distanceTo(obj.targetPosition) < 0.1 || obj.targetStep<0) {
                        obj.targetPosition = '';
                        obj.orbitTarget=undefined;
                    }
                    else {
                        obj.position.lerp(obj.targetPosition, speed);
                        if(orbitControls && obj.orbitTarget){
                            orbitControls.target.lerp(obj.orbitTarget.clone(), speed);
                        }
                    }
                }
            }

Hi,

Yes this is very similar to what I am looking for. Thank you.

I do have some additional questions:

  1. How are the options in the selection box tied to the actual continents on the map?
  2. Even if I rotate the map completely the camera corrects itself and zooms to the correct continent, how this does work?
  3. Is there perhaps a code example somewhere?

Thank you for showing me this example.

In the stats page there is an onclick for each continent name in the menu that calls this function, each with their own position and target data

threeml.moveToPosition(camera, pos.x, pos.y, pos.z,target.x, target.y, target.z, 0.003)

You don’t rotate the map, with OrbitControls, the camera moves around the object. That is why absolute position/target can be used to focus on specific objects

The code is on GitHub - threemlorg/MetaThree: The search for a distributed metaverse, based on ThreeJS, but it is not isolated

@awonnink

Thank you for responding to all my questions.

I have a few more.

Am I correct in saying that you are the creator of ThreeML?

Is it possible for me to use this library in an Angular project?
Is there perhaps a npm package I can install which will allow me access to the methods in ThreeML?

I need access to the method threeml.moveToPosistion() as you mentioned earlier.

My scenario is this:

I load a .glb file using the GLTFLoader provided by three.js.
I then set the scale using object.scene.scale.set()

I have dropdown box which is populated with a list of co-ordinates which correspond to certain elements of the .glb file.

Currently I am using the controls.target.set method to change the controls to show that specific component. However, the co-ordinates and the scale to do not currently align. Would control.target.set be the right method to use here? Or should I try to use the threeml.moveToPostion() as mentioned?

What type of file is your world map? Is it an actual 3D model?

yes

It is plain JavaScript, so I guess: yes. There is a somewhat older npm package (npm i threeml)

However the concept of ThreeML is that a large part of the scene can be done declaritive, Like for a gbl file you would use:

<gltfLoader name="fish" visible="true" url="./models/fish.glb" rotation="20 -70 10" position="2 0 -4" scale="1"></gltfLoader>

This would abruptly change the focus of the camera, but maybe you want that.

It is just a plane with a texture (doublesided material). I use json to get the data from the server, and create boxgeometries from that with the correct color, height and location.

btw if you’re in angular there is a very good abstraction available: angular-three. it has pointer events ootb.

Thank you.

Thank you for all the feedback, in the end I just used the Orbitcontrols to set the target.