CODEWITHSUNDEEP
three.js
user2405469
user2405469

Reputation: 2003

Three js Cannot see the sphere

I am just looking at the documentation on the threejs.org website and thought I would give making a sphere a shot, here is what I have quickly mocked up:

<!DOCTYPE html>
<html>
    <head>
        <title>Sphere</title>
        <style>canvas { width: 100%; height: 100% }</style>
    </head>
    <body>
        <script type="text/javascript" src="../../threejs/build/Three.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );


            var geometry = new THREE.SphereGeometry(5, 32, 32);
            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            var sphere = new THREE.Mesh(geometry, material);
            sphere.overdraw = true;
            scene.add( sphere );

            camera.position.z = 5;

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

            render();
        </script>
    </body>
</html>

Trouble I see no sphere, there are no errors in the console either...could someone help with this one.

Upvotes: 1

Views: 421

Answers (2)

kungfooman
kungfooman

Reputation: 4893

I had the same issue with a project using Three.js version 0.113.0, but after updating to rev 124 the issue disappeared.

Upvotes: 0

mrdoob
mrdoob

Reputation: 19592

Seems like the camera is at the edge of the sphere. Try camera.position.z = 20;.

Upvotes: 1

Related Questions