Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Examples: Clean up #11210

Merged
merged 1 commit into from
Apr 21, 2017
Merged

Examples: Clean up #11210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 23 additions & 17 deletions examples/webgl_clipping.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,19 @@

<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>

<script src="js/libs/stats.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>

<script>

var camera, scene, renderer, startTime, object;
var camera, scene, renderer, startTime, object, stats;

init();
animate();

function init() {

camera = new THREE.PerspectiveCamera(
36, window.innerWidth / window.innerHeight, 0.25, 16 );
camera = new THREE.PerspectiveCamera( 36, window.innerWidth / window.innerHeight, 0.25, 16 );

camera.position.set( 0, 1.3, 3 );

Expand Down Expand Up @@ -64,8 +66,8 @@

// ***** Clipping planes: *****

var localPlane = new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0.8 ),
globalPlane = new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), 0.1 );
var localPlane = new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0.8 );
var globalPlane = new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), 0.1 );

// Geometry

Expand All @@ -78,23 +80,28 @@
clippingPlanes: [ localPlane ],
clipShadows: true

} ),
} );

geometry = new THREE.TorusKnotGeometry( 0.4, 0.08, 95, 20 );
var geometry = new THREE.TorusKnotBufferGeometry( 0.4, 0.08, 95, 20 );

object = new THREE.Mesh( geometry, material );
object.castShadow = true;
scene.add( object );

var ground = new THREE.Mesh(
new THREE.PlaneBufferGeometry( 9, 9, 1, 1 ),
new THREE.MeshPhongMaterial( {
color: 0xa0adaf, shininess: 150 } ) );
new THREE.MeshPhongMaterial( { color: 0xa0adaf, shininess: 150 } )
);

ground.rotation.x = - Math.PI / 2; // rotates X/Y to X/Z
ground.receiveShadow = true;
scene.add( ground );

// Stats

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

// Renderer

renderer = new THREE.WebGLRenderer();
Expand All @@ -119,7 +126,7 @@
// GUI

var gui = new dat.GUI(),
folderLocal = gui.addFolder( "Local Clipping" ),
folderLocal = gui.addFolder( 'Local Clipping' ),
propsLocal = {

get 'Enabled'() { return renderer.localClippingEnabled; },
Expand All @@ -133,7 +140,7 @@

},

folderGlobal = gui.addFolder( "Global Clipping" ),
folderGlobal = gui.addFolder( 'Global Clipping' ),
propsGlobal = {

get 'Enabled'() { return renderer.clippingPlanes !== Empty; },
Expand Down Expand Up @@ -169,8 +176,8 @@

function animate() {

var currentTime = Date.now(),
time = ( currentTime - startTime ) / 1000;
var currentTime = Date.now();
var time = ( currentTime - startTime ) / 1000;

requestAnimationFrame( animate );

Expand All @@ -179,13 +186,12 @@
object.rotation.y = time * 0.2;
object.scale.setScalar( Math.cos( time ) * 0.125 + 0.875 );

stats.begin();
renderer.render( scene, camera );
stats.end();

}

init();
animate();

</script>

</body>
Expand Down
10 changes: 8 additions & 2 deletions examples/webgl_decals.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,14 @@
<script src="../build/three.js"></script>
<script src="js/geometries/DecalGeometry.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>

<script>

var container = document.getElementById( 'container' );

var renderer, scene, camera, fov = 45;
var renderer, scene, camera, stats;
var mesh, decal;
var raycaster;
var line;
Expand Down Expand Up @@ -101,9 +102,12 @@
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

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

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 120;
camera.target = new THREE.Vector3();

Expand Down Expand Up @@ -299,6 +303,8 @@

renderer.render( scene, camera );

stats.update();

}

</script>
Expand Down
51 changes: 30 additions & 21 deletions examples/webgl_depth_texture.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,10 +95,11 @@
<script src="../build/three.js"></script>
<script src="js/shaders/SSAOShader.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/libs/stats.min.js"></script>

<script>

var camera, scene, renderer, controls;
var camera, scene, renderer, controls, stats;
var target;
var postScene, postCamera;
var supportsExtension = true;
Expand All @@ -108,19 +109,24 @@

function init() {

renderer = new THREE.WebGLRenderer( { canvas: document.querySelector('canvas') } );
renderer = new THREE.WebGLRenderer( { canvas: document.querySelector( 'canvas' ) } );

if ( !renderer.extensions.get( 'WEBGL_depth_texture' ) ) {

if ( !renderer.extensions.get('WEBGL_depth_texture') ) {
supportsExtension = false;
document.querySelector('#error').style.display = 'block';
document.querySelector( '#error' ).style.display = 'block';
return;

}

renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );

//

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

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
camera.position.z = -4;

Expand Down Expand Up @@ -155,49 +161,50 @@
function setupPost () {

// Setup post processing stage
postCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
var postMaterial = new THREE.ShaderMaterial({
vertexShader: document.querySelector('#post-vert').textContent.trim(),
fragmentShader: document.querySelector('#post-frag').textContent.trim(),
postCamera = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 1 );
var postMaterial = new THREE.ShaderMaterial( {
vertexShader: document.querySelector( '#post-vert' ).textContent.trim(),
fragmentShader: document.querySelector( '#post-frag' ).textContent.trim(),
uniforms: {
cameraNear: { value: camera.near },
cameraFar: { value: camera.far },
tDiffuse: { value: target.texture },
tDepth: { value: target.depthTexture }
}
});
var postPlane = new THREE.PlaneGeometry(2, 2);
var postQuad = new THREE.Mesh(postPlane, postMaterial);
var postPlane = new THREE.PlaneBufferGeometry( 2, 2 );
var postQuad = new THREE.Mesh( postPlane, postMaterial );
postScene = new THREE.Scene();
postScene.add(postQuad);
postScene.add( postQuad );

}

function setupScene () {
var diffuse = new THREE.TextureLoader().load('textures/brick_diffuse.jpg');

var diffuse = new THREE.TextureLoader().load( 'textures/brick_diffuse.jpg' );
diffuse.wrapS = diffuse.wrapT = THREE.RepeatWrapping;

// Setup some geometries
var geometry = new THREE.TorusKnotGeometry(1, 0.3, 128, 64);
var material = new THREE.MeshBasicMaterial({ color: 'blue' });
var geometry = new THREE.TorusKnotBufferGeometry( 1, 0.3, 128, 64 );
var material = new THREE.MeshBasicMaterial( { color: 'blue' } );

var count = 50;
var scale = 5;

for ( var i = 0; i < count; i ++ ) {

var r = Math.random() * 2.0 * Math.PI;
var z = (Math.random() * 2.0) - 1.0;
var zScale = Math.sqrt(1.0 - z * z) * scale;
var z = ( Math.random() * 2.0 ) - 1.0;
var zScale = Math.sqrt( 1.0 - z * z ) * scale;

var mesh = new THREE.Mesh(geometry, material);
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set(
Math.cos(r) * zScale,
Math.sin(r) * zScale,
Math.cos( r ) * zScale,
Math.sin( r ) * zScale,
z * scale
);
mesh.rotation.set(Math.random(), Math.random(), Math.random());
scene.add(mesh);
mesh.rotation.set( Math.random(), Math.random(), Math.random() );
scene.add( mesh );

}

Expand Down Expand Up @@ -228,6 +235,8 @@
// render post FX
renderer.render( postScene, postCamera );

stats.update();

}

</script>
Expand Down