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

Examples: Clean up #11257

Merged
merged 2 commits into from
Apr 29, 2017
Merged

Examples: Clean up #11257

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d45565b
Examples: Clean up
Mugen87 Apr 29, 2017
8717b64
Examples: webgl_lights_rectarealight revert camera settings
Mugen87 Apr 29, 2017
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
134 changes: 66 additions & 68 deletions examples/webgl_lights_rectarealight.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,9 @@

<script src="../build/three.js"></script>
<script src="js/lights/RectAreaLightUniformsLib.js"></script>

<script src="../examples/js/libs/dat.gui.min.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/Detector.js"></script>

<script>
Expand All @@ -53,11 +53,11 @@

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var rnd = new THREE.WebGLRenderer();
var cam = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
var orb = new THREE.OrbitControls( cam, rnd.domElement );
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
var controls = new THREE.OrbitControls( camera, renderer.domElement );

var scn = new THREE.Scene();
var scene = new THREE.Scene();
var origin = new THREE.Object3D();

var matStdParams = {
Expand All @@ -84,48 +84,59 @@
var rectLightHelper;

var ray = new THREE.Raycaster();
var mouseDown = new THREE.Vector2();
var mouse = new THREE.Vector2();

var gui, guiElements;
var param = {};
var stats;

init();
animate();

function init() {

var gl = rnd.context;
var gl = renderer.context;

// Check for float-RT support
// TODO (abelnation): figure out fall-back for float textures
if (!gl.getExtension("OES_texture_float")) {
alert("OES_texture_float not supported");
throw "missing webgl extension";

if ( ! gl.getExtension( 'OES_texture_float' ) ) {

alert( 'OES_texture_float not supported' );
throw 'missing webgl extension';

}

if (!gl.getExtension("OES_texture_float_linear")) {
alert("OES_texture_float_linear not supported");
throw "missing webgl extension";
if ( ! gl.getExtension('OES_texture_float_linear' ) ) {

alert( 'OES_texture_float_linear not supported' );
throw 'missing webgl extension';

}

rnd.shadowMap.enabled = true;
rnd.shadowMap.type = THREE.PCFSoftShadowMap;
rnd.gammaInput = true;
rnd.gammaOutput = true;
rnd.antialias = true;
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.antialias = true;
document.body.appendChild( renderer.domElement );

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

cam.position.set( 0, 20, 45 );
camera.position.set( 0, 20, 45 );

rectLight = new THREE.RectAreaLight( 0xffffff, 100, 10, 10 );
rectLight.position.set( 5, 5, 0 );

// TODO: ensure RectAreaLight handles target param correctly

rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
scn.add( rectLightHelper );
scene.add( rectLightHelper );

// TODO (abelnation): rect light shadow

scn.add( cam );
scn.add( origin );
scene.add( camera );
scene.add( origin );

matStdFloor.color.set( 0x808080 );
matStdObjects.color.set( 0xA00000 );
Expand All @@ -137,48 +148,50 @@

mshStdSphere.castShadow = true;
mshStdSphere.receiveShadow = true;
mshStdSphere.position.set( -5, 5, 0 );
mshStdSphere.position.set( - 5, 5, 0 );

mshStdKnot.position.set( 5, 5, 0 );
mshStdKnot.castShadow = true;
mshStdKnot.receiveShadow = true;

scn.add( mshStdFloor );
scn.add( mshStdBox );
scn.add( mshStdSphere );
scn.add( mshStdKnot );

scn.add( amb );
scene.add( mshStdFloor );
scene.add( mshStdBox );
scene.add( mshStdSphere );
scene.add( mshStdKnot );
scene.add( amb );
scene.add( rectLight );

scn.add( rectLight );
controls.target.copy( mshStdBox.position );
controls.update();

document.body.appendChild( rnd.domElement );

onResize();

orb.target.copy( mshStdBox.position );
orb.update();
buildGui();

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

}

function onResize() {

rnd.setSize( window.innerWidth, window.innerHeight );
cam.aspect = ( window.innerWidth / window.innerHeight );
cam.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = ( window.innerWidth / window.innerHeight );
camera.updateProjectionMatrix();

}

function tick() {
function animate() {

requestAnimationFrame( animate );

if ( param.motion ) {

if ( param.motion )
update();
rectLightHelper.update();

}

render();
renderer.render( scene, camera );

requestAnimationFrame( tick );
stats.update();

}

Expand Down Expand Up @@ -208,22 +221,11 @@

}

function clearGui() {

if ( gui ) gui.destroy();

gui = new dat.GUI();
var gStyle = gui.domElement.style;
gStyle.position = "absolute";
gStyle.top = "48px";

gui.open();

}

function buildGui() {

clearGui();
var gui = new dat.GUI( { width: 300 } );
gui.open();

param = {
motion: true,
Expand Down Expand Up @@ -261,13 +263,13 @@

} );

lightFolder.add( param, 'intensity', 0.0, 400.0 ).onChange( function ( val ) {
lightFolder.add( param, 'intensity', 0.0, 400 ).onChange( function ( val ) {

rectLight.intensity = val;

} );

lightFolder.add( param, 'ambient', 0.0, 0.05 ).onChange( function ( val ) {
lightFolder.add( param, 'ambient', 0.0, 1 ).step( 0.01 ).onChange( function ( val ) {

amb.intensity = val;

Expand All @@ -289,15 +291,15 @@

} );

standardFolder.add( param, 'roughness', 0.0, 1.0 ).onChange( function ( val ) {
standardFolder.add( param, 'roughness', 0.0, 1.0 ).step( 0.01 ).onChange( function ( val ) {

matStdObjects.roughness = val;
matStdFloor.roughness = val;

} );

// TODO (abelnation): use env map to reflect metal property
standardFolder.add( param, 'metalness', 0.0, 1.0 ).onChange( function ( val ) {
standardFolder.add( param, 'metalness', 0.0, 1.0 ).step( 0.01 ).onChange( function ( val ) {

matStdObjects.metalness = val;
matStdFloor.metalness = val;
Expand All @@ -311,10 +313,6 @@

}

init();
buildGui();
tick();

</script>
</body>
</html>