Skip to content

Commit

Permalink
Examples: Clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
Mugen87 committed Mar 9, 2019
1 parent 1bb6d19 commit dbc2f0e
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 36 deletions.
10 changes: 3 additions & 7 deletions examples/webgl_loader_svg.html
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@

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

document.body.addEventListener( 'dblclick', function ( event ) {
document.body.addEventListener( 'dblclick', function () {

var group = scene.children[ 1 ];
group.traverse( function ( child ) {
Expand All @@ -102,14 +102,10 @@

function createGUI() {

if ( gui ) {
gui.destroy();
}

guiData = {
if ( gui ) gui.destroy();

var guiData = {
currentURL: currentURL

};

gui = new dat.GUI( { width: 350 } );
Expand Down
63 changes: 34 additions & 29 deletions examples/webgl_materials_envmaps_parallax.html
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
#endif
#endif
`
`;

var envmapParsReplace = `
#define BOX_PROJECTED_ENV_MAP
Expand Down Expand Up @@ -270,11 +270,11 @@
var NEAR = 1;
var FAR = 800;

var camera, scene, renderer;
var camera, cubeCamera, scene, renderer;

var cameraControls;

var groundPlane, smallSphere, wallMat;
var groundPlane, wallMat;

init();

Expand All @@ -295,8 +295,9 @@
};
var bpcemGui = gui.add( params, 'box projected' );

bpcemGui.onChange( function( value ) {
if ( value ){
bpcemGui.onChange( function ( value ) {

if ( value ) {

groundPlane.material = boxProjectedMat;

Expand All @@ -308,17 +309,17 @@

render();

});
} );

// scene
scene = new THREE.Scene();

// camera
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
camera.position.set( 280, 106, -5 );
camera.position.set( 280, 106, - 5 );

cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
cameraControls.target.set( 0, -10, 0 );
cameraControls.target.set( 0, - 10, 0 );
cameraControls.maxDistance = 400;
cameraControls.minDistance = 10;
cameraControls.addEventListener( 'change', render );
Expand All @@ -330,33 +331,33 @@
cubeCamera.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
cubeCamera.renderTarget.texture.mapping = THREE.CubeReflectionMapping;

cubeCamera.position.set( 0, -100, 0 );
cubeCamera.position.set( 0, - 100, 0 );
scene.add( cubeCamera );

// ground floor ( with box projected environment mapping )
var loader = new THREE.TextureLoader();
var rMap = loader.load( 'textures/lava/lavatile.jpg' );
rMap.wrapS = THREE.RepeatWrapping;
rMap.wrapT = THREE.RepeatWrapping;
rMap.repeat.set(2,1);
rMap.repeat.set( 2, 1 );

var defaultMat = new THREE.MeshPhysicalMaterial({
var defaultMat = new THREE.MeshPhysicalMaterial( {
roughness: 1,
envMap: cubeCamera.renderTarget.texture,
roughnessMap: rMap,
});
roughnessMap: rMap
} );

var boxProjectedMat = new THREE.MeshPhysicalMaterial({
color: new THREE.Color('#ffffff'),
var boxProjectedMat = new THREE.MeshPhysicalMaterial( {
color: new THREE.Color( '#ffffff' ),
roughness: 1,
envMap: cubeCamera.renderTarget.texture,
roughnessMap: rMap,
});
roughnessMap: rMap
} );

boxProjectedMat.onBeforeCompile = function ( shader ) {

shader.uniforms.cubeMapSize = { value: new THREE.Vector3( 200, 100, 100 ) };
shader.uniforms.cubeMapPos = { value: new THREE.Vector3( 0, -50, 0 ) };
shader.uniforms.cubeMapPos = { value: new THREE.Vector3( 0, - 50, 0 ) };
shader.uniforms.flipEnvMap.value = true;

//replace shader chunks with box projection chunks
Expand All @@ -377,8 +378,6 @@
envmapPhysicalParsReplace
);

materialShader = shader;

};

groundPlane = new THREE.Mesh( new THREE.PlaneBufferGeometry( 200, 100, 100 ), boxProjectedMat );
Expand All @@ -387,17 +386,22 @@
scene.add( groundPlane );

// walls
var diffuseTex = loader.load( 'textures/brick_diffuse.jpg', () => {
var diffuseTex = loader.load( 'textures/brick_diffuse.jpg', function () {

updateCubeMap();

} );
var bumpTex = loader.load( 'textures/brick_bump.jpg', () => {
var bumpTex = loader.load( 'textures/brick_bump.jpg', function () {

updateCubeMap();

} );
wallMat = new THREE.MeshPhysicalMaterial({

wallMat = new THREE.MeshPhysicalMaterial( {
map: diffuseTex,
bumpMap: bumpTex,
bumpScale: 0.3,
});
} );

var planeGeo = new THREE.PlaneBufferGeometry( 100, 100 );

Expand Down Expand Up @@ -437,27 +441,28 @@
var width = 50;
var height = 50;
var intensity = 10;
var blueRectLight = new THREE.RectAreaLight( 0xf3aaaa, intensity, width, height );

var blueRectLight = new THREE.RectAreaLight( 0xf3aaaa, intensity, width, height );
blueRectLight.position.set( 99, 5, 0 );
blueRectLight.lookAt( 0, 5, 0 );
scene.add( blueRectLight );

blueRectLightHelper = new THREE.RectAreaLightHelper( blueRectLight, 0xffffff );
var blueRectLightHelper = new THREE.RectAreaLightHelper( blueRectLight, 0xffffff );
blueRectLight.add( blueRectLightHelper );

var redRectLight = new THREE.RectAreaLight( 0x9aaeff, intensity, width, height );
var redRectLight = new THREE.RectAreaLight( 0x9aaeff, intensity, width, height );
redRectLight.position.set( - 99, 5, 0 );
redRectLight.lookAt( 0, 5, 0 );
scene.add( redRectLight );

redRectLightHelper = new THREE.RectAreaLightHelper( redRectLight, 0xffffff );
var redRectLightHelper = new THREE.RectAreaLightHelper( redRectLight, 0xffffff );
redRectLight.add( redRectLightHelper );

render();

}

function updateCubeMap () {
function updateCubeMap() {

//disable specular highlights on walls in the environment map
wallMat.roughness = 1;
Expand Down

0 comments on commit dbc2f0e

Please sign in to comment.