|
|
@@ -37,7 +37,6 @@
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
- <div id="container"></div>
|
|
|
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - dynamic geometry demo - webgl<br />(left click: forward, right click: backward)</div>
|
|
|
|
|
|
<script src="../build/three.js"></script>
|
|
|
@@ -49,34 +48,25 @@
|
|
|
|
|
|
<script>
|
|
|
|
|
|
- if ( ! Detector.webgl ) {
|
|
|
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
|
|
- Detector.addGetWebGLMessage();
|
|
|
- document.getElementById( 'container' ).innerHTML = "";
|
|
|
+ var camera, controls, scene, renderer, stats;
|
|
|
|
|
|
- }
|
|
|
-
|
|
|
- var container, stats;
|
|
|
-
|
|
|
- var camera, controls, scene, renderer;
|
|
|
-
|
|
|
- var mesh, texture, geometry, material;
|
|
|
+ var mesh, texture, geometry, material, clock;
|
|
|
|
|
|
var worldWidth = 128, worldDepth = 128,
|
|
|
worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
|
|
|
|
|
|
- var clock = new THREE.Clock();
|
|
|
-
|
|
|
init();
|
|
|
animate();
|
|
|
|
|
|
function init() {
|
|
|
|
|
|
- container = document.getElementById( 'container' );
|
|
|
-
|
|
|
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
|
|
|
camera.position.y = 200;
|
|
|
|
|
|
+ clock = new THREE.Clock();
|
|
|
+
|
|
|
controls = new THREE.FirstPersonControls( camera );
|
|
|
|
|
|
controls.movementSpeed = 500;
|
|
|
@@ -86,16 +76,20 @@
|
|
|
scene.background = new THREE.Color( 0xaaccff );
|
|
|
scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );
|
|
|
|
|
|
- geometry = new THREE.PlaneGeometry( 20000, 20000, worldWidth - 1, worldDepth - 1 );
|
|
|
+ geometry = new THREE.PlaneBufferGeometry( 20000, 20000, worldWidth - 1, worldDepth - 1 );
|
|
|
geometry.rotateX( - Math.PI / 2 );
|
|
|
|
|
|
- for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
|
|
|
+ var position = geometry.attributes.position;
|
|
|
+ position.dynamic = true;
|
|
|
+
|
|
|
+ for ( var i = 0; i < position.count; i ++ ) {
|
|
|
|
|
|
- geometry.vertices[ i ].y = 35 * Math.sin( i / 2 );
|
|
|
+ var y = 35 * Math.sin( i / 2 );
|
|
|
+ position.setY( i, y );
|
|
|
|
|
|
}
|
|
|
|
|
|
- var texture = new THREE.TextureLoader().load( "textures/water.jpg" );
|
|
|
+ var texture = new THREE.TextureLoader().load( 'textures/water.jpg' );
|
|
|
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
|
|
|
texture.repeat.set( 5, 5 );
|
|
|
|
|
|
@@ -104,16 +98,13 @@
|
|
|
mesh = new THREE.Mesh( geometry, material );
|
|
|
scene.add( mesh );
|
|
|
|
|
|
- renderer = new THREE.WebGLRenderer();
|
|
|
+ renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
-
|
|
|
- container.innerHTML = "";
|
|
|
-
|
|
|
- container.appendChild( renderer.domElement );
|
|
|
+ document.body.appendChild( renderer.domElement );
|
|
|
|
|
|
stats = new Stats();
|
|
|
- container.appendChild( stats.dom );
|
|
|
+ document.body.appendChild( stats.dom );
|
|
|
|
|
|
//
|
|
|
|
|
|
@@ -145,16 +136,19 @@
|
|
|
|
|
|
function render() {
|
|
|
|
|
|
- var delta = clock.getDelta(),
|
|
|
- time = clock.getElapsedTime() * 10;
|
|
|
+ var delta = clock.getDelta();
|
|
|
+ var time = clock.getElapsedTime() * 10;
|
|
|
+
|
|
|
+ var position = geometry.attributes.position;
|
|
|
|
|
|
- for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
|
|
|
+ for ( var i = 0; i < position.count; i ++ ) {
|
|
|
|
|
|
- geometry.vertices[ i ].y = 35 * Math.sin( i / 5 + ( time + i ) / 7 );
|
|
|
+ var y = 35 * Math.sin( i / 5 + ( time + i ) / 7 );
|
|
|
+ position.setY( i, y );
|
|
|
|
|
|
}
|
|
|
|
|
|
- mesh.geometry.verticesNeedUpdate = true;
|
|
|
+ position.needsUpdate = true;
|
|
|
|
|
|
controls.update( delta );
|
|
|
renderer.render( scene, camera );
|
Mugen87