1

スカイドームを作りたいと思って球体を作りましたが、テクスチャの読み込みもうまくいきましたが、球体の中でカメラを動かすことができません。球が消える。素人の問題とは存じますが、球体の内部が見えません。

ある種の切断または Z バッファの問題ですか?

どうすれば修正できますか？

私のコード:

<html>
<head>
    <script src="js/jquery-1.8.3.min.js"></script>  
    <script src="js/three.min.js"></script>
</head>

<body>

    <div id="container">

    </div>


    <script>
        function addSpaceSphere( ){
            // set up the sphere vars
            var radius = 200,
            segments = 16,
            rings = 16;

            var material = new THREE.MeshPhongMaterial({
                color:0xFFFFFF,
                map: THREE.ImageUtils.loadTexture( 'textures/SPACE014SX.png' )
            });

            var sphere = new THREE.Mesh(
                new THREE.SphereGeometry(
                    radius,
                    segments,
                    rings
                ),
                material
            );


            // add the sphere to the scene
            scene.add(sphere);
        }

        function addLights(){
            // create a point light
            var ambient = new THREE.AmbientLight( 0xFFFFFF );
            scene.add( ambient );
        }
        function render() {
            camera.lookAt( focus );
            camera.updateProjectionMatrix();

            renderer.render( scene, camera );
        }
        function animate() {
            requestAnimationFrame( animate );
            render();
        }

        function createScene(){
            // add the camera to the scene
            scene.add(camera);

            // the camera starts at 0,0,0
            // so pull it back
            camera.position.x = 0;
            camera.position.y = 0;
            camera.position.z = 300;

            // start the renderer
            renderer.setSize(WIDTH, HEIGHT);

            $container.append(renderer.domElement);

            addSpaceSphere( );

            addLights();

            animate();
        }

        var WIDTH = window.innerWidth;
        var HEIGHT = window.innerHeight;

        var VIEW_ANGLE = 45,
            ASPECT = WIDTH / HEIGHT,
            NEAR = 0.01,
            FAR = 10000;

        var focus = new THREE.Vector3( 0, 0, 0 );


        var isUserInteracting = false,
            onPointerDownPointerX = 0, onPointerDownPointerY = 0,
            lon = 0, onPointerDownLon = 0,
            lat = 0, onPointerDownLat = 0,
            phi = 0, theta = 0;

        var $container = $('#container');

        // create a WebGL renderer, camera
        // and a scene
        //var renderer = new THREE.CanvasRenderer();
        var renderer = new THREE.WebGLRenderer();
        var camera = new THREE.PerspectiveCamera(
            VIEW_ANGLE, ASPECT, NEAR, FAR
        );

        var scene = new THREE.Scene();

        createScene();      

    </script>
</body>
4

1 に答える 1

8

スカイドーム マテリアルを両面にします -- カリングされています。'side' 属性を THREE.DoubleSide に設定します

(または、カメラが球の内側にのみある場合は、THREE.BackSide も機能するはずです)

于 2012-12-08T09:26:20.857 に答える