three.js - 使用变形目标时光线相交不起作用

标签 three.js

有点复杂,请耐心等待:

  • 当对象没有 morphTargets 时,光线相交效果非常好。

  • 当对象有 morphTargets 时,只能与原始位置相交,也就是说,如果我将模型从 0,0,0 变形为 50,50, 50 光线不会在 50,50,50 处与对象相交,相反,当我将鼠标悬停在 0,0,0 上时,我会得到一个交集(即使该对象不再是在那里!?)。

是否需要打开某种标志才能使 Three.js 知道顶点已移动?

编辑,添加代码。

这会生成我的网格并将其添加到对象数组(光线相交使用的对象数组):

function createDeer( deerGeometry, materials ) {
    mesh = new THREE.MorphAnimMesh( deerGeometry, new THREE.MeshLambertMaterial( { color: 0xE8E8E8, ambient: 0xE8E8E8, morphTargets: true, vertexColors: THREE.FaceColors } ) );
    mesh.scale.set( 3, 3, 3 );
    mesh.position.set( 0, -3, 0 );
    mesh.rotation.set( 0, 0, 0 );
    mesh.castShadow = true;
    mesh.receiveShadow  = true;
    mesh.geometry.dynamic = true;
    scene.add( mesh );
    objects.push( mesh );
}

光线相交发生在 mouseDown 上(还有一个 mouseOver,同样的事情),就像我说的,代码工作正常,它只是与原始的未变形网格相交:

function onDocumentMouseDown( event ) {

    event.preventDefault();

    var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
    projector.unprojectVector( vector, camera );

    var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );

    var intersects = ray.intersectObjects( objects );

    if ( intersects.length > 0 ) {

        SELECTED = intersects[ 0 ].object;

        for(var i=0; i<objects.length; i++)
            { 
                if(SELECTED.position.x == objects[0].position.x) {
                    thisObject = i; 
                    }
                }

            }

        var intersects = ray.intersectObject( plane );

        container.style.cursor = 'pointer';
    }

}

我认为问题必须与以下事实有关:鹿的位置(如网格变换中)永远不会改变,但是顶点确实会移动,并且当光线相交时比较对象位置时,可能是问题所在在这里吗?

最佳答案

我做了一个pull request已合并并修复了此问题。

请注意,要使其正常工作,对象的 boundingSphere 需要包含变形的完整范围

关于three.js - 使用变形目标时光线相交不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13723473/

相关文章:

javascript - Three.js 中的头部耦合/离轴透视

Three.js 对象在纹理加载之前是黑色的 - 我可以更改此行为吗?

javascript - 如何在 Three.js 中使用 PCF(软)阴影?

javascript - three.js:cubemap 和 renderer.autoclear = false

STL - 如何在STL加载的BufferGeometry中平滑网格三角形

javascript - three.js 和无限前向网格移动

javascript - Three.js中如何使用相机作为纹理图像

javascript - 在 three.js 中添加视频作为纹理

三.js 类型错误 : Cannot read property 'center' of undefined

three.js - 将加载的 JSON 文件与名称关联起来以便以后访问