GLTF загруженный объект перетаскивания с использованием трех js - PullRequest
Новая
       3

GLTF загруженный объект перетаскивания с использованием трех js

6 голосов
/ 10 февраля 2020

Я пытался загрузить 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

Ответы [ 2 ]

2 голосов
/ 10 февраля 2020

Даже если вы загрузите один актив glTF, визуальный объект может состоять из множества отдельных трехмерных объектов. Поскольку THREE.DragControls работает на уровне объекта, упомянутый результат является предполагаемым поведением.

Самый простой способ решить эту проблему - объединить отдельные части вашего объекта в инструмент создания контента, например Blender, и затем экспортировать новый glTF. В противном случае вы должны объединить отдельные сетки в более крупные с помощью three.js. Или вы измените THREE.DragControls, чтобы он также мог выбирать групповой объект на основе его ограничительной рамки.

three.js R113

1 голос
/ 19 февраля 2020 
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);

// конец кода функции инициализации // добавление следующей функции после или перед функцией инициализации 

 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;
};
...