3д модель следит за курсором мыши three.js - PullRequest
Новая
       77

3д модель следит за курсором мыши three.js

0 голосов
/ 21 декабря 2018

Я недавно обнаружил библиотеку three.js, и уже несколько дней я экспериментирую с ней.Я хотел бы добавить в проект событие мыши, практически то же самое, что и в этом примере, голову черепа, которая следует за курсором, только я хотел бы использовать только мою 3D-модель JSON (хотя в примере также естьглаза модели и анимация челюсти для имитации прикуса)

Это ссылка на пример: https://codepen.io/interaktiv-ca/pen/XayZPx

Я несколько раз пытался, на этом примере, реализовать это в своем проектено с всегда отрицательным результатом.

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

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera ( 50, window.innerWidth / window.innerHeight, 1, 1000 );

camera.position.z = 15;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight);

document.body.appendChild ( renderer.domElement );

controls = new THREE.OrbitControls ( camera, renderer.domElement );

var loader = new THREE.ObjectLoader();
loader.load("/model/skull.json",function ( obj ) {
    var box = new THREE.Box3().setFromObject ( obj );
    var center = new THREE.Vector3();
    box.getCenter( center );
    obj.position.sub ( center );
    obj.rotation.y = Math.PI;
    scene.add ( obj );
});

var animate = function () {
    requestAnimationFrame( animate );
    
    renderer.render( scene, camera );
}

animate();

1 Ответ

0 голосов
/ 25 декабря 2018

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

onMouseMove(event) {
    const that = this;
    const mouse = this.mouse;
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, this.camera);
    const objectListSelect = [];
    objectListSelect.push(this.plane); // your object will moving around this plane
    const intersects = raycaster.intersectObjects(objectListSelect);
   const item = intersects[i];
     yourobject.position.copy(item.point);

  }
...