2016-12-18 2 views
1

У меня есть модель, загруженная из .obj и .mtl. Я хочу, чтобы пользователь мог нажимать на определенные части модели и, например, менять цвет. i.e нажмите на дверь автомобиля и сможете изменить цвет этой дверной сетки.Обнаружение нажмите на сетку 3DObject

Вот мой код загрузки модели, если это необходимо.

var mtlLoader = new THREE.MTLLoader(); 
    mtlLoader.setPath('Models/Aventador/'); 
    mtlLoader.load('Avent.mtl', function (materials) { 
     materials.preload(); 
     var objLoader = new THREE.OBJLoader(); 
     objLoader.setMaterials(materials); 
     objLoader.setPath('Models/Aventador/'); 
     objLoader.load('Avent.obj', function (object) { 
      object.position.y = 0;   
      scene.add(object); 
     }, onProgress, onError); 
    }); 

EDIT: теперь у меня есть следующий код, который не дает никаких ошибок и печатает «MouseUp» на консоль, как и ожидалось, но не печатает любые перекрестки, как и следовало ожидать, никаких идей, что не так?

var mouse = new THREE.Vector2(); 
function onDocumentMouseUp(event) { 
    console.log("mouseUp") 
    mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
    mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 
    var raycaster = new THREE.Raycaster(); 
    raycaster.setFromCamera(mouse, camera); 
    var intersects = raycaster.intersectObjects(scene.children); 
    for (var i = 0; i < intersects.length; i++) { 
     console.log(intersects[i]); 
     intersects[i].object.material.color.set(0x0000ff); 
    } 
} 

EDIT 2: helper arrows

+0

У меня такое чувство, что единственный способ сделать это - если каждая часть сетки, которая является «интерактивной» (например, дверь), представляет собой отдельную сетку, загруженную в сцену. У вас есть возможность разбить его так? – Hectate

+0

@ Gectate Я не уверен, у меня нет большого опыта работы с 3D-моделями. Я нашел что-то, что могло бы перебирать дочерние сетки объекта 3DObject и изменять их свойства индивидуально, но у меня не было возможности определить, какая сетка была – Jack

+0

. Я тоже этого не делаю. Если он состоит из дочерних сеток, которые вы можете изменить, то то, что вы ищете, - это raycast, чтобы определить, какой компонент был «тронут» и изменить настройки этого. Попробуйте: http://stackoverflow.com/questions/9275628/threejs-how-to-add-interactivity/9320071#9320071 – Hectate

ответ

1

Так что для щелкающих частей, вы хотите raycast модели с позиции мыши. Ссылка, приведенная ниже, должна предоставить вам достаточно информации для начала работы.

https://threejs.org/docs/index.html?q=ray#Reference/Core/Raycaster

raycast должен сказать вам, что объект, который вы попали, а затем вы можете помнить, что объект для использования (изменение цветовых свойств, например).

В ответ на ваш другой вопрос objects похож на scene.children, указанный по ссылке выше. Вы также можете передать только сетку и посмотреть, удастся ли ей (вместо того, чтобы сказать, свет или плоский самолет, что у вас есть автомобиль, сидящий на поверхности).

Редактировать: Поскольку это был объект Obj, мы выяснили в чате, что нам нужно было следовать вместе с this answer и включить рекурсию на raycast, чтобы он смог определить части требуемой модели.

+0

пытался, что не похоже на его работу, или у меня что-то не так. См. Edit – Jack

+0

Это почти наверняка, потому что вы напрямую используете координаты мыши. Если вы посмотрите на некоторые из примеров, вы увидите, что они выполняют некоторую математику для преобразования положения мыши в пространство экрана: https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_cubes.html – Hectate

+0

Добавлено, что предлагаемые математики. По-прежнему получить тот же результат, что и раньше – Jack

Смежные вопросы