0

Имеется набор THREE.Sprite

    var textureLoader = new THREE.TextureLoader();

var mapLeft = textureLoader.load("img/rotate_left.png" );
var materialLeft = new THREE.SpriteMaterial( { map: mapLeft, color: 0xffffff, fog: true } );
var spriteLeft = new THREE.Sprite(materialLeft);
spriteLeft.name = 'rotate_left';

который устанавливается рядом с объектом и должен выполнять функцию кнопки, однако при попытке определения нажатия через

    var intersect = app.raycaster.intersectObjects(app.scene.children);

возвращается пустой массив хотя при отладке видно что необходимые объекты присутствуют в списке children моей сцены. Вот в этой теме была подсказка но я столкнулся со сложностью в реализации этих рекомендаций, не могли вы подсказать мне решение.

ПС. По факту необходимо реализовать кликабельную область над неким 3D объектом в сцене в виде аля "полоски здоровья", постоянно повернутая к камере , состоящая из несколькиз спрайтов. (от сюда еще один вопрос как получить 2D координату по координате 3D и рисовать спрайт уже по 2D координатам что бы в не зависимости от поворота камеры эти доп. элементы интерфейса были параллельно горизонту)

Вот так это должно выглядеть:

Вот как это должно выглядеть

По факту при привязке спрайтов к определённой точке 3D объекта, я разношу их по z координате и при вращении камеры получается что разнесённые спрайты смещаются в 3D перспективе :( , как выход разносить их в 2D координатах, но как ?

не верный вариант

Были внесены правки по рекомендации prisoner849, переходим от использования Sprite к Plane

Но возникли сложности при наложении текстуры для будущей кнопки использую код для создания Plane

    // Создаю группу как было рекомендовано
var group = new THREE.Group();
group.name = 'rotate-elements';
// Делаю её quaternion таким же как у камеры
group.quaternion.copy(app.camera.quaternion);
// mesh это моя 3D фигура над которой нужно повесить элементы управления
group.position.copy(mesh.position);

// Загружаю текстуру 
var texture = new THREE.TextureLoader().load( "img/can.png" );
// Создаю материал на её основе
var material = new THREE.MeshLambertMaterial({ map : texture });
// Создаю Plane , 10х10 используа данный материал
var plane = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), material);
plane.position.set(0,5,0);
group.add(plane);
app.scene.add(group);

В итоге имеем такую вот картинку, (бог с ним с размерами)

введите сюда описание изображения

Хотя значок изначально вот такой

введите сюда описание изображения

вопрос, почему так произошло ? когда я загружал в спрайты эту же картинку всё было ок, + как сделать что бы при текстурировании определённый цвет был прозрачным ?

И что самое печальное

    var intersect = app.raycaster.intersectObjects(app.scene.children);

ни дал результата при щелчке в области Plane

8
  • Как вариант - вместо спрайтов использовать плоскости с текстурой. Эти три плоскости поместить в контейнер типа THREE.Group() и присваивать кватерниону контейнера значение кватерниона камеры. 20 мар 2018 в 8:14
  • простите я а не подскажите как правильно наложить текстуру на Plane , 64х64, что бы она правильно заполнила одну сторону ? var texture = new THREE.TextureLoader().load( "img/can.png" ); var material = new THREE.MeshLambertMaterial({ map : texture }); var plane = new THREE.Mesh(new THREE.PlaneGeometry(5, 5), material); plane.position.set(0,5,0); даёт весьма странный результат :(, искажается изображение, и как указать какой цвет должен быть прозрачным ? 20 мар 2018 в 9:29
  • Можете дать живой пример кода? jsfiddle, codepen 20 мар 2018 в 9:34
  • я вношу правки, в чужой проект, он очень объёмен, я не уверен что смогу всё оформить в виде живого примера. Но несколько дополню вопрос 20 мар 2018 в 9:48
  • Копирование кватерниона и позиции можно упростить до: group.quaternion.copy(app.camera.quaternion) и group.position.copy(mesh.position). 20 мар 2018 в 10:27

1 ответ 1

1
  1. Метод .intersectObjects() имеет два параметра: первый - массив пересекаемых элементов, второй - булевый, устанавливает рекурсивный обход всех дочерних элементов у элементов из первого параметра.

Поэтому: var intersect = app.raycaster.intersectObjects(app.scene.children, true);

  1. По поводу png и прозрачности:

Чтобы прозрачность заработала, у материала нужно установить параметр .transparent в true.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.