0

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!

5
  • Refer to the three.js instructions: github.com/mrdoob/three.js Commented Aug 1, 2013 at 10:59
  • renders in chrome, if you use internet explorer use another browser.
    – supernova
    Commented Aug 1, 2013 at 12:52
  • I have opened a thread under this link: github.com/mrdoob/three.js/issues/3710 and they have said that i should ask hier ,cuz it is not a bug im trying to render this with chrome,and opera but still it does not work :(
    – Bafla13
    Commented Aug 1, 2013 at 15:44
  • The instructions that I referred to have a section called "Usage" that tell you how to get this to run. Are there any errors in the console? Commented Aug 1, 2013 at 16:18
  • unfortunatly im getting no errors at all, i can scroll the page ,this means ,the element has been created and its there but still it has not been rednered :(
    – Bafla13
    Commented Aug 1, 2013 at 22:29

2 Answers 2

0

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>

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.