Skip to content

Commit

Permalink
Examples: Clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mugen87
Mugen87 committed Apr 13, 2018
1 parent fb46a77 commit 5c8682b
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 80 deletions.
2 changes: 1 addition & 1 deletion examples/webgl_geometry_cube.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
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 );
document.body.appendChild( renderer.domElement );
Expand Down
54 changes: 24 additions & 30 deletions examples/webgl_geometry_dynamic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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;
Expand All @@ -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 );

Expand All @@ -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 );

//

Expand Down Expand Up @@ -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 );
Expand Down
34 changes: 17 additions & 17 deletions examples/webgl_geometry_hierarchy.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,7 @@

<script>

var container, stats;

var camera, scene, renderer;
var camera, scene, renderer, stats;

var geometry, group;

Expand All @@ -32,24 +30,19 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

init();
animate();

function init() {

container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 500;

scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );

var geometry = new THREE.BoxGeometry( 100, 100, 100 );
var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
var material = new THREE.MeshNormalMaterial();

group = new THREE.Group();
Expand All @@ -73,18 +66,25 @@

scene.add( group );

renderer = new THREE.WebGLRenderer();
//

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

container.appendChild( renderer.domElement );
//

stats = new Stats();
container.appendChild( stats.dom );
document.body.appendChild( stats.dom );

//
//

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

//

window.addEventListener( 'resize', onWindowResize, false );
window.addEventListener( 'resize', onWindowResize, false );

}

Expand All @@ -100,7 +100,7 @@

}

function onDocumentMouseMove(event) {
function onDocumentMouseMove( event ) {

mouseX = ( event.clientX - windowHalfX ) * 10;
mouseY = ( event.clientY - windowHalfY ) * 10;
Expand All @@ -126,8 +126,8 @@
ry = Math.sin( time * 0.3 ) * 0.5,
rz = Math.sin( time * 0.2 ) * 0.5;

camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;

camera.lookAt( scene.position );

Expand Down
31 changes: 16 additions & 15 deletions examples/webgl_geometry_hierarchy2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,7 @@

<script>

var container, stats;

var camera, scene, renderer;
var camera, scene, renderer, stats;

var geometry, root;

Expand All @@ -32,23 +30,18 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

init();
animate();

function init() {

container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 15000 );
camera.position.z = 500;

scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );

var geometry = new THREE.BoxGeometry( 100, 100, 100 );
var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
var material = new THREE.MeshNormalMaterial();

root = new THREE.Mesh( geometry, material );
Expand Down Expand Up @@ -127,13 +120,21 @@

}

renderer = new THREE.WebGLRenderer();
//

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.body.appendChild( renderer.domElement );

//

stats = new Stats();
container.appendChild( stats.dom );
document.body.appendChild( stats.dom );

//

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

//

Expand All @@ -153,7 +154,7 @@

}

function onDocumentMouseMove(event) {
function onDocumentMouseMove( event ) {

mouseX = ( event.clientX - windowHalfX ) * 10;
mouseY = ( event.clientY - windowHalfY ) * 10;
Expand All @@ -179,8 +180,8 @@
var ry = Math.sin( time * 0.3 ) * 0.1;
var rz = Math.sin( time * 0.2 ) * 0.1;

camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;

camera.lookAt( scene.position );

Expand Down
27 changes: 10 additions & 17 deletions examples/webgl_geometry_normals.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,6 @@
<div id="container"></div>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - geometry - normals</a>
<p>
<span>Yellow Arrows: Face Normals</span><br>
<span>Red Arrows: Vertex Normals</span>
</p>
</div>

<script src="../build/three.js"></script>
Expand All @@ -52,16 +48,16 @@

var geometries = [

{ type: 'BoxGeometry', geometry: new THREE.BoxGeometry( 200, 200, 200, 2, 2, 2 ) },
{ type: 'CircleGeometry', geometry: new THREE.CircleGeometry( 200, 32 ) },
{ type: 'CylinderGeometry', geometry: new THREE.CylinderGeometry( 75, 75, 200, 8, 8 ) } ,
{ type: 'IcosahedronGeometry', geometry: new THREE.IcosahedronGeometry( 100, 1 ) },
{ type: 'OctahedronGeometry', geometry: new THREE.OctahedronGeometry( 200, 0 ) },
{ type: 'PlaneGeometry', geometry: new THREE.PlaneGeometry( 200, 200, 4, 4 ) },
{ type: 'RingGeometry', geometry: new THREE.RingGeometry( 32, 64, 16 ) },
{ type: 'SphereGeometry', geometry: new THREE.SphereGeometry( 100, 12, 12 ) },
{ type: 'TorusGeometry', geometry: new THREE.TorusGeometry( 64, 16, 12, 12 ) },
{ type: 'TorusKnotGeometry', geometry: new THREE.TorusKnotGeometry( 64, 16 ) }
{ type: 'BoxGeometry', geometry: new THREE.BoxBufferGeometry( 200, 200, 200, 2, 2, 2 ) },
{ type: 'CircleGeometry', geometry: new THREE.CircleBufferGeometry( 200, 32 ) },
{ type: 'CylinderGeometry', geometry: new THREE.CylinderBufferGeometry( 75, 75, 200, 8, 8 ) } ,
{ type: 'IcosahedronGeometry', geometry: new THREE.IcosahedronBufferGeometry( 100, 1 ) },
{ type: 'OctahedronGeometry', geometry: new THREE.OctahedronBufferGeometry( 200, 0 ) },
{ type: 'PlaneGeometry', geometry: new THREE.PlaneBufferGeometry( 200, 200, 4, 4 ) },
{ type: 'RingGeometry', geometry: new THREE.RingBufferGeometry( 32, 64, 16 ) },
{ type: 'SphereGeometry', geometry: new THREE.SphereBufferGeometry( 100, 12, 12 ) },
{ type: 'TorusGeometry', geometry: new THREE.TorusBufferGeometry( 64, 16, 12, 12 ) },
{ type: 'TorusKnotGeometry', geometry: new THREE.TorusKnotBufferGeometry( 64, 16 ) }

];

Expand Down Expand Up @@ -95,9 +91,6 @@
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

var faceNormalsHelper = new THREE.FaceNormalsHelper( mesh, 10 );
mesh.add( faceNormalsHelper );

var vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh, 10 );
mesh.add( vertexNormalsHelper );

Expand Down

0 comments on commit 5c8682b

Please sign in to comment.