![](/img/trans.png)
[英]Three.js Accessing an object after it was loaded with GLTF Loader
[英]GLTF loaded object drag and drop using three js
當我嘗試選擇和拖動對象時,我嘗試加載由多個元素組成的 gltf(對象),我只能拖動一個元素。 請幫我解決這個問題。
var loader = new THREE.GLTFLoader();
loader.load(‘W3030 / W3030.gltf’, (gltf) => {
this.scene.add(gltf.scene);
gltf.scene.scale.set(1, 1, 1);
gltf.scene.traverse(function(object) {
if (object.isMesh) objects.push(object);
if (object.isMesh) objects.castShadow = true;
});
});
GLTF 演示的屏幕截圖:
拖動前: https : //prnt.sc/pu940g
拖動后: https : //prnt.sc/pu93g3
即使您加載單個glTF
資產,視覺對象也可以由許多單獨的 3D 對象組成。 由於THREE.DragControls
在對象級別上工作,因此上述結果是預期的行為。
解決此問題的最簡單方法是在 Blender 等內容創建工具中合並對象的單個部分,然后導出新的glTF
。 否則,您必須通過three.js
將單個網格合並為一個更大的網格。 或者您更改THREE.DragControls
以便它也能夠根據其邊界框選擇組對象。
three.js R113
use following code to drag multi mesh GLTF. It is Work for me.
var dragobjects =[];
//add following code in init function
var gltfobject = addGLTFObjectIntoScene();
scene.add(gltfobject);
dragControls = new THREE.DragControls(dragobjects, camera, renderer.domElement);
dragControls.addEventListener('dragstart', onDragStart, false);
dragControls.addEventListener('drag', onDrag , false);
dragControls.addEventListener('dragend', onDragEnd, false);
//結束init函數代碼 //在init函數之后或之前添加以下函數
function drawBox(objectwidth,objectheight,objectdepth){
var geometry, material, box;
geometry = new THREE.BoxGeometry(objectwidth,objectheight,objectdepth);
material = new THREE.MeshBasicMaterial({color: 0xffff00, transparent: true, opacity: 0,depthTest:false});
box = new THREE.Mesh(geometry, material);
dragobjects.push(box);
box.position.set(0, 0, 0);
return box;
};
function addGLTFObjectIntoScene(){
group = new THREE.Group();
var loader = new THREE.GLTFLoader();
loader.load( 'W1230/W1230.gltf', ( gltf ) => {
mesh = gltf.scene;
mesh.scale.set( 30, 30, 30);
var gltfbox = new THREE.Box3().setFromObject( mesh );
var objectwidth = Math.floor(gltfbox.getSize().x);
var objectheight = Math.floor(gltfbox.getSize().y);
var objectdepth = Math.floor(gltfbox.getSize().z);
objectwidth = objectwidth + parseInt(2);
objectheight = objectheight + parseInt(2);
objectdepth = objectdepth + parseInt(1);
mesh.position.set(0, -objectheight/2, 0);
box = drawBox(objectwidth,objectheight,objectdepth);
group.add(box);
group.name = "quadrant";
console.log(mesh);
box.add( mesh);
});
return group;
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.