Overcome your weaknesses through the HTML5 Coding Assessment Test! Surpass your rivals starting next school term!

or

SPEC 審査結果発表!

three.js. terrain demo

Follow

2010-06-21 00:50:13

License: MIT License

Fork: 1

Fav: 5

View: 1495

Play
Stop
Reload

Smart Phone

Readme
JavaScript 261 lines
HTML 3 lines
CSS 21 lines

three.js. terrain demo
stats.js (lib)
three.js (lib)

var Perlin = function () {
  
  // http://mrl.nyu.edu/~perlin/noise/
  
  var p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
           23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
           174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
           133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
           89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
           202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
           248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
           178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
           14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
           93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
  
  for (var i=0; i < 256 ; i++) {
    
    p[256+i] = p[i];
    
  }
  
  function fade(t) {
    
    return t * t * t * (t * (t * 6 - 15) + 10);
    
  }
  
  function lerp(t, a, b) {
    
    return a + t * (b - a);
    
  }
  
  function grad(hash, x, y, z) {
    
    var h = hash & 15;
    var u = h < 8 ? x : y, v = h < 4 ? y : h == 12 || h == 14 ? x : z;
    return ((h&1) === 0 ? u : -u) + ((h&2) === 0 ? v : -v);
    
  }
  
  return {
    
    noise: function (x, y, z) {
      
      var floorX = Math.floor(x), floorY = Math.floor(y), floorZ = Math.floor(z);
      
      var X = floorX & 255, Y = floorY & 255, Z = floorZ & 255;
      
      x -= floorX;
      y -= floorY;
      z -= floorZ;
      
      var xMinus1 = x -1, yMinus1 = y - 1, zMinus1 = z - 1;
      
      var u = fade(x), v = fade(y), w = fade(z);
      
      var A = p[X]+Y, AA = p[A]+Z, AB = p[A+1]+Z, B = p[X+1]+Y, BA = p[B]+Z, BB = p[B+1]+Z;
      
      return lerp(w, lerp(v, lerp(u, grad(p[AA], x, y, z), 
                                  grad(p[BA], xMinus1, y, z)),
                          lerp(u, grad(p[AB], x, yMinus1, z),
                               grad(p[BB], xMinus1, yMinus1, z))),
                  lerp(v, lerp(u, grad(p[AA+1], x, y, zMinus1),
                               grad(p[BA+1], xMinus1, y, z-1)),
                       lerp(u, grad(p[AB+1], x, yMinus1, zMinus1),
                            grad(p[BB+1], xMinus1, yMinus1, zMinus1))));
      
    }
    
  };
  
};
  
  //
  
var SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight,
    
    container, stats,
    
    camera, scene, renderer,
    
    mesh,
    
    mouseX = 0,
    mouseY = 0,
    
    windowHalfX = window.innerWidth >> 1,
    windowHalfY = window.innerHeight >> 1;
  
  
  init();
  setInterval( loop, 1000 / 60 );
  
  
  function init() {
    
    container = document.getElementById( 'container' );
    
    camera = new THREE.Camera(0, 0, 1000);
    camera.focus = 300;
    
    scene = new THREE.Scene();
    
    var heightMap = height( 1024, 1024 );
    var textureMap = shadow( heightMap );
    var material = new THREE.BitmapUVMappingMaterial( textureMap );
    
    var quality = 20;
    var quality1 = quality + 1;
    
    var plane = new Plane( 2000, 2000, quality, quality );
    
    var data = heightMap.getContext( '2d' ).getImageData( 0, 0, heightMap.width, heightMap.height ).data;
    var pixelsPerTriangle = Math.floor(heightMap.width / quality);
    
    for ( var y = 0; y < quality1; y++ ) {
      
      for (var x = 0; x < quality1; x++ ) {
        
        plane.vertices[x + y * quality1].position.z = data[((x * pixelsPerTriangle) + (y * pixelsPerTriangle) * heightMap.width) * 4] * 2 - 128;
        
      }
      
    }
    
    mesh = new THREE.Mesh( plane, material );
    mesh.rotation.x = -90 * Math.PI / 180;
    scene.add(mesh);
    
    renderer = new THREE.CanvasRenderer();
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    
    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 onDocumentMouseMove(event) {
    
    mouseX = (event.clientX - windowHalfX) * 4;
    mouseY = (event.clientY - windowHalfY) * 4;
    
  }
  
  function loop() {
    
    camera.position.x += (mouseX - camera.position.x) * 0.05;
    camera.position.y += (-mouseY + 500 - camera.position.y) * 0.05;
    
    renderer.render(scene, camera);
    stats.update();
    
  }
  
  function height(width, height) {
    
    var canvas, context, image, data;
    
    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 );
    data = image.data;
    
    var perlin = new Perlin();
    
    var size = width * height;
    var quality = 2;
    var zz = Math.random() * 100;
    
    for ( var j = 0; j < 4; j ++ ) {
      
      var x = 0, y = 0, yy = 0;
      
      quality *= 4;
      
      for ( var i = 0; i < size; i ++ ) {
        
        data[ i * 4 ] += Math.floor( Math.abs( perlin.noise( x / quality, yy, zz ) * 0.5 ) * quality + 10 );
        
        x++;
        
        if (x == width)
        {
          x = 0;
          y ++;
          yy = y / quality;
        }
        
      }
    }
    
    context.putImageData( image, 0, 0 );
    
    return canvas;
    
  }
  
  function shadow( texture ) {
    
    var canvas, context, image, data, src_data,
        index, level, diff, width = texture.width, height = texture.height,
        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 );
    data = image.data;
    
    src_data = texture.getContext( '2d' ).getImageData( 0, 0, width, height ).data;
    
    for ( var y = 0; y < height; y++ ) {
      
      for ( var x = 0; x < width; x++ ) {
        
        index = ( x + y * width ) * 4;
        
        vector3.x = src_data[ index - 4 ] - src_data[ index + 4 ];
        vector3.y = 2;
        vector3.z = src_data[ index - ( width * 4 ) ] - src_data[ index + ( width * 4 ) ];
        vector3.normalize();
        
        shade = vector3.dot(sun);
        
        data[ index ] = ( 96 + shade * 128 ) * ( src_data[ index ] * 0.007 );
        data[ index + 1 ] = ( 32 + shade * 96 ) * ( src_data[ index ] * 0.007 );
        data[ index + 2 ] = ( shade * 96 ) * ( src_data[ index ] * 0.007 );
        
      }
    }
    
    context.putImageData( image, 0, 0 );
    
    return canvas;
  }

three.js. terrain demo

