three.js上的相机和地形碰撞 [英] camera and terrain collision on three.js

问题描述

我有一个用sketchup创建的建筑模型，导出为collada文件，并使用colladaloader加载到three.js。
一切正常，除了相机可以穿过墙壁。我该如何预防？到目前为止，我已经尝试过
Raycasting，但是我认为出了点问题。

I have a building model created with sketchup, exported as collada file and loaded to three.js with colladaloader. Everything works fine except that the camera can pass through walls. How do I prevent this? So far I have tried with Raycasting, but I think something is wrong.

这是模型加载的方式

loader.options.convertUpAxis = true;
loader.load( 'model/cityhall.dae', function ( collada ) {

dae = collada.scene;
skin = collada.skins[ 0 ];
model_geometry = collada.scene.children[ 0 ].children[0].geometry;
model_material = collada.scene.children[ 0 ].children[0].material;

dae.scale.x = dae.scale.y = dae.scale.z = 1;
dae.updateMatrix();
scene.add( dae );
dae.traverse(function (child) {
if (child instanceof THREE.Mesh) {
                        objects.push(child);
                    }
                });
            });

光线投射器

            rayFloor = new THREE.Raycaster();
            rayFloor.ray.direction.set( 0, -1, 0 );

            rayWall = new THREE.Raycaster();
            rayWall.ray.direction.set(0,0,1);

这是用于动画的

            function animate() {
            requestAnimationFrame( animate );

            controls.isOnObject( false );
                            controls.isWallCollision( false);

            rayFloor.ray.origin.copy( controls.getObject().position );
            rayFloor.ray.origin.x -= 10;

            rayWall.ray.origin.copy( controls.getObject().position );
            rayWall.ray.origin.y -= 8;

            var intersections = rayFloor.intersectObjects( objects );
            var intersections2 = rayWall.intersectObjects( objects );

            if ( intersections.length > 0 ) {
                //console.log('floor' + intersections);

                var distance = intersections[ 0 ].distance;
                if ( distance > 0 && distance < 10 ) {
                    controls.isOnObject( true );
                }

            }

            if ( intersections2.length > 0 ) {
                //console.log('wall' + intersections);

                var distance = intersections2[ 0 ].distance;
                if ( distance > 0 && distance < 10 ) {
                    controls.isWallCollision( true );
                }

            }
            controls.update( Date.now() - time );
            render();

            time = Date.now();
        }

问题是无法正确检测墙壁和地板。

the problem is it cannot detect wall and floor correctly.

推荐答案

以下是使用Raycaster进行碰撞检测的有效示例的链接：

Here is a link to a working example of collision detection using Raycaster:

< a href = http://stemkoski.github.com/Three.js/Collision-Detection.html rel = nofollow> http://stemkoski.github.com/Three.js/Collision-Detection.html

希望有帮助！

这篇关于three.js上的相机和地形碰撞的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！