I could really use some assistance. I'm currently working on a WebGL project using Three.js for my school assignment, but I've hit a roadblock.
My goal is to display an object from Blender at the center (0,0,0) of the scene and then rotate it using keyboard arrows.
Below is my init() function:
var scene, camera, renderer;
init();
function init() {
scene = new THREE.Scene();
var WIDTH = 880,
HEIGHT = 550;
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.getElementsByClassName("pw")[0].appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(90, WIDTH / HEIGHT, 0.1, 1000000);
camera.position.set(5,15,10);
scene.add(camera);
window.addEventListener('resize', function() {
var WIDTH = 880,
HEIGHT = 550;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
// More code for sky dome and lights...
var loader = new THREE.ColladaLoader();
var dae
loader.options.convertUpAxis = true;
loader.load( 'models/ring.dae', function ( collada ) {
dae = collada.scene;
var skin = collada.skins[0];
dae.position.set(0,0,0);
dae.scale.set(7,7,7);
scene.add(dae);
});
// Uncommenting these controls make the object ring.dae disappear... any thoughts on why?</p>
}
Any insights on why the object disappears when attempting to implement controls would be greatly appreciated! Thank you.