flash@isobar: Getting started with Three.js : Part3

Three.js(r55) loading 3d model tutorial 教學

loading OBJ files:

OBJ - texture
var texture = new THREE.Texture();
var loader = new THREE.ImageLoader();
loader.addEventListener( 'load', function ( event ) {
texture.image = event.content;
texture.needsUpdate = true;
} );
loader.load( 'obj/ship_texture.jpg' );

OBJ - model
var loader = new THREE.OBJMTLLoader();
loader.addEventListener( 'load', function ( event ) {
var object = event.content;
object.scale.x = object.scale.y = object.scale.z = 2;
object.position.y = 300;
scene.add( object );
});
loader.load( 'obj/myModel.obj', 'obj/myModel.mtl' );

if you have to use a large OBJ file, you can convert it to binary file.
ie:
python convert_obj_three.py -i myModel.obj -o myModel-bin.js -t binary
reduce file size: 2.27MB -> 0.5MB

loading binary files:

var loader = new THREE.BinaryLoader();
var callback = function( geometry,materials ) {
ship = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(materials));
ship.scale.x = ship.scale.y = ship.scale.z = 1.5;
ship.position.x = -50;
ship.position.y = 10;
scene.add( ship );
};
loader.load( "obj/myModel-bin.js", callback );

source code:

	<!DOCTYPE html>
	<html>
	<head>
	<title>Getting started with Three.js : Part3</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script src="libs/three.min.js"></script>
	<script src="libs/stats.min.js"></script>
	<script src="libs/Detector.js"></script>
	<script src="libs/loaders/BinaryLoader.js"></script>
	<script src="js/loader_bin.js"></script>
	</head>
	<body>
	<div id="info">Getting started with Three.js - loading 3d model tutorial</div>
	</body>
	</html>

