Question

这是我在StackOverflow中的第一个问题，但我已经浏览了几年了，所以我恳请你忍受我。：）

我一直在尝试使用Three.js创建一个3D世界，一切都很好看，直到我需要控制相机。因为我使用这个lib来避免我自己进行基质计算，所以我发现并将TrackballControls添加到我的代码中。它工作正常，但我的相机可以通过3D形状，也可以通过地形。不幸的是，虽然我的动作完全，但它不能达到让相机尊重碰撞的目的。

我的场景只是地面（薄BoxGeometry）和立方体（正常大小的BoxGeometry），以及一个共享DirectionLight位置以获得“太阳光”效果的旋转球体。这里的一些人建议将Physijs添加到代码中并在场景中模拟（）物理，并将BoxMesh添加到相机以使物理适用于它，但它根本不起作用（场景变成空白）。

到目前为止我的工作代码（没有Physijs）是：

window.onload = function() {
        var renderer, scene, camera, ground, box, sphere, ambient_light, sun_light, controls;
        var angle = 0;
        var clock = new THREE.Clock();

        init();
        render();

        function init(){
            // Create renderer and add it to the page
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.setClearColor( 0xffffff );
            renderer.shadowMapEnabled = true;
            document.body.appendChild( renderer.domElement );

            // Create a scene to hold our awesome 3D world
            scene = new THREE.Scene();

            /*** 3D WORLD ***/
            // Objects

            ground = new THREE.Mesh(
                new THREE.BoxGeometry(50, 1, 50),
                new THREE.MeshLambertMaterial({ color: 0x33CC33 }),
                0 // mass
            );

            ground.receiveShadow = true;
            scene.add( ground );

            box = new THREE.Mesh(
                new THREE.BoxGeometry( 10, 10, 10 ),
                new THREE.MeshLambertMaterial({ color: 0xDD3344 })
            );

            box.position.y = 5;
            box.castShadow = true;

            scene.add( box );

            sphere = new THREE.Mesh(
                new THREE.SphereGeometry( 3, 32, 32 ),
                new THREE.MeshBasicMaterial({ color: 0xFFBB00 })
            );
            sphere.position.set( 1, 15.5, 5 );
            scene.add( sphere );

            // Light
            ambient_light = new THREE.AmbientLight( 0x333333 );
            ambient_light.mass = 0;
            scene.add( ambient_light );

            sun_light = new THREE.DirectionalLight( 0xBBBBBB );
            sun_light.position.set( 1, 15.5, 5 );
            sun_light.castShadow = true;

            sun_light.shadowCameraNear = 1;
            sun_light.shadowCameraFar = 100;

            sun_light.shadowCameraLeft = -50;
            sun_light.shadowCameraRight = 50;
            sun_light.shadowCameraTop = -50;
            sun_light.shadowCameraBottom = 50;

            sun_light.shadowBias = -.01;

            scene.add( sun_light );

            // Create a camera
            camera = new THREE.PerspectiveCamera(
                45,                                     // FOV
                window.innerWidth / window.innerHeight, // Aspect Ratio
                1,                                      // Near plane
                1000                                    // Far plane
            );
            camera.position.set( 30, 30, 30 ); // Position camera
            camera.lookAt( box.position ); // Look at the scene origin

            scene.add(camera);

            // After swapping THREE.Mesh to Physijs.BoxMesh, this is where I'd attach a BoxMesh to the camera

            window.addEventListener( 'resize', onWindowResize, false );

            controls = new THREE.TrackballControls( camera );
            controls.rotateSpeed = 4.0;
            controls.panSpeed = 0.3;
            controls.staticMoving = true; // No sliding after-effects

        }

        function render() {
            // use requestAnimationFrame to create a render loop
            angle += .007;
            var oscillateZ = Math.sin(angle * (Math.PI*4));
            var oscillateX = -Math.cos(angle * (Math.PI*4));
            //console.log(oscillateZ);
            sphere.position.setZ( sphere.position.z + oscillateZ );
            sphere.position.setX( sphere.position.x + oscillateX );
            sun_light.position.setZ( sun_light.position.z + oscillateZ );
            sun_light.position.setX( sun_light.position.x + oscillateX );

            requestAnimationFrame( render );
            controls.update();

            renderer.render( scene, camera );
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );
        }
    };

你们可以开导我吗？谢谢你的时间！

@Edit Physijs attempt

Three.js - 与场景

0 个答案: