CODEWITHSUNDEEP
htmlthree.jswebglrender
Bafla13
Bafla13

Reputation: 132

The browser does not render anything with three.js

I'm just new to webGL and three.js and I have just picked an example from JSFiddle,

http://jsfiddle.net/BlackSRC/XWCRM/1/

But when I test it, I'm getting nothing, The Code looks like this :

<!DOCTYPE html>
<html>


<head>
    <title>ThreeJS</title>

</head>
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/mrdoob-three.js-2524525/build/three.js"></script>
<script>
    function onLoadComplete() {
        init();
        animate();
    }

    var camera, scene, renderer;
    var geometry, material, mesh;



    function init() {

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

        scene = new THREE.Scene();

        geometry = new THREE.CubeGeometry(200, 200, 200);
        material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        renderer = new THREE.CanvasRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        document.body.appendChild(renderer.domElement);

    }

    function animate() {

        // note: three.js includes requestAnimationFrame shim
        requestAnimationFrame(animate);

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render(scene, camera);

    }
</script>

<body onload="onLoadComplete();">

Am I missing something? Thanks for helping!

Upvotes: 0

Views: 3390

Answers (2)

Aryan K
Aryan K

Reputation: 11

Click on inspect and check if there is any error related to loading the path of the model or maybe some constructor error.

  • You might want to change this to geometry = CubeGeometry(...)
  • Also use a live server to load three js models as they are dynamic in nature.

Upvotes: 0

LF-DevJourney
LF-DevJourney

Reputation: 28529

There is nothing wrong with your code, but you use the the local js file. So it rulusts the js code runs before the body dom render, so when called the document.body.appendChild(renderer.domElement);will cause the error:

test.html:45 Uncaught TypeError: Cannot read property 'appendChild' of null(…)

and result the blank page. But when I test with the remote js files not store in the local, it works well. So to avoid this issue, make the js loaded after the dom.

Below is the code, I just but the body before the js code, and use online js file. Here put body after js code may also works, as js load from remote, when js runs, the body have already rendered.

 <!DOCTYPE html>
<html>
<head>
    <title>ThreeJS</title>

<body onload="onLoadComplete();">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script>
<script>
    function onLoadComplete() {
        init();
        animate();
    }

    var camera, scene, renderer;
    var geometry, material, mesh;



    function init() {

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

        scene = new THREE.Scene();

        geometry = new THREE.CubeGeometry(200, 200, 200);
        material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        renderer = new THREE.CanvasRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        document.body.appendChild(renderer.domElement);

    }

    function animate() {

        // note: three.js includes requestAnimationFrame shim
        requestAnimationFrame(animate);

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render(scene, camera);

    }
</script>

</html>

Upvotes: 0

Related Questions