I've been trying to make use of a JSONLoader from threejs.org, but I'm facing some issues. Three.js seems to be functioning properly because I can easily create a cube. However, when I attempt to load a js file through the JSONLoader, nothing happens.
<html>
<head>
<title>My first Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// instantiate a loader
var loader = new THREE.JSONLoader();
// load a resource
loader.load(
// resource URL
'logo.js',
// Function when resource is loaded
function (geometry, materials) {
var material = new THREE.MultiMaterial(materials);
var object = new THREE.Mesh(geometry, material);
scene.add(object);
}
);
camera.position.z = 5;
var render = function() {
renderer.setClearColor(0x000000, 0);
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
Even though I've copied the code directly from threejs' website, it doesn't seem to be functioning as expected. Can someone assist me in identifying what might be going wrong?
Here is a fiddle with the script of logo.js https://jsfiddle.net/380z6096/
The object has been exported from 3ds max using the 3ds Max JSExporter.
I am running this on xampp and Chrome.