CODEWITHSUNDEEP
javascriptthree.js
Aarav Shah
Aarav Shah

Reputation: 85

How to fix a black canvas when implementing Orbit Controls for Three.js?

I am learning three.js, and so far it is going good. I managed to program a cube on the canvas in JS Fiddle, but when I tried to use Orbit Controls to rotate it, it just showed a black canvas.

I have tried researching on the three.js website and I have looked at other working examples with Orbit Controls, but none of them have worked for me.

<script src='http://threejs.org/build/three.min.js'></script>
    <script src='http://threejs.org/examples/js/controls/OrbitControls.js'></script>

    <script>
    let container, renderer, scene, camera, controls;

        function init() {

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

  scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.z = 4;

        controls = new THREE.OrbitControls(camera, renderer.domElement);

        let geometry = new THREE.BoxGeometry(1, 1, 1);
        let material = new THREE.MeshBasicMaterial({color: 0x000000});
        let cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        window.addEventListener('resize', resizeFunction);
        }

        let resizeFunction = function() {
            let width = window.innerWidth;
            let height = window.innerHeight;
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
            renderer.setSize(width, height);
        }
        let animate = function() {
            controls.update();
            renderer.render(scene, camera);
            requestAnimationFrame(animate);
        }
        init();
        animate();
</script>

I could not find any error messages. I expected the output to be a fully rotating black cube on a lighter background, but instead it showed a completely black screen. I also have checked my code multiple times, and I have found no problem. Hope you guys can help!

Upvotes: 0

Views: 531

Answers (1)

2pha
2pha

Reputation: 10165

Seems to work for me.

    let container, renderer, scene, camera, controls;

        function init() {

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

  scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.z = 4;

        controls = new THREE.OrbitControls(camera, renderer.domElement);

        let geometry = new THREE.BoxGeometry(1, 1, 1);
        let material = new THREE.MeshBasicMaterial({color: 0x000000});
        let cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        window.addEventListener('resize', resizeFunction);
        }

        let resizeFunction = function() {
            let width = window.innerWidth;
            let height = window.innerHeight;
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
            renderer.setSize(width, height);
        }
        let animate = function() {
            controls.update();
            renderer.render(scene, camera);
            requestAnimationFrame(animate);
        }
        init();
        animate();
<script src='http://threejs.org/build/three.min.js'></script>
    <script src='http://threejs.org/examples/js/controls/OrbitControls.js'></script>

Upvotes: 0

Related Questions