Hi folks,
I have re-read many topics but have not found the exact answer.
I am uploading a model gltf. The model consists of several elements (each has its own material and color, etc.). I make an event handler (the object is moved by mouse click) and use a raycasting to detect the object. When I had a model loaded in obj format, the whole model moved as a whole. But for a model in the gltf format, only one element of the model moves (which is hit by the ray).
How can I combine all the elements of the gltf model into one whole?
Can you share your code here? If possible as a working example on codesandbox or similar.
May be you can use for dedecting breath first searching method. But I am also haven’t any idea about combine.
Thanks. But I have a lot of code. Below are separate blocks of code:
//-------- it was the code to load the model in the obj format:
var loaderKitchen1Path1Door27 = new THREE.MTLLoader();
var loadPathD271 = loadPath+'magia1_part3_door27.mtl';
var loadPathD272 = loadPath+'magia1_part3_door27.obj';
loaderKitchen1Path1Door27.load(loadPathD271, function(matK1P1Door27){
matK1P1Door27.preload();
var objLoaderK1P1Door27 = new THREE.OBJLoader();
objLoaderK1P1Door27.setMaterials(matK1P1Door27);
objLoaderK1P1Door27.load(loadPathD272, function(meshK1P1Door27){
//----------------bbox----------
var door27Bbox = new THREE.Box3();
door27Bbox.setFromObject(meshK1P1Door27);
var bboxDoor27Center = door27Bbox.getCenter().clone();
bboxDoor27Center.multiplyScalar(-1);
meshK1P1Door27.traverse(function(child){
child.castShadow = true;
child.receiveShadow = true;
if (child instanceof THREE.Mesh){
child.geometry.translate(bboxDoor27Center.x, bboxDoor27Center.y, bboxDoor27Center.z);
door[27].id = child.id;
}
});
door27Bbox.setFromObject(meshK1P1Door27);
//------------------------------------------------
cubeAs[27].add(meshK1P1Door27);
meshK1P1Door27.position.set((-door[27].cubeAs27X),0,(-door[27].cubeAs27Z));//-1.36,0.471, 2.435465
meshK1P1Door27.rotation.y = Math.PI;
});
});
//---------end loading obj
//-----now I want to load gltf:
var loaderKitchen1Path1Door27 = new GLTFLoader();
loaderKitchen1Path1Door27.load('models/door27.gltf', function(meshK1P1Door27){
meshK1P1Door27.scene;
//----------------bbox----------
var door27Bbox = new THREE.Box3();
door27Bbox.setFromObject(meshK1P1Door27.scene);
var bboxDoor27Center = door27Bbox.getCenter().clone();
bboxDoor27Center.multiplyScalar(-1);
meshK1P1Door27.scene.traverse(function(child){
child.castShadow = true;
child.receiveShadow = true;
if (child instanceof THREE.Mesh){
child.geometry.translate(bboxDoor27Center.x, bboxDoor27Center.y, bboxDoor27Center.z);
}
});
//------------------------------------------------
cubeAs[27].add(meshK1P1Door27.scene);
meshK1P1Door27.scene.position.set((-door[27].cubeAs27X),0,(-door[27].cubeAs27Z));//-1.36,0.471, 2.435465
meshK1P1Door27.scene.rotation.y = Math.PI;
});
//------------loading is sussesful
//--------------then event
function onDocumentMouseDblClick( event ) {
event.preventDefault();
var intersects = getIntersects( event.layerX, event.layerY );
if ( intersects.length > 0 ) {
selectedObject = intersects[0].object;
selectedObjectStatusId = selectedObject.id;
if(selectedObjectStatusId === door[27].id){
//---------mooving selectedObject (here code fjf mooving stltcted object)
}
}
}
//-----------here I use raycasting to detect Object
//statsNode.innerHTML = '';
var raycaster = new THREE.Raycaster();
var projector = new Projector();
var directionVector = new THREE.Vector3();
function getIntersects( x, y ) {
x = ( x / window.innerWidth ) * 2 - 1;
y = - ( y / window.innerHeight ) * 2 + 1;
var z = 0.5;
directionVector.set( x, y, z );
projector.unprojectVector(directionVector, camera);
directionVector.sub(camera.position);
directionVector.normalize();
raycaster.set(camera.position, directionVector);
var rayCube = raycaster.intersectObjects( scene.children, true );
if (rayCube.length) {
var target1 = rayCube[0].object;
if (target1.id === door[27].id){
return rayCube;
}
}
}
//--------------
Hi
I have recorded a short video to show my problem. Please watch the video:
https://youtu.be/wLSigsADD3s
Hi folks, so can anyone help?
Hi const , did you try to make an invisible element above your model (cube with transparence material ) and move the fake obj ?