mrdoob/three.js — Issue #772: zoomming the model works fine in google but doesnot work in firfox?
Author: naoomi
Created: 2011-11-18 06:20:32+00:00
State: open

hello,really thanks for the help before about how to pose and play the model in threeJS.but now i meet a now problem i am trying to zoom the model ,it works fine in google, but i don't know why it doesn't work in firefox? by the way ,when i try to rotate the model,the model is disappeared.
here is the code i tried,thanks a lot.
var loader = new THREE.ColladaLoader();
loader.load('11.DAE', function colladaReady(collada) {
dae = collada.scene;
skin = collada.skins[0];
dae.scale.x = dae.scale.y = dae.scale.z = 0.0052;
dae.rotation.x = -Math.PI / 2;
dae.updateMatrix();
init();
animate();
});

function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(fov, window.innerWidth
/ window.innerHeight, 1, 2000);
camera.position.set(2, 2, 3);
scene = new THREE.Scene();
// Add the COLLADA
scene.add(dae);

// Lights
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mosemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mousewheel', onDocumentMouseWheel, false);

stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
}

function onDocumentMouseDown(event) {

startdraging = true;
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}

function onDocumentMouseMove(event) {
if (startdraging) {
mouseX = event.clientX - windowHalfX;

targetRotation = targetRotationOnMouseDown
+ (mouseX - mouseXOnMouseDown) * 0.02;
}
}
function onDocumentMouseUp(event) {

startdraging = false;
}
function onDocumentMouseWheel(event) {

// WebKit

if (event.wheelDeltaY) {

fov -= event.wheelDeltaY * 0.05;

// Opera / Explorer 9

} else if (event.wheelDelta) {

fov -= event.wheelDelta * 0.05;

// Firefox

} else if (event.detail) {

fov += event.detail * 1.0;
}
camera.projectionMatrix = THREE.Matrix4.makePerspective(fov,
window.innerWidth / window.innerHeight, 1, 1100);
render();
}
var t = 0;
function animate() {
requestAnimationFrame(animate);
if (walking) {
if (t > 30)
t = 0;
if (skin) {
for ( var i = 0; i < skin.morphTargetInfluences.length; i++) {
skin.morphTargetInfluences[i] = 0;
}
skin.morphTargetInfluences[Math.floor(t)] = 1;
t += 0.5;
}
}

render();
stats.update();
}

function render() {
dae.rotation.y += (targetRotation - dae.rotation.y) * 0.05
camera.lookAt(dae.position);
renderer.render(scene, camera);

}