0

私は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>
4

1 に答える 1

2

FirstPersonControls全幅のキャンバスで動作するように設計されているため、設定する必要があります

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

また、設定を削除しstyleます。

最後に、球を「見つける」のを簡単にするためにcontrols.lookVertical = false、今のところ設定します。

その時点から、あなたはただ実験する必要があるでしょう。

于 2012-10-13T22:51:27.743 に答える