view raw loader_bin.html hosted with ❤ by GitHub

	window.onload = function() {
	// detector
	if (!Detector.webgl) Detector.addGetWebGLMessage();

	// main
	var container;
	var stats;
	var mouseX, mouseY;
	var camera, scene, renderer, light, sunLight;
	var cube, ball, ship;

	var mouseX = 0;
	var mouseY = 0;

	var windowHalfX = window.innerWidth * 0.5;
	var windowHalfY = window.innerHeight * 0.5;

	init();
	render();

	function init() {

	// create a div element to contain the render
	container = document.createElement('div');
	document.body.appendChild(container);

	// scene
	scene = new THREE.Scene();

	// camera
	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100000);
	camera.position.set(0, 70, 700);
	camera.lookAt(scene.position);
	//scene.add(camera);

	// This light's color gets applied to all the objects in the scene globally.
	scene.add(new THREE.AmbientLight(0x404040));
	// directional light - dir(.3, -1, -1)
	sunLight = new THREE.DirectionalLight(0xffeedd);
	sunLight.position.set(0.3, - 1, - 1).normalize();
	scene.add(sunLight);
	// point light
	light = new THREE.PointLight(0xffeedd, 1.5);
	light.position.set(-500, 1000, 1000);
	scene.add(light);

	// geometry + material
	// cube
	cube = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100), new THREE.MeshLambertMaterial({
	color: 0x660000
	}));
	cube.position.set(-300, 0, 0);
	scene.add(cube);

	// binary obj - model
	var loader = new THREE.BinaryLoader(true);
	document.body.appendChild(loader.statusDomElement);
	var callback = function(geometry, materials) {
	ship = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
	ship.scale.x = ship.scale.y = ship.scale.z = 1.5;
	ship.position.x = -50;
	ship.position.y = 10;
	scene.add(ship);
	loader.statusDomElement.style.display = "none";
	};

	loader.load("obj/myModel-bin.js", callback);

	// floor
	var floor = new THREE.Mesh(new THREE.PlaneGeometry(2000, 2000, 20, 20), new THREE.MeshBasicMaterial({
	color: 0x555555,
	wireframe: true
	}));
	floor.position.y = -150;
	floor.rotation.x = -Math.PI * 0.5;
	scene.add(floor);

	// loading cube material
	var path = "images/";
	var format = '.jpg';
	var urls = [
	path + 'snow_positive_x' + format, path + 'snow_negative_x' + format,
	path + 'snow_positive_y' + format, path + 'snow_negative_y' + format,
	path + 'snow_positive_z' + format, path + 'snow_negative_z' + format];
	var textureCube = THREE.ImageUtils.loadTextureCube(urls);

	// ball - cube reflection material
	ball = new THREE.Mesh(new THREE.SphereGeometry(64, 32, 16), new THREE.MeshBasicMaterial({
	color: 0xffffff,
	envMap: textureCube
	}));
	//ball.scale.x = ball.scale.y = ball.scale.z = Math.random() * 3 + 1;
	ball.position.set(200, 0, 0);
	scene.add(ball);

	// skybox
	var shader = THREE.ShaderLib["cube"];
	shader.uniforms["tCube"].value = textureCube;
	var material = new THREE.ShaderMaterial({
	fragmentShader: shader.fragmentShader,
	vertexShader: shader.vertexShader,
	uniforms: shader.uniforms,
	depthWrite: false,
	side: THREE.BackSide
	});

	var skybox = new THREE.Mesh(new THREE.CubeGeometry(100000, 100000, 100000), material);
	scene.add(skybox);

	//renderer = new THREE.CanvasRenderer();
	renderer = new THREE.WebGLRenderer({
	antialias: true
	});
	renderer.setSize(window.innerWidth, window.innerHeight);
	//renderer.autoClear = false;

	// add renderer
	container.appendChild(renderer.domElement);

	// stats
	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.left = '0px';
	stats.domElement.style.top = '0px';
	container.appendChild(stats.domElement);

	// addEventListener
	document.addEventListener('mousemove', onMouseMove, false);
	// stage resize
	window.addEventListener('resize', onWindowResize, false);
	}

	function onWindowResize(e) {
	windowHalfX = window.innerWidth * 0.5,
	windowHalfY = window.innerHeight * 0.5,

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize(window.innerWidth, window.innerHeight);
	}

	function onMouseMove(e) {
	mouseX = (e.clientX - windowHalfX) * 10;
	mouseY = (e.clientY - windowHalfY) * 10;
	}

	function render() {
	requestAnimationFrame(render);

	var time = Date.now();
	var rot = time / 10;
	var distance = (time * 0.25) % 2000 - 1000;

	// run circle
	ball.position.z = 300 * Math.cos(-rot * Math.PI / 180);
	ball.position.y = 300 * Math.sin(-rot * Math.PI / 180);
	ball.position.x = distance;

	//cube.rotation.x += 0.01;
	//cube.rotation.y += 0.02;
	//cube.rotation.x = mouseY * 0.005;
	//cube.rotation.y = mouseX * 0.005;

	cube.position.x = Math.sin(time * 0.001 + 2) * 300;
	cube.position.y = Math.sin(time * 0.0011 + 2) * 300;
	cube.position.z = Math.sin(time * 0.0012 + 2) * 300;

	ship.position.x = Math.sin(time * 0.001 + 4) * 300;
	ship.position.y = Math.sin(time * 0.0011 + 4) * 300;
	ship.position.z = Math.sin(time * 0.0012 + 4) * 300;

	camera.position.x += (mouseX - camera.position.x) * .01;
	camera.position.y += (-mouseY - camera.position.y) * .01;
	camera.lookAt(scene.position);
	renderer.render(scene, camera);
	stats.update();
	}
	}

view raw loader_bin.js hosted with ❤ by GitHub

flash@isobar

2013年2月6日星期三

Getting started with Three.js : Part3

loading OBJ files:

loading binary files:

沒有留言:

張貼留言

2013年2月6日 星期三

Getting started with Three.js : Part3

loading OBJ files:

loading binary files:

沒有留言:

張貼留言

2013年2月6日星期三