<!DOCTYPE html>
<html lang="no">
<head>
<title>three.js webgl - collada</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;background-color: #000000;margin: 0px;overflow: hidden;
}
.hilitewglmsg{
width:300px;border-style:solid;border-width:thin;background-color:#FEF5CA;padding:5px
}
</style>
</head>
<body>
<div id="container"> </div>
<script type="text/javascript" src="../../js/three.min.js"> </script>
<script type="text/javascript" src="../../js/Detector.js"> </script>
<script type="text/javascript" src="../../js/ColladaLoader.js"></script>
<script type="text/javascript" src="../../js/BSDetect.js"> </script>
<script>
var container = document.getElementById("container");
var camera, scene, renderer;
var spotLight;
var dae; // collade modell
if(testWebGL("container")){
// load collada model and set shadowprops on children
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( 'logo.dae',
function ( collada ) {
dae = collada.scene;
dae.scale.x = dae.scale.y = dae.scale.z = 0.3;
dae.updateMatrix();
init();
animate();
}
);
}
function init() {
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 45,
window.innerWidth / window.innerHeight,1, 2000 );
camera.position.set( 2, 2, 3 );
camera.up.set( 0, 1, 0 );
camera.updateProjectionMatrix();
// ---------- Add the COLLADA model ----------
scene.add( dae );
// ---------- Light -----------
spotLight = new THREE.SpotLight( 0xffffff, 1,0,Math.PI/2 );
spotLight.position.x = 100;
spotLight.position.y = 100;
spotLight.position.z = 100;
scene.add( spotLight );
// ------- renderer ---
renderer = new THREE.WebGLRenderer( { antialias: true });
// background
renderer.setClearColor( 0xfff4e5 );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMapEnabled = false;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
// --------- put in place ------
container.appendChild( renderer.domElement );
// pick up resize events
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
var clock = new THREE.Clock();
function render() {
var timer = Date.now() * 0.0005;
// camera rotates around the scene
camera.position.x = Math.cos( timer ) * 10;
camera.position.y = 10;//Math.cos( timer ) * 10;
camera.position.z = Math.sin( timer ) * 10;
camera.lookAt( new THREE.Vector3(0,-1,0) );
// light may be fixed, or you can move it near the camera:
spotLight.position.x = camera.position.x;
spotLight.position.y = camera.position.y;
spotLight.position.z = camera.position.z;
THREE.AnimationHandler.update( clock.getDelta() );
renderer.render( scene, camera );
}
</script>
</body>
</html>
