使用三个js拖放GLTF加载对象
Posted
技术标签:
【中文标题】使用三个js拖放GLTF加载对象【英文标题】:GLTF loaded object drag and drop using three js 【发布时间】:2020-05-25 20:09:14 【问题描述】:当我尝试选择并拖动对象时,我尝试加载由多个元素组成的 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
【问题讨论】:
【参考方案1】: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函数之后或之前添加以下函数
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;
;
【讨论】:
【参考方案2】:即使您加载单个 glTF
资产,视觉对象也可以由许多单独的 3D 对象组成。由于THREE.DragControls
在对象级别上工作,所以提到的结果就是预期的行为。
解决此问题的最简单方法是在 Blender 等内容创建工具中合并对象的单个部分,然后导出新的glTF
。否则,您必须通过three.js
将单个网格合并成一个更大的网格。或者您更改THREE.DragControls
,以便它也能够根据其边界框选择组对象。
three.js R113
【讨论】:
以上是关于使用三个js拖放GLTF加载对象的主要内容,如果未能解决你的问题,请参考以下文章