Home/ Questions/Q 8960781
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T15:44:10+00:00

I want to create a skydome and made the shpere, texture loading also fine

  • 0

I want to create a skydome and made the shpere, texture loading also fine but I cannot move the camera inside the sphere.
The sphere disappears. I know it is an amateur issue but cannot see the inside of the sphere.

Is it some kind of cutting or Z-buffer issue?

How can I fix it?

My code:

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    make the skydome material double-sided — it’s being culled. Set the ‘side’ attribute to THREE.DoubleSide

    (or THREE.BackSide should work too, if the camera is ONLY inside the sphere)

    • 0