Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
128 lines (112 sloc) 3.56 KB
<html>
<head>
<script src="three.js/build/old_three.js"></script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#container {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
margin: 0px;
padding: 0px;
}
</style>
<script src="raf.js"></script>
</head>
<body>
<script>
// <!--
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(document.body.clientWidth, document.body.clientHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColorHex(0xEEEEEE, 1.0);
renderer.clear();
renderer.shadowCameraFov = 50;
renderer.shadowMapWidth = 1024;;
renderer.shadowMapHeight = 1024;
var fov = 45; // camera field-of-view in degrees
var width = renderer.domElement.width;
var height = renderer.domElement.height;
var aspect = width / height; // view aspect ratio
var near = 1; // near clip plane
var far = 10000; // far clip plane
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.z = -400;
camera.position.x = 200;
camera.position.y = 350;
var scene = new THREE.Scene();
new THREE.ColladaLoader().load('models/monster.dae', function(collada) {
var model = collada.scene;
skin = collada.skins[0];
model.scale.set(0.1, 0.1, 0.1);
model.rotation.x = -Math.PI/2;
model.castShadow = model.receiveShadow = true;
scene.add(model);
});
var plane = new THREE.Mesh(
new THREE.PlaneGeometry(400, 200, 10, 10),
new THREE.MeshLambertMaterial({color: 0xffffff}));
plane.rotation.x = -Math.PI/2;
plane.position.y = -25.1;
plane.receiveShadow = true;
scene.add(plane);
var light = new THREE.SpotLight();
light.castShadow = true;
light.position.set( 170, 330, -160 );
scene.add(light);
renderer.shadowMapEnabled = true;
renderer.render(scene, camera);
var paused = false;
var last = new Date().getTime();
var down = false;
var sx = 0, sy = 0;
window.onmousedown = function (ev){
down = true; sx = ev.clientX; sy = ev.clientY;
};
window.onmouseup = function(){ down = false; };
var rotation = Math.PI/2;
camera.position.x = Math.cos(rotation)*300;
camera.position.z = Math.sin(rotation)*300;
window.onmousemove = function(ev) {
if (down) {
var dx = ev.clientX - sx;
var dy = ev.clientY - sy;
rotation += dx * 0.01;
camera.position.x = Math.cos(rotation)*300;
camera.position.z = Math.sin(rotation)*300;
camera.position.y += dy;
sx += dx;
sy += dy;
}
}
var st = 0;
var skin = null;
function animate(t) {
if (!paused) {
last = t;
if ( st > 30 ) st = 0;
if ( skin ) {
for ( var i = 0; i < skin.morphTargetInfluences.length; i++ ) {
skin.morphTargetInfluences[ i ] = 0;
}
skin.morphTargetInfluences[ Math.floor( st ) ] = 1;
st += 0.5;
}
camera.lookAt( scene.position );
renderer.render(scene, camera);
}
window.requestAnimationFrame(animate, renderer.domElement);
};
animate(new Date().getTime());
onmessage = function(ev) {
paused = (ev.data == 'pause');
};
// -->
</script>
</body>
</html>