mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 04:56:01 +10:00
alteredq
8ec6317ef8
Work in progress. For the moment works just with CTMLoader. Still not sure where some pieces of code would go. Upsides: - initialization time cut down significantly (1.8 seconds => 0.7 seconds for CTM example) - much smaller GL buffers thanks to fully used indexing (Walt has 6x less vertices) - consequently much smaller memory footprint all around, both for main and GPU memories, which means less swapping and better vertex caching Downsides: - can't have anymore sharp per-face effects like flat shading (at least if mesh is not constructed in a way where each face has own vertices) - can't have multiple materials per mesh - no more easy manipulation of anything (for the moment actually no runtime manipulation at all, typed arrays are just thrown away, dynamic geometries code path not yet implemented)
238 lines
5.9 KiB
HTML
238 lines
5.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - io - CTM loader</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: #000;
|
|
color: #fff;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
#info {
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 10px;
|
|
width: 100%;
|
|
text-align: center;
|
|
z-index: 100;
|
|
display:block;
|
|
}
|
|
#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="info">
|
|
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> -
|
|
<a href="http://openctm.sourceforge.net/" target="_blank">CTM format</a> loader test -
|
|
using <a href="http://code.google.com/p/js-openctm/">js-openctm</a> -
|
|
models from <a href="http://www.sci.utah.edu/~wald/animrep/" target="_blank">The Utah 3D Animation Repository</a>,
|
|
<a href="http://www.ir-ltd.net/infinite-3d-head-scan-released/" target="_blank">Lee Perry-Smith</a>,
|
|
<a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
|
|
</div>
|
|
|
|
<script src="../build/Three.js"></script>
|
|
|
|
<script src="js/ctm/lzma.js"></script>
|
|
<script src="js/ctm/ctm.js"></script>
|
|
<script src="js/ctm/CTMLoader.js"></script>
|
|
|
|
<script src="js/Detector.js"></script>
|
|
<script src="js/Stats.js"></script>
|
|
|
|
<script>
|
|
|
|
var SCREEN_WIDTH = window.innerWidth;
|
|
var SCREEN_HEIGHT = window.innerHeight;
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene, renderer;
|
|
|
|
var mesh, zmesh, geometry;
|
|
|
|
var mouseX = 0, mouseY = 0;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
document.addEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
|
init();
|
|
animate();
|
|
|
|
|
|
function init() {
|
|
|
|
container = document.createElement( 'div' );
|
|
document.body.appendChild( container );
|
|
|
|
camera = new THREE.PerspectiveCamera( 20, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 2000 );
|
|
camera.position.z = 800;
|
|
|
|
scene = new THREE.Scene();
|
|
scene.fog = new THREE.Fog( 0x050505, 800, camera.far );
|
|
|
|
|
|
var path = "textures/cube/SwedishRoyalCastle/";
|
|
var format = '.jpg';
|
|
var urls = [
|
|
path + 'px' + format, path + 'nx' + format,
|
|
path + 'py' + format, path + 'ny' + format,
|
|
path + 'pz' + format, path + 'nz' + format
|
|
];
|
|
|
|
reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
|
|
|
|
// LIGHTS
|
|
|
|
var ambient = new THREE.AmbientLight( 0xaaaaaa );
|
|
scene.add( ambient );
|
|
|
|
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
|
|
directionalLight.position.set( 0, 0, 1 ).normalize();
|
|
scene.add( directionalLight );
|
|
|
|
// RENDERER
|
|
|
|
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
|
|
renderer.setClearColor( scene.fog.color, 1 );
|
|
|
|
renderer.domElement.style.position = "relative";
|
|
container.appendChild( renderer.domElement );
|
|
|
|
//
|
|
|
|
renderer.gammaInput = true;
|
|
renderer.gammaOutput = true;
|
|
|
|
// STATS
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
stats.domElement.style.zIndex = 100;
|
|
container.appendChild( stats.domElement );
|
|
|
|
// EVENTS
|
|
|
|
window.addEventListener( 'resize', onWindowResize, false );
|
|
|
|
// LOADER
|
|
|
|
var c = 0, s = Date.now();
|
|
|
|
function checkTime() {
|
|
|
|
c ++;
|
|
|
|
if ( c === 3 ) {
|
|
|
|
var e = Date.now();
|
|
console.log( "Total parse time: " + (e-s) + " ms" );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var useWorker = true
|
|
useBuffers = true;
|
|
|
|
var loader = new THREE.CTMLoader( renderer.context );
|
|
|
|
loader.load( "ctm/ben.ctm", function( geometry ) {
|
|
|
|
var material = new THREE.MeshLambertMaterial( { color: 0xffaa00, map: THREE.ImageUtils.loadTexture( "textures/ash_uvgrid01.jpg" ), envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.3 } );
|
|
callbackModel( geometry, 450, material, 0, -200, 0, 0, 0 );
|
|
checkTime();
|
|
|
|
}, useWorker, useBuffers );
|
|
|
|
loader.load( "ctm/WaltHead.ctm", function( geometry ) {
|
|
|
|
//geometry.computeVertexNormals();
|
|
|
|
var material = new THREE.MeshLambertMaterial( { color: 0xffffff, envMaps: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.3 } );
|
|
callbackModel( geometry, 5, material, -200, 0, 0, 0, 0 );
|
|
checkTime();
|
|
|
|
}, useWorker, useBuffers );
|
|
|
|
loader.load( "ctm/LeePerry.ctm", function( geometry ) {
|
|
|
|
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x444444, shininess: 30, map: THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" ), envMaps: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.3 } );
|
|
callbackModel( geometry, 1300, material, 200, 50, 0, 0, 0 );
|
|
checkTime();
|
|
|
|
}, useWorker, useBuffers );
|
|
|
|
}
|
|
|
|
function callbackModel( geometry, s, material, x, y, z, rx, ry ) {
|
|
|
|
var mesh = new THREE.Mesh( geometry, material );
|
|
|
|
mesh.position.set( x, y, z );
|
|
mesh.scale.set( s, s, s );
|
|
mesh.rotation.x = rx;
|
|
mesh.rotation.z = ry;
|
|
//mesh.flipSided = true;
|
|
|
|
scene.add( mesh );
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function onWindowResize( event ) {
|
|
|
|
SCREEN_WIDTH = window.innerWidth;
|
|
SCREEN_HEIGHT = window.innerHeight;
|
|
|
|
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
|
|
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
|
|
camera.updateProjectionMatrix();
|
|
|
|
}
|
|
|
|
function onDocumentMouseMove( event ) {
|
|
|
|
mouseX = ( event.clientX - windowHalfX );
|
|
mouseY = ( event.clientY - windowHalfY );
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
stats.update();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
camera.position.x += ( mouseX - camera.position.x ) * .05;
|
|
camera.position.y += ( - mouseY - camera.position.y ) * .05;
|
|
|
|
camera.lookAt( scene.position );
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|