A-Frame - Raycast Three. JS 3D-объект - PullRequest
Новая
       40

A-Frame - Raycast Three. JS 3D-объект

0 голосов
/ 10 апреля 2020

У меня есть два объекта, один цилиндр и один многоугольник, представляющие трехмерный объект Three. js, в сцене A-Frame. Все, что я хочу, это чтобы полигон менялся при наведении на него, как на цилиндр.

У меня есть рабочая демонстрация: Демо

Когда курсор наводится на цилиндр текст HOVERED появится на экране, а цвет цилиндра изменится, используя компонент Raycaster. Как я могу сделать то же самое с полигоном?

Многоугольник был создан следующим образом: 

AFRAME.registerComponent('foo', {
    init: function() {
        let points = [];
        points.push(new THREE.Vector2(0, 0));
        points.push(new THREE.Vector2(1.5, 0));
        points.push(new THREE.Vector2(2.5, 1));
        points.push(new THREE.Vector2(2.5, 2.5));
        points.push(new THREE.Vector2(1, 3.5));

        for (let i = 0; i < points.length; i++) {
            points[i].multiplyScalar(0.25);
        }
        let shape = new THREE.Shape(points);


        let extrudedGeometry = new THREE.ExtrudeGeometry(shape, {
            amount: 1,
            bevelEnabled: false
        });

        // Geometry doesn't do much on its own, we need to create a Mesh from it
        let extrudedMesh = new THREE.Mesh(extrudedGeometry, new THREE.MeshPhongMaterial({
            color: 0xff0000
        }));
        this.el.object3D.add(extrudedMesh);

        let geometry = new THREE.ShapeGeometry(shape);
        let material = new THREE.MeshBasicMaterial({
            color: 0x00ff00
        });
        let mesh = new THREE.Mesh(geometry, material);
        this.el.object3D.add(mesh);
    }
});

Спасибо.

1 Ответ

0 голосов
/ 10 апреля 2020

Raycaster посылает лучи против меня существа sh. Вы устанавливаете его с помощью setObject3D . Do: 

let mesh = new THREE.Mesh(geometry, material);
this.el.setObject3D('mesh', mesh);

Исправленный код

...