CODEWITHSUNDEEP
javascriptthree.js
joeb
joeb

Reputation: 877

Three js sample scene not working

Sorry for the total noob question but Im just starting in three.js. This will probably be a simple answer for the pros. Im trying to start with the most basic scene and build my knowledge from there. So i started with the example scene straight from the docs. All i get when i run it, both locally, and on my server is just a white screen, no canvas or scene. The examples i downloaded work both locally and on my server so im not quite sure why this doesn't work. Here's my code. 

<!DOCTYPE html>
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<canvas></canvas>
<script src="threejs/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(700, 700, 700, 10, 10, 10);
var material = new THREE.MeshBasicMaterial({color: 0xfffff, wireframe: true});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 1000;
function render() {
    requestAnimationFrame(render);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
};
render();
</script>
</body>
</html>

Thanks in advance for any help.
Joe

Upvotes: 1

Views: 981

Answers (2)

Ashutosh Mujumdar
Ashutosh Mujumdar

Reputation: 21

I also faced the same problem.. The tutorial says to copy three.js file in the first_app folder (i.e. the 'js' folder). Even by changing the src to "build/three.js" as suggested by Ben didn't work for me. So, I just tried by removing "js/" part from the code.. & guess what? it worked for me.

So, in my code the 'src' line looks like 

    `<src="three.js">File not found...</script>

This works because there's a copy of three.js file in the same folder as of this application. However, somehow the tutorial text doesn't work.. but you can try this.. it might work for you too

Upvotes: 2

Ben Bodan
Ben Bodan

Reputation: 81

Check your three.js file location. This src worked for me , my html file is in the home folder (three.js-master)

<script src="build/three.js"></script>

Upvotes: 3

Related Questions