mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 04:56:01 +10:00
alteredq
1e34df61f0
Interestingly, sometimes it seems to go nuts when there are more renderers active at the same time. With uqbiquity, it works ok when using "container" div as element parameter, with large geometry example this doesn't work (calls to loop happen rarely).
271 lines
6.5 KiB
HTML
271 lines
6.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js - geometry - dynamic - webgl</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
color: #61443e;
|
|
font-family:Monospace;
|
|
font-size:13px;
|
|
text-align:center;
|
|
|
|
background-color: #aaccff;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#info {
|
|
color: #ffffff;
|
|
position: absolute;
|
|
top: 0px; width: 100%;
|
|
padding: 5px;
|
|
}
|
|
|
|
a {
|
|
|
|
color: yellow;
|
|
}
|
|
|
|
#oldie {
|
|
background:rgb(0,0,50) !important;
|
|
color:#fff !important;
|
|
}
|
|
|
|
</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> - dynamic geometry demo - webgl<br />(left click: forward, right click: backward)</div>
|
|
|
|
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
|
|
<script type="text/javascript" src="js/Stats.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
if ( ! THREE.Detector.webgl ) {
|
|
|
|
THREE.Detector.addGetWebGLMessage();
|
|
document.getElementById( 'container' ).innerHTML = "";
|
|
|
|
}
|
|
|
|
window.onload = init;
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene, renderer;
|
|
|
|
var mesh, texture,geometry, material;
|
|
|
|
var worldWidth = 128, worldDepth = 128,
|
|
worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
|
|
|
|
var mouseX = 0, mouseY = 0,
|
|
lat = 0, lon = 0, phy = 0, theta = 0;
|
|
|
|
var direction = new THREE.Vector3(),
|
|
moveForward = false, moveBackward = false, moveLeft = false, moveRight = false;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
|
|
function init() {
|
|
|
|
container = document.getElementById( 'container' );
|
|
|
|
camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
|
|
camera.target.position.z = - 100;
|
|
|
|
scene = new THREE.Scene();
|
|
scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );
|
|
|
|
//var light = new THREE.PointLight( 0xffffff, 2 );
|
|
//light.position.y = 500;
|
|
//scene.addLight( light );
|
|
|
|
camera.position.y = 200;
|
|
camera.target.position.y = camera.position.y;
|
|
|
|
geometry = new Plane( 20000, 20000, worldWidth - 1, worldDepth - 1 );
|
|
|
|
var i, j, il, jl;
|
|
|
|
for ( i = 0, il = geometry.vertices.length; i < il; i ++ ) {
|
|
|
|
geometry.vertices[ i ].position.z = 35 * Math.sin( i/2 );
|
|
|
|
}
|
|
|
|
for( i = 0; i < geometry.uvs.length; i++ ) {
|
|
|
|
var uvs = geometry.uvs[ i ];
|
|
for ( j = 0, jl = uvs.length; j < jl; j++ ) {
|
|
|
|
uvs[ j ].u *= 5;
|
|
uvs[ j ].v *= 5;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
//console.log( "triangles: " + geometry.faces.length * 2 + " faces: " + geometry.faces.length + " vertices: " + geometry.vertices.length );
|
|
|
|
geometry.computeFaceNormals();
|
|
geometry.computeVertexNormals();
|
|
|
|
var texture = ImageUtils.loadTexture( "textures/water.jpg" );
|
|
texture.wrap_s = texture.wrap_t = THREE.RepeatWrapping;
|
|
material = new THREE.MeshBasicMaterial( { color:0x0044ff, opacity:1, map: texture } );
|
|
|
|
mesh = new THREE.Mesh( geometry, material );
|
|
mesh.rotation.x = - 90 * Math.PI / 180;
|
|
scene.addObject( mesh );
|
|
|
|
renderer = new THREE.WebGLRenderer( { clearColor:0xaaccff, clearAlpha: 1 } );
|
|
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( 'mousedown', onDocumentMouseDown, false );
|
|
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
|
|
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
document.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
|
|
|
|
document.addEventListener( 'keydown', onDocumentKeyDown, false );
|
|
document.addEventListener( 'keyup', onDocumentKeyUp, false );
|
|
|
|
loop();
|
|
|
|
}
|
|
|
|
|
|
function onDocumentMouseDown( event ) {
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
switch ( event.button ) {
|
|
|
|
case 0: moveForward = true; break;
|
|
case 2: moveBackward = true; break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function onDocumentMouseUp( event ) {
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
switch ( event.button ) {
|
|
|
|
case 0: moveForward = false; break;
|
|
case 2: moveBackward = false; break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function onDocumentMouseMove(event) {
|
|
|
|
mouseX = event.clientX - windowHalfX;
|
|
mouseY = event.clientY - windowHalfY;
|
|
|
|
}
|
|
|
|
function onDocumentKeyDown( event ) {
|
|
|
|
switch( event.keyCode ) {
|
|
|
|
case 38: /*up*/
|
|
case 87: /*W*/ moveForward = true; break;
|
|
|
|
case 37: /*left*/
|
|
case 65: /*A*/ moveLeft = true; break;
|
|
|
|
case 40: /*down*/
|
|
case 83: /*S*/ moveBackward = true; break;
|
|
|
|
case 39: /*right*/
|
|
case 68: /*D*/ moveRight = true; break;
|
|
}
|
|
|
|
}
|
|
|
|
function onDocumentKeyUp( event ) {
|
|
|
|
switch( event.keyCode ) {
|
|
|
|
case 38: /*up*/
|
|
case 87: /*W*/ moveForward = false; break;
|
|
|
|
case 37: /*left*/
|
|
case 65: /*A*/ moveLeft = false; break;
|
|
|
|
case 40: /*down*/
|
|
case 83: /*S*/ moveBackward = false; break;
|
|
|
|
case 39: /*right*/
|
|
case 68: /*D*/ moveRight = false; break;
|
|
}
|
|
|
|
}
|
|
|
|
function loop() {
|
|
|
|
requestAnimationFrame( loop, renderer.domElement );
|
|
|
|
var time = new Date().getTime() * 0.01;
|
|
|
|
if ( moveForward ) camera.translateZ( - 10 );
|
|
if ( moveBackward ) camera.translateZ( 10 );
|
|
if ( moveLeft ) camera.translateX( - 10 );
|
|
if ( moveRight ) camera.translateX( 10 );
|
|
|
|
lon += mouseX * 0.004;
|
|
lat -= mouseY * 0.004;
|
|
|
|
lat = Math.max( - 85, Math.min( 85, lat ) );
|
|
phi = ( 90 - lat ) * Math.PI / 180;
|
|
theta = lon * Math.PI / 180;
|
|
|
|
camera.target.position.x = 100 * Math.sin( phi ) * Math.cos( theta ) + camera.position.x;
|
|
camera.target.position.y = 100 * Math.cos( phi ) + camera.position.y;
|
|
camera.target.position.z = 100 * Math.sin( phi ) * Math.sin( theta ) + camera.position.z;
|
|
|
|
|
|
for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
|
|
|
|
geometry.vertices[ i ].position.z = 35 * Math.sin( i/5 + (time + i)/7 );
|
|
|
|
}
|
|
|
|
//geometry.computeFaceNormals();
|
|
//geometry.computeVertexNormals();
|
|
|
|
mesh.geometry.__dirtyVertices = true;
|
|
//mesh.geometry.__dirtyNormals = true;
|
|
|
|
renderer.render(scene, camera);
|
|
|
|
stats.update();
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|