home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-09 13:06:01 +10:00
Code Issues Packages Projects Releases Wiki Activity

Yet another geometry optimisation to the minecraft demo.

Browse Source 
Added `lights_pointlight_smooth` example. To be used for tracking browser improvements affecting that technique.
This commit is contained in:
Mr.doob
2010-12-12 09:35:00 +00:00
parent 9e5017a2ed
commit bf495aa486
3 changed files with 182 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/geometry_minecraft.html
+32 -26
View File
@@ -30,8 +30,8 @@
</head>
<body>
<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - <a href="http://www.minecraft.net/" target="_blank">minecraft</a> demo. featuring <a href="http://painterlypack.net/" target="_blank">painterly pack</a><br />(left click: forward, right click: backward)</div>
<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - <a href="http://www.minecraft.net/" target="_blank">minecraft</a> demo. featuring <a href="http://painterlypack.net/" target="_blank">painterly pack</a><br />(left click: forward, right click: backward)</div>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="js/ImprovedNoise.js"></script>
@@ -78,7 +78,7 @@
var grass_dirt = loadTexture( 'textures/minecraft/grass_dirt.png' ),
grass = loadTexture( 'textures/minecraft/grass.png' ),
dirt = loadTexture( 'textures/minecraft/dirt.png' );
var materials = [
grass_dirt, // right
@@ -90,45 +90,51 @@
];
var h, px, nx, pz, nz, cubes = [];
var h, h2, px, nx, pz, nz, cubes = [];
for ( var i = 0; i < 16; i++ ) {
px = (i & 8) == 8;
nx = (i & 4) == 4;
pz = (i & 2) == 2;
nz = (i & 1) == 1;
cubes[ i ] = new Cube( 100, 100, 100, 1, 1, materials, false, { px: px, nx: nx, py: true, ny: false, pz: pz, nz: nz } );
}
var geometry = new THREE.Geometry();
camera.position.y = getY( worldHalfWidth, worldHalfDepth ) + 100;
camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
camera.target.position.y = camera.position.y;
for ( var z = 0; z < worldDepth; z ++ ) {
for ( var x = 0; x < worldWidth; x ++ ) {
px = nx = pz = nz = 0;
h = getY( x, z );
px = (getY( x - 1, z ) != h) || x == 0 ? 1 : 0;
nx = (getY( x + 1, z ) != h) || x == worldWidth - 1 ? 1 : 0;
pz = (getY( x, z + 1 ) != h) || z == worldDepth - 1 ? 1 : 0;
nz = (getY( x, z - 1 ) != h) || z == 0 ? 1 : 0;
h2 = getY( x - 1, z );
px = ( h2 != h && h2 != h + 1 ) || x == 0 ? 1 : 0;
h2 = getY( x + 1, z );
nx = ( h2 != h && h2 != h + 1 ) || x == worldWidth - 1 ? 1 : 0;
h2 = getY( x, z + 1 );
pz = ( h2 != h && h2 != h + 1 ) || z == worldDepth - 1 ? 1 : 0;
h2 = getY( x, z - 1 );
nz = ( h2 != h && h2 != h + 1 ) || z == 0 ? 1 : 0;
mesh = new THREE.Mesh( cubes[ px * 8 + nx * 4 + pz * 2 + nz ] );
mesh.position.x = x * 100 - worldHalfWidth * 100;
mesh.position.y = h;
mesh.position.y = h * 100;
mesh.position.z = z * 100 - worldHalfDepth * 100;
GeometryUtils.merge( geometry, mesh );
}
}
@@ -171,16 +177,16 @@
}
function generateAO( image, sides ) {
var c = document.createElement('canvas');
c.width = image.width;
c.height = image.height;
c.getContext( "2d" ).drawImage( image, 0, 0 );
return c;
}
function loadTexture( path ) {
var image = new Image();
@@ -218,7 +224,7 @@
function getY( x, z ) {
return ~~( data[ x + z * worldWidth ] * 0.2 ) * 100;
return ~~( data[ x + z * worldWidth ] * 0.2 );
}
examples/lights_pointlights.html
+15 -15
View File
@@ -46,7 +46,7 @@
var camera, scene, renderer,
particle1, particle2, particle2,
light1, light2, light3,
object;
mesh;
init();
setInterval( loop, 1000 / 60 );
@@ -60,9 +60,16 @@
scene = new THREE.Scene();
object = new THREE.Mesh( new WaltHead(), new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } ) );
object.overdraw = true;
scene.addObject( object );
scene.addLight( new THREE.AmbientLight( 0x00020 ) );
light1 = new THREE.PointLight( 0xff0040 );
scene.addLight( light1 );
light2 = new THREE.PointLight( 0x0040ff );
scene.addLight( light2 );
light3 = new THREE.PointLight( 0x80ff80 );
scene.addLight( light3 );
particle1 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0xff0040 } ) );
particle1.scale.x = particle1.scale.y = particle1.scale.z = 0.5;
@@ -76,16 +83,9 @@
particle3.scale.x = particle3.scale.y = particle3.scale.z = 0.5;
scene.addObject( particle3 );
scene.addLight( new THREE.AmbientLight( 0x00020 ) );
light1 = new THREE.PointLight( 0xff0040 );
scene.addLight( light1 );
light2 = new THREE.PointLight( 0x0040ff );
scene.addLight( light2 );
light3 = new THREE.PointLight( 0x80ff80 );
scene.addLight( light3 );
mesh = new THREE.Mesh( new WaltHead(), new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } ) );
mesh.overdraw = true;
scene.addObject( mesh );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
@@ -97,7 +97,7 @@
var time = new Date().getTime() * 0.0005;
object.rotation.y -= 0.01;
mesh.rotation.y -= 0.01;
particle1.position.x = Math.sin( time * 0.7 ) * 30;
particle1.position.y = Math.cos( time * 0.5 ) * 40;
examples/lights_pointlights_smooth.html
+135
View File
@@ -0,0 +1,135 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - point light</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
}
a {
color: #ff0080;
text-decoration: none;
}
a:hover {
color: #0080ff;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - point lights demo.<br />
Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
</div>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="obj/WaltHead.js"></script>
<script type="text/javascript">
var camera, scene, renderer,
particle1, particle2, particle2,
light1, light2, light3,
geometry, mesh;
init();
setInterval( loop, 1000 / 60 );
function init() {
var container = document.getElementById( 'container' );
camera = new THREE.Camera( 65, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 100;
scene = new THREE.Scene();
scene.addLight( new THREE.AmbientLight( 0x00020 ) );
light1 = new THREE.PointLight( 0xff0040 );
scene.addLight( light1 );
light2 = new THREE.PointLight( 0x0040ff );
scene.addLight( light2 );
light3 = new THREE.PointLight( 0x80ff80 );
scene.addLight( light3 );
particle1 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0xff0040 } ) );
particle1.scale.x = particle1.scale.y = particle1.scale.z = 0.5;
scene.addObject( particle1 );
particle2 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0x0040ff } ) );
particle2.scale.x = particle2.scale.y = particle2.scale.z = 0.5;
scene.addObject( particle2 );
particle3 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0x80ff80 } ) );
particle3.scale.x = particle3.scale.y = particle3.scale.z = 0.5;
scene.addObject( particle3 );
geometry = new WaltHead();
geometry.computeVertexNormals();
mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ) );
mesh.overdraw = true;
scene.addObject( mesh );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
function loop() {
var time = new Date().getTime() * 0.0005;
mesh.rotation.y -= 0.01;
particle1.position.x = Math.sin( time * 0.7 ) * 30;
particle1.position.y = Math.cos( time * 0.5 ) * 40;
particle1.position.z = Math.cos( time * 0.3 ) * 30;
light1.position.x = particle1.position.x;
light1.position.y = particle1.position.y;
light1.position.z = particle1.position.z;
particle2.position.x = Math.cos( time * 0.3 ) * 30;
particle2.position.y = Math.sin( time * 0.5 ) * 40;
particle2.position.z = Math.sin( time * 0.7 ) * 30;
light2.position.x = particle2.position.x;
light2.position.y = particle2.position.y;
light2.position.z = particle2.position.z;
particle3.position.x = Math.sin( time * 0.7 ) * 30;
particle3.position.y = Math.cos( time * 0.3 ) * 40;
particle3.position.z = Math.sin( time * 0.5 ) * 30;
light3.position.x = particle3.position.x;
light3.position.y = particle3.position.y;
light3.position.z = particle3.position.z;
renderer.render(scene, camera);
}
</script>
</body>
</html>