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 回答