var Perlin = function () { // http://mrl.nyu.edu/~perlin/noise/ var p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10, 23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87, 174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211, 133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208, 89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5, 202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119, 248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232, 178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249, 14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205, 93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180]; for (var i=0; i < 256 ; i++) { p[256+i] = p[i]; } function fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); } function lerp(t, a, b) { return a + t * (b - a); } function grad(hash, x, y, z) { var h = hash & 15; var u = h < 8 ? x : y, v = h < 4 ? y : h == 12 || h == 14 ? x : z; return ((h&1) === 0 ? u : -u) + ((h&2) === 0 ? v : -v); } return { noise: function (x, y, z) { var floorX = Math.floor(x), floorY = Math.floor(y), floorZ = Math.floor(z); var X = floorX & 255, Y = floorY & 255, Z = floorZ & 255; x -= floorX; y -= floorY; z -= floorZ; var xMinus1 = x -1, yMinus1 = y - 1, zMinus1 = z - 1; var u = fade(x), v = fade(y), w = fade(z); var A = p[X]+Y, AA = p[A]+Z, AB = p[A+1]+Z, B = p[X+1]+Y, BA = p[B]+Z, BB = p[B+1]+Z; return lerp(w, lerp(v, lerp(u, grad(p[AA], x, y, z), grad(p[BA], xMinus1, y, z)), lerp(u, grad(p[AB], x, yMinus1, z), grad(p[BB], xMinus1, yMinus1, z))), lerp(v, lerp(u, grad(p[AA+1], x, y, zMinus1), grad(p[BA+1], xMinus1, y, z-1)), lerp(u, grad(p[AB+1], x, yMinus1, zMinus1), grad(p[BB+1], xMinus1, yMinus1, zMinus1)))); } }; }; // var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight, container, stats, camera, scene, renderer, mesh, mouseX = 0, mouseY = 0, windowHalfX = window.innerWidth >> 1, windowHalfY = window.innerHeight >> 1; init(); setInterval( loop, 1000 / 60 ); function init() { container = document.getElementById( 'container' ); camera = new THREE.Camera(0, 0, 1000); camera.focus = 300; scene = new THREE.Scene(); var heightMap = height( 1024, 1024 ); var textureMap = shadow( heightMap ); var material = new THREE.BitmapUVMappingMaterial( textureMap ); var quality = 20; var quality1 = quality + 1; var plane = new Plane( 2000, 2000, quality, quality ); var data = heightMap.getContext( '2d' ).getImageData( 0, 0, heightMap.width, heightMap.height ).data; var pixelsPerTriangle = Math.floor(heightMap.width / quality); for ( var y = 0; y < quality1; y++ ) { for (var x = 0; x < quality1; x++ ) { plane.vertices[x + y * quality1].position.z = data[((x * pixelsPerTriangle) + (y * pixelsPerTriangle) * heightMap.width) * 4] * 2 - 128; } } mesh = new THREE.Mesh( plane, material ); mesh.rotation.x = -90 * Math.PI / 180; scene.add(mesh); renderer = new THREE.CanvasRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 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 onDocumentMouseMove(event) { mouseX = (event.clientX - windowHalfX) * 4; mouseY = (event.clientY - windowHalfY) * 4; } function loop() { camera.position.x += (mouseX - camera.position.x) * 0.05; camera.position.y += (-mouseY + 500 - camera.position.y) * 0.05; renderer.render(scene, camera); stats.update(); } function height(width, height) { var canvas, context, image, data; 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 ); data = image.data; var perlin = new Perlin(); var size = width * height; var quality = 2; var zz = Math.random() * 100; for ( var j = 0; j < 4; j ++ ) { var x = 0, y = 0, yy = 0; quality *= 4; for ( var i = 0; i < size; i ++ ) { data[ i * 4 ] += Math.floor( Math.abs( perlin.noise( x / quality, yy, zz ) * 0.5 ) * quality + 10 ); x++; if (x == width) { x = 0; y ++; yy = y / quality; } } } context.putImageData( image, 0, 0 ); return canvas; } function shadow( texture ) { var canvas, context, image, data, src_data, index, level, diff, width = texture.width, height = texture.height, 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 ); data = image.data; src_data = texture.getContext( '2d' ).getImageData( 0, 0, width, height ).data; for ( var y = 0; y < height; y++ ) { for ( var x = 0; x < width; x++ ) { index = ( x + y * width ) * 4; vector3.x = src_data[ index - 4 ] - src_data[ index + 4 ]; vector3.y = 2; vector3.z = src_data[ index - ( width * 4 ) ] - src_data[ index + ( width * 4 ) ]; vector3.normalize(); shade = vector3.dot(sun); data[ index ] = ( 96 + shade * 128 ) * ( src_data[ index ] * 0.007 ); data[ index + 1 ] = ( 32 + shade * 96 ) * ( src_data[ index ] * 0.007 ); data[ index + 2 ] = ( shade * 96 ) * ( src_data[ index ] * 0.007 ); } } context.putImageData( image, 0, 0 ); return canvas; }<script type="text/javascript" src="http://mrdoob.com/projects/three.js/examples/primitives/Plane.js"></script> <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.</div>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; }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/5RTz/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/mrdoob/5RTz" title="three.js. terrain demo">three.js. terrain demo - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip

Tags

Favorite by

9re

mash

3D three.jsthree.js のデモ。サクサク動く(chrome)

xxxYukihirox..:

3D表現ができるthree.js

Forked

sort

forked from: three.js. terrain..

0
0
131views

262/3/21