-
Notifications
You must be signed in to change notification settings - Fork 1
/
3d-flatland.html
72 lines (62 loc) · 2.34 KB
/
3d-flatland.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!doctype html>
<html lang=en>
<head>
<title>3D Flatland</title>
<meta charset=utf-8>
</head>
<body>
<script src = http://mrdoob.github.io/three.js/build/three.min.js ></script>
<script src = http://mrdoob.github.io/three.js/examples/js/controls/TrackballControls.js ></script>
<script>
var renderer, scene, camera, controls, heightMap;
init();
animate();
function init() {
document.body.style.cssText = 'margin: 0; overflow: hidden; }';
renderer = new THREE.WebGLRenderer( { alpha: 1, antialias: true, clearColor: 0xffffff } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 100, 60 );
controls = new THREE.TrackballControls( camera, renderer.domElement );
// ocean
var material = new THREE.MeshNormalMaterial( { opacity: 0.85, shading: THREE.SmoothShading, transparent: true} );
var geometry = new THREE.SphereGeometry( 62, 100, 50 );
var mesh = new THREE.Mesh( geometry, material );
// scene.add( mesh );
heightMap = document.createElement('img' )
heightMap.src = '4/2/6.png';
heightMap.onload = initCanvas;
}
function initCanvas() {
var canvas = document.createElement( 'canvas' );
canvas.width = canvas.height = 256;
var context = canvas.getContext( '2d' );
context.drawImage( heightMap, 0, 0 );
var imgd = context.getImageData( 0, 0, 256, 256 );
var pix = imgd.data;
var data = new Float32Array( 65536 );
// var mapTexture = THREE.ImageUtils.loadTexture( 'http://b.tile.openstreetmap.org/4/4/2.png' );
var material = new THREE.MeshNormalMaterial( { shading: THREE.SmoothShading } );
var geometry = new THREE.PlaneGeometry( 100, 60, 255, 255 );
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( -0.5 * Math.PI ) );
var verts = geometry.vertices;
var all, j = 0;
for (var i = 0, len = pix.length; i < len; i += 4) {
all = pix[i] + pix[i + 1] + pix[i + 2];
verts[j++].y = -30 + 0.2 * all;
}
var mesh = new THREE.Mesh( geometry, material );
mesh.geometry.computeFaceNormals();
mesh.geometry.computeVertexNormals();
scene.add( mesh );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}
</script>
</body>
</html>