时间戳

首页 > 解决方案 > 跟随鼠标光标three.js的3d模型

javascript - 跟随鼠标光标three.js的3d模型

问题描述

我最近发现了这个three.js图书馆，我已经用了几天来试验它。我想在项目中添加一个鼠标事件，实际上与此示例完全相同，即跟随光标的头骨，只是我只想使用我的 JSON 3D 模型（而在示例中也有模型的眼睛和下巴动画来模拟咬合）

这是示例的链接： 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();

标签： javascriptthree.jsmouseevent3d-model

解决方案

您必须定义 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);

  }

推荐阅读