How to use three JS in html div tag

Question

I use domElement to append the data in window. But how can I use html div tag to append it to the window?

I got the error

Cannot read property 'appendChild' of null

where I can't append my three js code in div element.

 <html>
<head>
    <title>
        Ajay's Beginners guide
    </title>
</head>

<body>
    <script src="../build/three.js"></script>
    <script>
        var scene, camera, renderer;
        function init() {
            var scene = new THREE.Scene();
            var WIDTH = window.innerWidth,
                HEIGHT = window.innerHeight;
        }
        renderer = new THREE.WebGLRenderer();
        // renderer.setSize(WIDTH, HEIGHT);
        console.log(document.body);
        canvas = document.getElementById('mycanvas');
        canvas.appendChild(renderer.domElement);
        renderer.setClearColorHex(0x333F47, 1);
        //color and opacity

        var light = new THREE.PointLight(0xffffff);
        light.position.set(-100, 200, 100);
        scene.add(light);

        camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 2000);
        camera.set.position(0, 6, 0);
        scene.add(camera);

        var loader = new THREE.JSONLoader();
        loader.load("models/treehouse_logo.js", function (geometry) {
            var material = new THREE.MeshLambertMaterial({ color: ox55B663 });
            mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);
        });

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

        window.addEventListener('resize', function () {
            var WIDTH = window.innerWidth;
            var HEIGHT = window.innerHeight;
            renderer.setSize(WIDTH, HEIGHT);
            camera.aspect = WIDTH / HEIGHT;
            camera.updateProjectionMatrix();
        });

        // init();
        function animate() {
            requestAnimationFrame();
            renderer.render(scene, camera);
            controls.update();
        }
    </script>
    <div id="mycanvas">
    </div>
</body>
</html>

Your script exists in the body before the div "canvas" element. The browser parses the page in order (mostly). So, you can place the script below the div so that the div exists to be appended to as it is currently null when your code executes. Here's a link to a related Stack Question on waiting for page contents before hooking them here: https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t — Darryl_Lehmann, Jan 21 '19 at 19:07
@Darryl_Lehmann You should post your comment as an actual answer. I was about to write a response with the exact same explanation as yours. — M -, Jan 21 '19 at 19:13

score 0 · Accepted Answer · answered Jan 22 '19 at 18:16

Moving from comment to answer, thanks for the suggestion @Marquizzo.

Your script exists in the body before the div "canvas" element. The browser parses the page in order (mostly). So, you can move the script below the div so that it exists to be appended to as it is currently null when your code executes.

Here's a link to a related Stack Question on waiting for page contents before hooking them in code: Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it

thanks for your answer @darryl_lehmann. Kindly up-vote my post if considerable — , Jan 24 '19 at 07:08

How to use three JS in html div tag

1 Answers1