mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 13:06:01 +10:00
alteredq
cff95a119c
That was much tougher than expected. No wonder other WebGL video demos around the web are broken. Firefox OpenGL / ANGLE and Chrome OpenGL were ok, getting it to work in Chrome ANGLE was rather tricky. Please report if something got broken. I tried to go through all textured examples but I may have missed something. If you want to refresh texture on WebGL side, you just set "texture.needsUpdate" flag (if you use Loader or ImageUtils.loadTexture / loadTextureCube everything is taken care of). Flag has to be set also for canvas-based textures, sorry no escaping this :(. I tried and it lead to ugly problems (e.g. AO minecraft demo mixes several asynchronously loaded and generated images into one texture, with autodetect always something was broken). "needsUpdate" should work also on cube textures, though it's not tested yet (also there I didn't put hack for Chrome ANGLE).
209 lines
4.7 KiB
HTML
209 lines
4.7 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js canvas - geometry - terrain</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
color: #71544e;
|
|
font-family:Monospace;
|
|
font-size:13px;
|
|
text-align:center;
|
|
|
|
background-color: #bfd1e5;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#info {
|
|
position: absolute;
|
|
top: 0px; width: 100%;
|
|
padding: 5px;
|
|
}
|
|
|
|
a {
|
|
|
|
color: #b07861;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="container"><br /><br /><br /><br /><br />Generating...</div>
|
|
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - terrain demo. <a href="geometry_terrain.html">generate another</a></div>
|
|
|
|
<script type="text/javascript" src="../build/Three.js"></script>
|
|
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
|
|
|
|
<script type="text/javascript" src="js/ImprovedNoise.js"></script>
|
|
|
|
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
|
|
<script type="text/javascript" src="js/Stats.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene, renderer;
|
|
|
|
var mesh;
|
|
|
|
var mouseX = 0;
|
|
var mouseY = 0;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
|
|
container = document.getElementById( 'container' );
|
|
|
|
camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
camera.position.z = 500;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
var data = generateHeight( 1024, 1024 );
|
|
var material = new THREE.MeshBasicMaterial( { map: new THREE.Texture( generateTexture( data, 1024, 1024 ) ) } );
|
|
|
|
var quality = 16, step = 1024 / quality;
|
|
var plane = new Plane( 2000, 2000, quality - 1, quality - 1 );
|
|
|
|
for ( var i = 0, l = plane.vertices.length; i < l; i ++ ) {
|
|
|
|
var x = i % quality, y = ~~ ( i / quality );
|
|
plane.vertices[ i ].position.z = data[ ( x * step ) + ( y * step ) * 1024 ] * 2 - 128;
|
|
|
|
}
|
|
|
|
plane.computeCentroids();
|
|
|
|
mesh = new THREE.Mesh( plane, material );
|
|
mesh.rotation.x = -90 * Math.PI / 180;
|
|
mesh.overdraw = true;
|
|
scene.addObject( mesh );
|
|
|
|
renderer = new THREE.CanvasRenderer();
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
container.innerHTML = "";
|
|
|
|
container.appendChild( renderer.domElement );
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
container.appendChild( stats.domElement );
|
|
|
|
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
|
}
|
|
|
|
function generateHeight( width, height ) {
|
|
|
|
var data = Float32Array ? new Float32Array() : [], perlin = new ImprovedNoise(),
|
|
size = width * height, quality = 2, z = Math.random() * 100;
|
|
|
|
for ( var i = 0; i < size; i ++ ) {
|
|
|
|
data[ i ] = 0
|
|
|
|
}
|
|
|
|
for ( var j = 0; j < 4; j ++ ) {
|
|
|
|
quality *= 4;
|
|
|
|
for ( var i = 0; i < size; i ++ ) {
|
|
|
|
var x = i % width, y = ~~ ( i / width );
|
|
data[ i ] += Math.abs( perlin.noise( x / quality, y / quality, z ) * 0.5 * quality + 10 );
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return data;
|
|
|
|
}
|
|
|
|
function generateTexture( data, width, height ) {
|
|
|
|
var canvas, context, image, imageData,
|
|
level, diff, vector3, sun, shade;
|
|
|
|
vector3 = new THREE.Vector3( 0, 0, 0 );
|
|
|
|
sun = new THREE.Vector3( 1, 1, 1 );
|
|
sun.normalize();
|
|
|
|
canvas = document.createElement( 'canvas' );
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
|
|
context = canvas.getContext( '2d' );
|
|
context.fillStyle = '#000';
|
|
context.fillRect( 0, 0, width, height );
|
|
|
|
image = context.getImageData( 0, 0, width, height );
|
|
imageData = image.data;
|
|
|
|
for ( var i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++ ) {
|
|
|
|
vector3.x = data[ j - 1 ] - data[ j + 1 ];
|
|
vector3.y = 2;
|
|
vector3.z = data[ j - width ] - data[ j + width ];
|
|
vector3.normalize();
|
|
|
|
shade = vector3.dot( sun );
|
|
|
|
imageData[ i ] = ( 96 + shade * 128 ) * ( data[ j ] * 0.007 );
|
|
imageData[ i + 1 ] = ( 32 + shade * 96 ) * ( data[ j ] * 0.007 );
|
|
imageData[ i + 2 ] = ( shade * 96 ) * ( data[ j ] * 0.007 );
|
|
|
|
}
|
|
|
|
context.putImageData( image, 0, 0 );
|
|
|
|
return canvas;
|
|
|
|
}
|
|
|
|
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 ) * 0.05;
|
|
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|