Threejs对象翻译和还原

Posted

技术标签:

【中文标题】Threejs对象翻译和还原【英文标题】:Threejs object Translate and restore 【发布时间】:2018-02-01 06:58:03 【问题描述】:

我是 Three.js 的新手。我已经加载了一个包含多个对象的 collada (.dae) 文件。 现在我想在鼠标悬停时在其 z 轴上平移每个对象,并在鼠标离开该对象时恢复其位置。

我为此使用“Raycaster”。

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

raycaster = new THREE.Raycaster(camera.position, vector.sub( camera.position ).normalize());
mouse = new THREE.Vector2();

函数是

function onDocumentMouseMove ( event ) 

    event.preventDefault();
    mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

    raycaster.setFromCamera( mouse, camera );

    // console.log(scene);
    var intersect = raycaster.intersectObjects( scene.children[2].children);
    // console.log(intersect);
    if ( intersect.length > 0 ) 
    

    
    else
    

    


我有我的鼠标相交的对象,但我不确定如何翻译该对象并在鼠标移出时将其恢复,使其看起来很平滑。

【问题讨论】:

【参考方案1】:

已编辑

您需要将相交检查移出 onDocumentMouseMove 并检查您的循环。 onDocumentMouseMove 只会在你的移动移动时被调用,但是每帧都会调用检查。

您的循环应该包含以下内容:

raycaster.setFromCamera( mouse, camera );
var intersect = raycaster.intersectObjects(scene.children);

if ( intersect.length > 0 ) 
    intersect[0].object.translateZ(1);
 else  
    // For all of your objects:
    cube.position.z = 0;

这是CodePen。

【讨论】:

它可以工作,但并不流畅。我的意思是如果鼠标仍在对象上移动(已翻译)。物体开始闪烁。有什么办法可以让它翻译流畅。

以上是关于Threejs对象翻译和还原的主要内容,如果未能解决你的问题,请参考以下文章

在 ThreeJS 中缩放到对象

threejs 世界坐标转化为屏幕坐标

用threejs释放内存

三 JS - 如何用 Y 平面切割 3D 对象?

Threejs用鼠标围绕对象旋转? (没有鼠标按下)

three.js如何让场景中模型跟随鼠标旋转呀