I'm currently working on setting up a simple scene with Three.js to display an imported mesh rotating. I pieced together a couple of examples from the Three.js documentation and ended up with the code below:
var scene, camera, renderer;
var geometry, material, mesh;
init();
animate();
function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
// geometry = new THREE.BoxGeometry(200, 200, 200);
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('handgun.js', object_to_scene(geometry, material));
}
function object_to_scene(geometry, material){
material = new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate(){
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene, camera);
}
In the code snippet above, I had originally used a BoxGeometry to generate a box, which worked perfectly. However, when attempting to import a JSON file of a custom 3D model, I encountered an issue. The console displayed the following error:
TypeError: onLoad is not a function three.js:18294:4
THREE.JSONLoader.prototype.load/<() three.js:18294
THREE.XHRLoader.prototype.load/<() three.js:18010
This seems to be a problem within Three.js itself. I tried looking for solutions on Github, but it seems that the platform is primarily for bug reporting rather than assistance.
Has anyone else faced this particular issue? If so, how did you resolve it?
Thank you!