mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-11 14:06:02 +10:00
alteredq
22bd108ab1
Changed normal map shader to multiply specular component with diffuse weighting as specular highlights were appearing in the dark parts. Changed camera look speed in minecraft and terrain demos, they were too fast - I guess as everything got faster with antialiasing off. Reenabled antialiasing in few demos where it was too ugly without (basically anything with lines and without postprocessing). Fixed again spurious invisible characters in empaempa's code (which are breaking everything and are hard to hunt as they look like spaces).
231 lines
5.3 KiB
HTML
231 lines
5.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - geometry - terrain</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
color: #61443e;
|
|
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: #a06851;
|
|
}
|
|
|
|
</style>
|
|
</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> - webgl terrain demo<br />(left click: forward, right click: backward)</div>
|
|
|
|
<script type="text/javascript" src="../build/Three.js"></script>
|
|
|
|
<script type="text/javascript" src="js/ImprovedNoise.js"></script>
|
|
|
|
<script type="text/javascript" src="js/Detector.js"></script>
|
|
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
|
|
<script type="text/javascript" src="js/Stats.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
if ( ! Detector.webgl ) {
|
|
|
|
Detector.addGetWebGLMessage();
|
|
document.getElementById( 'container' ).innerHTML = "";
|
|
|
|
}
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene, renderer;
|
|
|
|
var mesh, texture;
|
|
|
|
var worldWidth = 256, worldDepth = 256,
|
|
worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
|
|
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
|
|
container = document.getElementById( 'container' );
|
|
|
|
camera = new THREE.QuakeCamera( {
|
|
|
|
fov: 60, aspect: window.innerWidth / window.innerHeight, near: 1, far: 20000,
|
|
movementSpeed: 15, lookSpeed: 0.001, noFly: false, lookVertical: true
|
|
|
|
} );
|
|
|
|
camera.target.position.z = - 100;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
data = generateHeight( worldWidth, worldDepth );
|
|
|
|
camera.position.y = data[ worldHalfWidth + worldHalfDepth * worldWidth ] + 500;
|
|
camera.target.position.y = camera.position.y;
|
|
|
|
var geometry = new THREE.Plane( 7500, 7500, worldWidth - 1, worldDepth - 1 );
|
|
|
|
for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
|
|
|
|
geometry.vertices[ i ].position.z = data[ i ] * 10;
|
|
|
|
}
|
|
|
|
texture = new THREE.Texture( generateTexture( data, worldWidth, worldDepth ), new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping );
|
|
texture.needsUpdate = true;
|
|
|
|
mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
|
|
mesh.rotation.x = - 90 * Math.PI / 180;
|
|
scene.addObject( mesh );
|
|
|
|
renderer = new THREE.WebGLRenderer();
|
|
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 );
|
|
|
|
}
|
|
|
|
function generateHeight( width, height ) {
|
|
|
|
var size = width * height, data = new Float32Array( size ),
|
|
perlin = new ImprovedNoise(), quality = 1, z = Math.random() * 100;
|
|
|
|
for ( var i = 0; i < size; i ++ ) {
|
|
|
|
data[ i ] = 0
|
|
|
|
}
|
|
|
|
for ( var j = 0; j < 4; j ++ ) {
|
|
|
|
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 ) * quality * 1.75 );
|
|
|
|
|
|
}
|
|
|
|
quality *= 5;
|
|
|
|
}
|
|
|
|
return data;
|
|
|
|
}
|
|
|
|
function generateTexture( data, width, height ) {
|
|
|
|
var canvas, canvasScaled, 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, canvas.width, canvas.height );
|
|
imageData = image.data;
|
|
|
|
for ( var i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++ ) {
|
|
|
|
vector3.x = data[ j - 2 ] - data[ j + 2 ];
|
|
vector3.y = 2;
|
|
vector3.z = data[ j - width * 2 ] - data[ j + width * 2 ];
|
|
vector3.normalize();
|
|
|
|
shade = vector3.dot( sun );
|
|
|
|
imageData[ i ] = ( 96 + shade * 128 ) * ( 0.5 + data[ j ] * 0.007 );
|
|
imageData[ i + 1 ] = ( 32 + shade * 96 ) * ( 0.5 + data[ j ] * 0.007 );
|
|
imageData[ i + 2 ] = ( shade * 96 ) * ( 0.5 + data[ j ] * 0.007 );
|
|
}
|
|
|
|
context.putImageData( image, 0, 0 );
|
|
|
|
// Scaled 4x
|
|
|
|
canvasScaled = document.createElement( 'canvas' );
|
|
canvasScaled.width = width * 4;
|
|
canvasScaled.height = height * 4;
|
|
|
|
context = canvasScaled.getContext( '2d' );
|
|
context.scale( 4, 4 );
|
|
context.drawImage( canvas, 0, 0 );
|
|
|
|
image = context.getImageData( 0, 0, canvasScaled.width, canvasScaled.height );
|
|
imageData = image.data;
|
|
|
|
for ( var i = 0, l = imageData.length; i < l; i += 4 ) {
|
|
|
|
var v = ~~ ( Math.random() * 5 );
|
|
|
|
imageData[ i ] += v;
|
|
imageData[ i + 1 ] += v;
|
|
imageData[ i + 2 ] += v;
|
|
|
|
}
|
|
|
|
context.putImageData( image, 0, 0 );
|
|
|
|
return canvasScaled;
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
stats.update();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|