Question

我从Three.js开始，我正在尝试在我的场景中设置一个简单的第一人称控件，它包含一个球体。我只是看到一个黑屏。没有错误。

如果没有FirstPersonControls，我可以看到球体。

我做错了什么？

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style>
            #container {
                width: 400px;
                height: 300px;
            }
        </style>
        <script type="text/javascript" src="js/Three.js"></script>
        <script type="text/javascript">
            var controls;
            window.onload = function() {
                var RENDER_WIDTH = 400, RENDER_HEIGHT = 300;

                // Creating scene
                var scene = new THREE.Scene();

                // Camera
                var camera = new THREE.PerspectiveCamera(45, RENDER_WIDTH / RENDER_HEIGHT, 0.1, 10000);
                camera.position.z = 300;
                scene.add(camera);
                controls = new THREE.FirstPersonControls(camera);
                controls.movementSpeed = 1000;
                controls.lookSpeed = 0.125;
                controls.lookVertical = true;

                // Sphere
                var sphereMaterial = new THREE.MeshLambertMaterial({
                    color: 0x00ff00
                });
                var radius = 50, segments = 16, rings = 16;
                var sphere = new THREE.Mesh(
                    new THREE.SphereGeometry(radius, segments, rings),
                    sphereMaterial
                );
                scene.add(sphere);

                // Light
                scene.add(new THREE.AmbientLight(0x333333));
                var light = new THREE.PointLight(0xffffff, 0.9);
                light.position.set(50, 200, 50);
                scene.add(light);

                // Render
                var container = document.getElementById('container');
                var renderer = new THREE.WebGLRenderer();
                renderer.setSize(RENDER_WIDTH, RENDER_HEIGHT);
                renderer.setClearColorHex(0x000000, 1);
                container.appendChild(renderer.domElement);

                var clock = new THREE.Clock();
                setInterval(function() {
                    var delta = clock.getDelta();
                    controls.update(delta);
                    renderer.render(scene, camera);
                }, 100);
            };
        </script>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>

Answer 1

FirstPersonControls旨在使用全角画布，因此您需要设置

var RENDER_WIDTH = window.innerWidth, RENDER_HEIGHT = window.innerHeight;

同时删除style次设置。

最后，为了更容易“找到”你的球体，设置controls.lookVertical = false - 只是为了现在。

从那时起，你只需要进行实验。

无法获得第一人称控件的作品

1 个答案: