Skip to content

Examples: Clean up #13883

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

Merged
merged 2 commits into from
Apr 17, 2018
Merged

Examples: Clean up #13883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
69b3964
Examples: Clean up
Mugen87 Apr 17, 2018
1dcf9d6
Examples: Fix webvr_video.html
Mugen87 Apr 17, 2018
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
15 changes: 3 additions & 12 deletions examples/webgl_materials_transparency.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,6 @@

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

<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/MaskPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/FXAAShader.js"></script>
<script src="js/postprocessing/BloomPass.js"></script>
<script src="js/shaders/ConvolutionShader.js"></script>

<script>

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
Expand All @@ -71,7 +62,7 @@

//

var geometry = new THREE.SphereGeometry( 18, 30, 30 );
var geometry = new THREE.SphereBufferGeometry( 18, 30, 30 );

var material1 = new THREE.MeshStandardMaterial( {
opacity: params.opacity,
Expand Down Expand Up @@ -141,7 +132,7 @@

//

renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
Expand Down Expand Up @@ -198,7 +189,7 @@

var object = scene.children[ i ];

if ( object.geometry instanceof THREE.SphereGeometry ) {
if ( object.geometry instanceof THREE.SphereBufferGeometry ) {

object.rotation.x = performance.now() * 0.0002;
object.rotation.y = - performance.now() * 0.0002;
Expand Down
8 changes: 5 additions & 3 deletions examples/webgl_materials_wireframe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@

//

geometry = new THREE.BoxGeometry( size, size, size );
geometry = new THREE.BoxBufferGeometry( size, size, size );
material = new THREE.MeshBasicMaterial( { wireframe: true } );

mesh = new THREE.Mesh( geometry, material );
Expand All @@ -79,7 +79,8 @@

//

geometry = new THREE.BufferGeometry().fromGeometry( new THREE.BoxGeometry( size, size, size ) );
geometry = new THREE.BoxBufferGeometry( size, size, size );
geometry = geometry.toNonIndexed();

setupAttributes( geometry );

Expand All @@ -97,7 +98,8 @@

//

geometry = new THREE.BufferGeometry().fromGeometry( new THREE.SphereGeometry( size / 2, 32, 16 ) );
geometry = new THREE.SphereBufferGeometry( size / 2, 32, 16 );
geometry = geometry.toNonIndexed();

setupAttributes( geometry );

Expand Down
12 changes: 6 additions & 6 deletions examples/webgl_mirror.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
var container = document.getElementById( 'container' );

// renderer
renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( WIDTH, HEIGHT );
container.appendChild( renderer.domElement );
Expand Down Expand Up @@ -116,13 +116,13 @@
sphereGroup = new THREE.Object3D();
scene.add( sphereGroup );

var geometry = new THREE.CylinderGeometry( 0.1, 15 * Math.cos( Math.PI / 180 * 30 ), 0.1, 24, 1 );
var geometry = new THREE.CylinderBufferGeometry( 0.1, 15 * Math.cos( Math.PI / 180 * 30 ), 0.1, 24, 1 );
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x444444 } );
var sphereCap = new THREE.Mesh( geometry, material );
sphereCap.position.y = -15 * Math.sin( Math.PI / 180 * 30 ) - 0.05;
sphereCap.rotateX(-Math.PI);
sphereCap.position.y = - 15 * Math.sin( Math.PI / 180 * 30 ) - 0.05;
sphereCap.rotateX( - Math.PI );

var geometry = new THREE.SphereGeometry( 15, 24, 24, Math.PI / 2, Math.PI * 2, 0, Math.PI / 180 * 120 );
var geometry = new THREE.SphereBufferGeometry( 15, 24, 24, Math.PI / 2, Math.PI * 2, 0, Math.PI / 180 * 120 );
var halfSphere = new THREE.Mesh( geometry, material );
halfSphere.add( sphereCap );
halfSphere.rotateX( - Math.PI / 180 * 135 );
Expand All @@ -131,7 +131,7 @@

sphereGroup.add( halfSphere );

var geometry = new THREE.IcosahedronGeometry( 5, 0 );
var geometry = new THREE.IcosahedronBufferGeometry( 5, 0 );
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, flatShading: true } );
smallSphere = new THREE.Mesh( geometry, material );
scene.add(smallSphere);
Expand Down
6 changes: 3 additions & 3 deletions examples/webgl_mirror_nodes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,13 +236,13 @@
sphereGroup = new THREE.Object3D();
scene.add( sphereGroup );

var geometry = new THREE.CylinderGeometry( 0.1, 15 * Math.cos( Math.PI / 180 * 30 ), 0.1, 24, 1 );
var geometry = new THREE.CylinderBufferGeometry( 0.1, 15 * Math.cos( Math.PI / 180 * 30 ), 0.1, 24, 1 );
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x444444 } );
var sphereCap = new THREE.Mesh( geometry, material );
sphereCap.position.y = - 15 * Math.sin( Math.PI / 180 * 30 ) - 0.05;
sphereCap.rotateX( - Math.PI );

var geometry = new THREE.SphereGeometry( 15, 24, 24, Math.PI / 2, Math.PI * 2, 0, Math.PI / 180 * 120 );
var geometry = new THREE.SphereBufferGeometry( 15, 24, 24, Math.PI / 2, Math.PI * 2, 0, Math.PI / 180 * 120 );
var halfSphere = new THREE.Mesh( geometry, material );
halfSphere.add( sphereCap );
halfSphere.rotateX( - Math.PI / 180 * 135 );
Expand All @@ -251,7 +251,7 @@

sphereGroup.add( halfSphere );

var geometry = new THREE.IcosahedronGeometry( 5, 0 );
var geometry = new THREE.IcosahedronBufferGeometry( 5, 0 );
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, flatShading: true } );
smallSphere = new THREE.Mesh( geometry, material );
scene.add( smallSphere );
Expand Down
12 changes: 6 additions & 6 deletions examples/webgl_multiple_elements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,10 +98,10 @@
canvas = document.getElementById( "c" );

var geometries = [
new THREE.BoxGeometry( 1, 1, 1 ),
new THREE.SphereGeometry( 0.5, 12, 8 ),
new THREE.DodecahedronGeometry( 0.5 ),
new THREE.CylinderGeometry( 0.5, 0.5, 1, 12 )
new THREE.BoxBufferGeometry( 1, 1, 1 ),
new THREE.SphereBufferGeometry( 0.5, 12, 8 ),
new THREE.DodecahedronBufferGeometry( 0.5 ),
new THREE.CylinderBufferGeometry( 0.5, 0.5, 1, 12 )
];

var template = document.getElementById( "template" ).text;
Expand Down Expand Up @@ -168,7 +168,7 @@
var width = canvas.clientWidth;
var height = canvas.clientHeight;

if ( canvas.width !== width || canvas.height != height ) {
if ( canvas.width !== width || canvas.height !== height ) {

renderer.setSize( width, height, false );

Expand Down Expand Up @@ -197,7 +197,7 @@
scenes.forEach( function( scene ) {

// so something moves
scene.children[0].rotation.y = Date.now() * 0.001;
scene.children[ 0 ].rotation.y = Date.now() * 0.001;

// get the element that is a place holder for where we want to
// draw the scene
Expand Down
4 changes: 2 additions & 2 deletions examples/webgl_octree.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
// create object to show search radius and add to scene

searchMesh = new THREE.Mesh(
new THREE.SphereGeometry( radiusSearch ),
new THREE.SphereBufferGeometry( radiusSearch ),
new THREE.MeshBasicMaterial( { color: 0x00FF00, transparent: true, opacity: 0.4 } )
);
scene.add( searchMesh );
Expand Down Expand Up @@ -122,7 +122,7 @@

}

var geometry = new THREE.BoxGeometry( 50, 50, 50 );
var geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );

function modifyOctree() {

Expand Down
2 changes: 1 addition & 1 deletion examples/webgl_performance_doublesided.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@

var material = new THREE.MeshPhongMaterial( { specular: 0x101010, shininess: 100, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.1, side: THREE.DoubleSide } );

var geometry = new THREE.SphereGeometry( 1, 32, 16, 0, Math.PI );
var geometry = new THREE.SphereBufferGeometry( 1, 32, 16, 0, Math.PI );

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

Expand Down
4 changes: 2 additions & 2 deletions examples/webgl_rtt.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@
quad.position.z = -100;
sceneRTT.add( quad );

var geometry = new THREE.TorusGeometry( 100, 25, 15, 30 );
var geometry = new THREE.TorusBufferGeometry( 100, 25, 15, 30 );

var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0xffaa00, shininess: 5 } );
var mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular: 0xff2200, shininess: 5 } );
Expand All @@ -173,7 +173,7 @@
sceneScreen.add( quad );

