Sublime Forum

Problem linking javascript file to HTML file

#1

Below is a code in two files which generates only white empty page,
no errors are reported executing code, what is the problem?

index.html file:

Three.js html, body {margin: 0; padding: 0; overflow: hidden}

main.js file:

function init() {
var scene = new THREE.Scene();

var box = getBox(1, 1, 1);
var plane = getPlane(4);

box.position.y = box.geometry.parameters.height/2;
plane.rotation.x = Math.PI/2;

scene.add(box);
scene.add(plane);

var camera = new THREE.PerspectiveCamera(
	45,
	window.innerWidth/window.innerHeight,
	1,
	1000
);

camera.position.x = 1;
camera.position.y = 2;
camera.position.z = 5;

camera.lookAt(new THREE.Vector3(0, 0, 0));

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('webgl').appendChild(renderer.domElement);
renderer.render(
	scene,
	camera 
);

}

function getBox(w, h, d) {
var geometry = new THREE.BoxGeometry(w, h, d);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var mesh = new THREE.Mesh(
geometry,
material
);

return mesh;

}

function getPlane(size) {
var geometry = new THREE.PlaneGeometry(size, size);
var material = new THREE.MeshBasicMaterial({
color: 0xff0000,
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(
geometry,
material
);

return mesh;

}

init();

0 Likes
#4

Below is a code in two files which generates only white empty page,
no errors are reported executing code, what is the problem?

index.html file:

<!DOCTYPE html>
<html>
<head>
	<title>Three.js</title>
	<style type = "text/css">
		html, body {margin: 0; padding: 0; overflow: hidden}
	</style>
</head>
<body>
	<div id = "webgl"></div>
	<script src = "/lib/three.js"></script>
	<script src="./main.js"></script>
</html>

main.js file:

function init() {
	var scene = new THREE.Scene();

	var box = getBox(1, 1, 1);
	var plane = getPlane(4);

	box.position.y = box.geometry.parameters.height/2;
	plane.rotation.x = Math.PI/2;

	scene.add(box);
	scene.add(plane);

	var camera = new THREE.PerspectiveCamera(
		45,
		window.innerWidth/window.innerHeight,
		1,
		1000
	);

	camera.position.x = 1;
	camera.position.y = 2;
	camera.position.z = 5;

	camera.lookAt(new THREE.Vector3(0, 0, 0));

	var renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.getElementById('webgl').appendChild(renderer.domElement);
	renderer.render(
		scene,
		camera 
	);
}

function getBox(w, h, d) {
	var geometry = new THREE.BoxGeometry(w, h, d);
	var material = new THREE.MeshBasicMaterial({
		color: 0x00ff00
	});
	var mesh = new THREE.Mesh(
		geometry,
		material 
	);

	return mesh;
}

function getPlane(size) {
	var geometry = new THREE.PlaneGeometry(size, size);
	var material = new THREE.MeshBasicMaterial({
		color: 0xff0000,
		side: THREE.DoubleSide
	});
	var mesh = new THREE.Mesh(
		geometry,
		material 
	);

	return mesh;
}

init();
0 Likes