Question

我试图在Three.js（WEBGL库）中制作碰撞检测“程序”。但是，我得到一个错误“无法调用未定义的方法multiplyvector3。”

谁能告诉我我做错了什么？

我刚刚实现的碰撞检测功能是：

function animate() {

      requestAnimationFrame(animate);
      render();
        for (var vertexIndex = 0; geometries[0].vertices.length; vertexIndex++)
        {       
            var localVertex = geometries[0].vertices[vertexIndex].clone();
            var globalVertex = geometries[0].matrix.multiplyVector3(localVertex);
            var directionVector = globalVertex.subSelf(meshes[5].position);

            var ray = new THREE.Ray( meshes[5].position, directionVector.clone().normalize() );
            var collisionResults = ray.intersectObjects( meshes);
            if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() ) 
            {
            }
            else {
                meshes[5].position.y -= 0.15;
                meshes[5].rotation.z -= 0.15;
            }
        }
    }

完整的代码是，

<html>
<head>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/three.js/r54/three.min.js'></script>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var camera, scene, renderer, material;
var meshes = new Array();
var geometries = new Array();
init();
animate();

function init() {

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 500;
  camera.position.x += 125;
  scene.add(camera);

  geometries[0] = new THREE.CubeGeometry(35, 35, 35);
  material = new THREE.MeshNormalMaterial();
  geometries[1] = new THREE.SphereGeometry(35, 35, 35);
  material = new THREE.MeshNormalMaterial();    
    for(var i = 0; i < 5; i++) {
         meshes[i] = new THREE.Mesh(geometries[0], material);   
    }

    meshes[5] = new THREE.Mesh(geometries[1], material);

    for(var i = 0; i < 5; i++) {    
         meshes[i].position.x = (35*i);
         meshes[i].rotation.x = 5;
    }

    meshes[5].position.y = (100);

    for(var i = 0; i < 5; i++) {    
        scene.add(meshes[i]);
    }
        scene.add(meshes[5]);


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

  document.body.appendChild(renderer.domElement);
  document.addEventListener("mousemove", onDocumentMouseMove, false);
}

function onDocumentMouseMove(event) {

}

function animate() {

  requestAnimationFrame(animate);
  render();
    for (var vertexIndex = 0; geometries[0].vertices.length; vertexIndex++)
    {       
        var localVertex = geometries[0].vertices[vertexIndex].clone();
        var globalVertex = geometries[0].matrix.multiplyVector3(localVertex);
        var directionVector = globalVertex.subSelf(meshes[5].position);

        var ray = new THREE.Ray( meshes[5].position, directionVector.clone().normalize() );
        var collisionResults = ray.intersectObjects( meshes);
        if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() ) 
        {
        }
        else {
            meshes[5].position.y -= 0.15;
            meshes[5].rotation.z -= 0.15;
        }
    }
}

function render() {
  renderer.render(scene, camera);

}
}//]]>  

</script>
</head>
<body>
</body>
</html>

谢谢！

Answer 1

for (var vertexIndex = 0; geometries[0].vertices.length; vertexIndex++)

应该是

for (var vertexIndex = 0; vertexIndex < geometries[0].vertices.length; vertexIndex++)

Three.js碰撞检测（ERROR）

1 个答案: