THREE.js not loading object

Question

I've just gotten into threejs, and I'm making a 'Hello World' of threejs, which is basically just making a shape. I am using c9.io to write all my code, and I don't know if this is what is causing the error. I have all my code written, but for some reason it isn't executing. Here are some snippets you might need:

<html>
    <head>
        <title>test</title>
        <meta charset="utf-8">
        <style>
        body {
            margin: 0px;
            background-color: #000000;
            overflow: hidden;   
        }
        canvas {
            width: 100%;
            height: 100%;
        }
        </style>
    </head>
    <body>
        <script src="node_modules/three/three.min.js"></script>
        <script src="scene1.js"></script>
    </body>
</html>

My HTML for running the website (Am I referencing the script properly?)

import THREE from 'node_modules/three';

var scene = new THREE.Scene();
var fov = 45;
var aspect = window.innerWidth / window.innerHeight;
var near = 0.1;
var far = 10000;
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({color: 0x666420});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var render = function()
{
    requestAnimationFrame(render);

    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;

    renderer.render(scene, camera);
}
render();

The JavaScript code

Here is my heirarchy on the left

According to the docs http://threejs.org/docs/#Manual/Introduction/Creating_a_scene — Taylor Brown, Mar 18 '16 at 18:54

score 0 · Answer 1 · answered Mar 18 '16 at 18:55

0

I have tried it in my browser and it's working. Make sure that "node_modules/three/three.min.js" exists or replace the src of script tag with "three.min.js". You have three.min.js file according to the screenshot.

answered Mar 18 '16 at 18:55

Naman Nehra

630
4
10

So you are saying it could be c9's problem? are there any other online code editing alternatives? – Taylor Brown Mar 18 '16 at 18:57
First check if the solution works. If not then run the file and check the console for any errors (it's the third tab at bottom in the screenshot). I haven't used c9 so I can't say if that's the source of the problem. I have used threejs and I am sure that that part is not causing the problem. You probably made some mistake while installing threejs. – Naman Nehra Mar 18 '16 at 19:02
No, I can't seem to find the error. I tried this in another program outside an online IDE and it also did not work. What am I doing wrong? – Taylor Brown Mar 19 '16 at 02:13
Try to install threejs again. I haven't used c9 so can't say for sure. – Naman Nehra Mar 19 '16 at 07:59
Can you see any error log in the console. Also profile the network tab for checking that file is loading or not. I used C9 never face the issue. Try to kill the process and restart the server after doing change lot of time it produce cache result which is bad of c9 ( as project grow ) – Ajit kohir Mar 20 '16 at 15:03

THREE.js not loading object

1 Answers1