Obj-Fila består rett og slett av alle punktene i figuren (v-linjer) og alle flatene, trekanter,(f-linjer) med referanse
til punktindeksen (som begynner på 1).
I tillegg er det en referanse til en materialfil, pipe.mtl, og de materialene som skal brukes i de følgende flatene (usemtl-linjer).
Filene er ganske lange or er lagt som popups.
Den programmerte .obj fila er slik:
Materialbeskrivelsen, .mtl fila, er slik:
Collada modellen som er eksportert fra Blenderer 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/ceks4/test.html
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: #E6C07F;margin: 0px;overflow: hidden;
background-image:url(back.png);
background-repeat:no-repeat;
}
.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 src="../../js/ColladaLoader.js"></script>
<script type="text/javascript" src="../../js/BSDetect.js"> </script>
<script>
var container = document.getElementById("container");
var camera, scene, renderer, objects;
var pointLight;
var dae;
var clock = new THREE.Clock();
// can we do it ?
if(testWebGL("container")){
// load collada model and check for animated children
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( 'pipe.dae',
function ( collada ) {
dae = collada.scene;
dae.scale.x = dae.scale.y = dae.scale.z = 0.7;
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( 12, 12, 13 );
camera.up.set( 0, 1, 0 );
camera.updateProjectionMatrix();
//-------- the floor------
var size = 4;
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xDDDDDD});
var cube = new THREE.Mesh( new THREE.CubeGeometry(size, 0.20, size), cubeMaterial);
cube.position.y=-0.20;
//scene.add(cube);
// ---------- Add the COLLADA model ----------
scene.add( dae );
// ---------- Lights -----------
pointLight = new THREE.PointLight( 0xffffff, 1,0 );
// positioned when rendered
scene.add(pointLight);
// ------- renderer ---
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true });
renderer.setSize( 512, 512 );
// --------- put in place ------
container.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var timer = Date.now() * 0.0005;
camera.position.x = Math.cos( timer ) * 10;
camera.position.y = 15;
camera.position.z = Math.sin( timer ) * 10;
camera.lookAt( new THREE.Vector3(0,2,0) );
// light from camera pos
pointLight.position.x = camera.position.x;
pointLight.position.y = camera.position.y;
pointLight.position.z = camera.position.z;
THREE.AnimationHandler.update( clock.getDelta() );
renderer.render( scene, camera );
}
</script>
</body>
</html>
Merk at teksten her er lagt som bakgrunn på selve websiden.