var n = 5,
geometry = new THREE.SphereGeometry( 10, 64, 32 ),
geometry = new THREE.SphereBufferGeometry( 10, 64, 32 ),
material2 = new THREE.MeshBasicMaterial( { color: 0xffffff, map: rtTexture.texture } );

for( var j = 0; j < n; j ++ ) {
Expand Down
4 changes: 2 additions & 2 deletions examples/webgl_sandbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@

];

var geometry = new THREE.SphereGeometry( 50, 32, 16 );
var geometry = new THREE.SphereBufferGeometry( 50, 32, 16 );

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

Expand All @@ -123,7 +123,7 @@

}

renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer( { antialias : true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
Expand Down
2 changes: 1 addition & 1 deletion examples/webgl_shadowmap_pcss.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@
group = new THREE.Group();
scene.add( group );

var geometry = new THREE.SphereGeometry( 0.3, 20, 20 );
var geometry = new THREE.SphereBufferGeometry( 0.3, 20, 20 );

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

Expand Down
6 changes: 3 additions & 3 deletions examples/webgl_shadowmap_pointlight.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
pointLight.shadow.camera.far = 60;
pointLight.shadow.bias = - 0.005; // reduces self-shadowing on double-sided objects

var geometry = new THREE.SphereGeometry( 0.3, 12, 6 );
var geometry = new THREE.SphereBufferGeometry( 0.3, 12, 6 );
var material = new THREE.MeshBasicMaterial( { color: color } );
material.color.multiplyScalar( intensity );
var sphere = new THREE.Mesh( geometry, material );
Expand All @@ -79,7 +79,7 @@
texture.wrapS = THREE.RepeatWrapping;
texture.repeat.set( 1, 3.5 );

var geometry = new THREE.SphereGeometry( 2, 32, 8 );
var geometry = new THREE.SphereBufferGeometry( 2, 32, 8 );
var material = new THREE.MeshPhongMaterial( {
side: THREE.DoubleSide,
alphaMap: texture,
Expand Down Expand Up @@ -110,7 +110,7 @@

//

var geometry = new THREE.BoxGeometry( 30, 30, 30 );
var geometry = new THREE.BoxBufferGeometry( 30, 30, 30 );

var material = new THREE.MeshPhongMaterial( {
color: 0xa0adaf,
Expand Down
16 changes: 8 additions & 8 deletions examples/webgl_shadowmesh.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,27 +103,27 @@
scene.add( arrowHelper3 );

// LIGHTBULB
var lightSphereGeometry = new THREE.SphereGeometry( 0.09 );
var lightSphereGeometry = new THREE.SphereBufferGeometry( 0.09 );
var lightSphereMaterial = new THREE.MeshBasicMaterial( { color: 'rgb(255,255,255)' } );
lightSphere = new THREE.Mesh( lightSphereGeometry, lightSphereMaterial );
scene.add( lightSphere );
lightSphere.visible = false;

var lightHolderGeometry = new THREE.CylinderGeometry( 0.05, 0.05, 0.13 );
var lightHolderGeometry = new THREE.CylinderBufferGeometry( 0.05, 0.05, 0.13 );
var lightHolderMaterial = new THREE.MeshBasicMaterial( { color: 'rgb(75,75,75)' } );
lightHolder = new THREE.Mesh( lightHolderGeometry, lightHolderMaterial );
scene.add( lightHolder );
lightHolder.visible = false;

// GROUND
var groundGeometry = new THREE.BoxGeometry( 30, 0.01, 40 );
var groundGeometry = new THREE.BoxBufferGeometry( 30, 0.01, 40 );
var groundMaterial = new THREE.MeshLambertMaterial( { color: 'rgb(0,130,0)' } );
groundMesh = new THREE.Mesh( groundGeometry, groundMaterial );
groundMesh.position.y = 0.0; //this value must be slightly lower than the planeConstant (0.01) parameter above
scene.add( groundMesh );

// RED CUBE and CUBE's SHADOW
var cubeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
var cubeGeometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var cubeMaterial = new THREE.MeshLambertMaterial( { color: 'rgb(255,0,0)', emissive: 0x200000 } );
cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
cube.position.z = - 1;
Expand All @@ -133,7 +133,7 @@
scene.add( cubeShadow );

// BLUE CYLINDER and CYLINDER's SHADOW
var cylinderGeometry = new THREE.CylinderGeometry( 0.3, 0.3, 2 );
var cylinderGeometry = new THREE.CylinderBufferGeometry( 0.3, 0.3, 2 );
var cylinderMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(0,0,255)', emissive: 0x000020 } );
cylinder = new THREE.Mesh( cylinderGeometry, cylinderMaterial );
cylinder.position.z = - 2.5;
Expand All @@ -143,7 +143,7 @@
scene.add( cylinderShadow );

// MAGENTA TORUS and TORUS' SHADOW
var torusGeometry = new THREE.TorusGeometry( 1, 0.2, 10, 16, TWO_PI );
var torusGeometry = new THREE.TorusBufferGeometry( 1, 0.2, 10, 16, TWO_PI );
var torusMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,0,255)', emissive: 0x200020 } );
torus = new THREE.Mesh( torusGeometry, torusMaterial );
torus.position.z = - 6;
Expand All @@ -153,7 +153,7 @@
scene.add( torusShadow );

// WHITE SPHERE and SPHERE'S SHADOW
var sphereGeometry = new THREE.SphereGeometry( 0.5, 20, 10 );
var sphereGeometry = new THREE.SphereBufferGeometry( 0.5, 20, 10 );
var sphereMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,255,255)', emissive: 0x222222 } );
sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.position.set( 4, 0.5, 2 );
Expand All @@ -163,7 +163,7 @@
scene.add( sphereShadow );

// YELLOW PYRAMID and PYRAMID'S SHADOW
var pyramidGeometry = new THREE.CylinderGeometry( 0, 0.5, 2, 4 );
var pyramidGeometry = new THREE.CylinderBufferGeometry( 0, 0.5, 2, 4 );
var pyramidMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,255,0)', emissive: 0x440000, flatShading: true, shininess: 0 } );
pyramid = new THREE.Mesh( pyramidGeometry, pyramidMaterial );
pyramid.position.set( - 4, 1, 2 );
Expand Down
2 changes: 1 addition & 1 deletion examples/webgldeferred_animation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@
var distance = 20;

var c = new THREE.Vector3();
var geometry = new THREE.SphereGeometry( 1, 1, 1 );
var geometry = new THREE.SphereBufferGeometry( 1, 1, 1 );

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

Expand Down
26 changes: 9 additions & 17 deletions examples/webvr_video.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,19 +87,15 @@

// left

var geometry = new THREE.SphereGeometry( 500, 60, 40 );
var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
// invert the geometry on the x-axis so that all of the faces point inward
geometry.scale( - 1, 1, 1 );

var uvs = geometry.faceVertexUvs[ 0 ];
var uvs = geometry.attributes.uv.array;

for ( var i = 0; i < uvs.length; i ++ ) {
for ( var i = 0; i < uvs.length; i += 2 ) {

for ( var j = 0; j < 3; j ++ ) {

uvs[ i ][ j ].x *= 0.5;

}
uvs[ i ] *= 0.5;

}

Expand All @@ -112,19 +108,15 @@

// right

var geometry = new THREE.SphereGeometry( 500, 60, 40 );
var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
geometry.scale( - 1, 1, 1 );

var uvs = geometry.faceVertexUvs[ 0 ];
var uvs = geometry.attributes.uv.array;

for ( var i = 0; i < uvs.length; i ++ ) {
for ( var i = 0; i < uvs.length; i += 2 ) {

for ( var j = 0; j < 3; j ++ ) {

uvs[ i ][ j ].x *= 0.5;
uvs[ i ][ j ].x += 0.5;

}
uvs[ i ] *= 0.5;
uvs[ i ] += 0.5;

}

Expand Down