Obj-Fila består rett og slett av alle punktene i figuren (v-linjer),
normalene i hvert punkt(vn-linjer) og alle flatene,(f-linjer) med referanse
til punktindeksen (som begynner på 1).
I tillegg er det en referanse til en materialfil, ball.mtl,
med en materialbeskrivelse for alle flatene.
Filene er ganske lange og er lagt ut som popups.
Den programmerte .obj fila er slik:
Materialbeskrivelsen, .mtl fila, er slik:
Collada modellen som er eksportert fra Blender er slik:
Vi legger demoen i en iFrame for å forenkle koden.
Hvis du vil kan du se den i et eget vindu, og inspisere kildekoden:
test
https://borres.hiof.no/wep/webgl/threejs/models/ceks6/test.html
Som du ser er vel ikke materialegenskapene typisk for en brukt fotball.
jeg har ikke gjort noe forsøk på å fylle den med luft, slik at den blir helt rund..
Websiden er i sin helhet slik:
<!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( 'ball.dae',
function ( collada ) {
dae = collada.scene;
dae.scale.x = dae.scale.y = dae.scale.z = 1.5;
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>
