Skip to content

Commit

Permalink
removed stage light and environment intensity (google#727)
Browse files Browse the repository at this point in the history
  • Loading branch information
elalish authored Aug 28, 2019
1 parent 8ede28d commit c55e893
Show file tree
Hide file tree
Showing 6 changed files with 0 additions and 144 deletions.
36 changes: 0 additions & 36 deletions examples/lighting-and-environment.html
Original file line number Diff line number Diff line change
Expand Up @@ -216,42 +216,6 @@ <h4></h4>
</div>
</div>

<div class="sample">
<div id="demo-container-8" class="demo"></div>
<div class="content">
<div class="wrapper">
<div class="heading">
<h2 class="demo-title">Control stage lighting with <span class="attribute">stage-light-intensity</span></h2>
<h4></h4>
</div>
<example-snippet stamp-to="demo-container-8" highlight-as="html">
<template>
<model-viewer id="stage-light-demo" camera-controls stage-light-intensity="1" background-image="assets/whipple_creek_regional_park_04_1k.hdr" alt="A 3D model of a duck depicted within a forest with varying stage light intensity" src="assets/glTF-Sample-Models/2.0/Duck/glTF-Binary/Duck.glb"></model-viewer>
<script>
(() => {
const modelViewer = $('#stage-light-demo');
const time = performance.now();

const animate = (now) => {
modelViewer.stageLightIntensity = oscillate(0, 2, 4000, now - time);
requestAnimationFrame(animate);
};

animate();
})();
</script>
</template>
</example-snippet>

</div>
</div>
</div>






<div class="sample">
<div id="demo-container-9" class="demo"></div>
<div class="content">
Expand Down
13 changes: 0 additions & 13 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -177,14 +177,6 @@ <h3 class="grouping-title">Attributes</h3>
environment-image. Use environment-image to only set the reflection
without affecting the background.</p>
</li>
<li>
<div>environment-intensity</div>
<p>Controls the intensity of environmental lighting. There is
almost always light reflected from the environment, even when
background-image or environment-image are not set. The one exception
is for models with unlit materials. Set this value to 0 to hide the
environment entirely. Defaults to 1.</p>
</li>
<li>
<div>exposure</div>
<p>Controls the exposure of both the model and skybox, for use
Expand Down Expand Up @@ -279,11 +271,6 @@ <h3 class="grouping-title">Attributes</h3>
<p>Controls the opacity of the shadow. Set to 0 to turn off the
shadow entirely. Defaults to 0.</p>
</li>
<li>
<div>stage-light-intensity</div>
<p>Controls the intensity of the built-in scene lighting. Set to 0
to turn off the scene lighting entirely. Defaults to 0.</p>
</li>
<li>
<div>unstable-webxr</div>
<p>Enables the ability to view the model in AR via the
Expand Down
23 changes: 0 additions & 23 deletions src/features/environment.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,23 +21,18 @@ import {Constructor, deserializeUrl} from '../utilities.js';

export interface EnvironmentInterface {
environmentImage: string|null;
environmentIntensity: number;
backgroundImage: string|null;
backgroundColor: string;
shadowIntensity: number;
stageLightIntensity: number;
exposure: number;
}

const DEFAULT_BACKGROUND_COLOR = '#ffffff';
const DEFAULT_SHADOW_INTENSITY = 0.0;
const DEFAULT_EXPOSURE = 1.0;
const DEFAULT_STAGE_LIGHT_INTENSITY = 0.0;
const DEFAULT_ENVIRONMENT_INTENSITY = 1.0;

const $currentEnvironmentMap = Symbol('currentEnvironmentMap');
const $applyEnvironmentMap = Symbol('applyEnvironmentMap');
const $updateLighting = Symbol('updateLighting');
const $updateToneMapping = Symbol('updateToneMapping');
const $updateShadow = Symbol('updateShadow');
const $updateEnvironment = Symbol('updateEnvironment');
Expand All @@ -54,9 +49,6 @@ export const EnvironmentMixin = (ModelViewerElement:
})
environmentImage: string|null = null;

@property({type: Number, attribute: 'environment-intensity'})
environmentIntensity: number = DEFAULT_ENVIRONMENT_INTENSITY;

@property({
type: String,
attribute: 'background-image',
Expand All @@ -70,9 +62,6 @@ export const EnvironmentMixin = (ModelViewerElement:
@property({type: Number, attribute: 'shadow-intensity'})
shadowIntensity: number = DEFAULT_SHADOW_INTENSITY;

@property({type: Number, attribute: 'stage-light-intensity'})
stageLightIntensity: number = DEFAULT_STAGE_LIGHT_INTENSITY;

@property({
type: Number,
})
Expand All @@ -94,11 +83,6 @@ export const EnvironmentMixin = (ModelViewerElement:
this[$updateToneMapping]();
}

if (changedProperties.has('environmentIntensity') ||
changedProperties.has('stageLightIntensity')) {
this[$updateLighting]();
}

if (changedProperties.has('environmentImage') ||
changedProperties.has('backgroundImage') ||
changedProperties.has('backgroundColor') ||
Expand Down Expand Up @@ -194,7 +178,6 @@ export const EnvironmentMixin = (ModelViewerElement:
this[$scene].model.applyEnvironmentMap(this[$currentEnvironmentMap]);
this.dispatchEvent(new CustomEvent('environment-change'));

this[$updateLighting]();
this[$needsRender]();
}

Expand All @@ -207,12 +190,6 @@ export const EnvironmentMixin = (ModelViewerElement:
this[$scene].exposure = this.exposure;
this[$needsRender]();
}

private[$updateLighting]() {
const scene = this[$scene];
scene.configureStageLighting(this.stageLightIntensity);
scene.model.setEnvironmentMapIntensity(this.environmentIntensity);
}
}

return EnvironmentModelViewerElement;
Expand Down
25 changes: 0 additions & 25 deletions src/test/features/environment-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -301,11 +301,6 @@ suite('ModelViewerElementBase with EnvironmentMixin', () => {
expect(backgroundHasColor(scene, 'ff0077')).to.be.ok;
});

test('the directional light is not tinted', () => {
const lightColor = scene.shadowLight.color.getHexString().toLowerCase();
expect(lightColor).to.be.equal('ffffff');
});

suite('on an unlit model', () => {
setup(async () => {
let onLoad = waitForLoadAndEnvMap(scene, element, {
Expand Down Expand Up @@ -348,26 +343,6 @@ suite('ModelViewerElementBase with EnvironmentMixin', () => {
});
});

suite('stage-light-intensity', () => {
setup(async () => {
element.src = MODEL_URL;
document.body.appendChild(element);
await waitForEvent(element, 'load');
});

teardown(() => {
document.body.removeChild(element);
});

test('changes model scene light intensity', async () => {
const originalLightIntensity = scene.shadowLight.intensity;
element.stageLightIntensity = 0.5;
await timePasses();
const newLightIntensity = scene.shadowLight.intensity;
expect(newLightIntensity).to.be.greaterThan(originalLightIntensity);
});
});

suite('shadow-intensity', () => {
setup(async () => {
element.src = MODEL_URL;
Expand Down
33 changes: 0 additions & 33 deletions src/three-components/Model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,6 @@ const $currentScene = Symbol('currentScene');
/**
* An Object3D that can swap out its underlying
* model.
*
* @extends THREE.Object3D
*/
export default class Model extends Object3D {
private[$currentScene]: CacheRetainedScene|null = null;
Expand Down Expand Up @@ -59,8 +57,6 @@ export default class Model extends Object3D {
/**
* Returns a boolean indicating whether or not there is a
* loaded model attached.
*
* @return {Boolean}
*/
hasModel(): boolean {
return !!this.modelContainer.children.length;
Expand Down Expand Up @@ -91,34 +87,9 @@ export default class Model extends Object3D {
this.dispatchEvent({type: 'envmap-change', value: map});
}

setEnvironmentMapIntensity(intensity: number) {
const intensityIsNumber =
typeof intensity === 'number' && !(self as any).isNaN(intensity);

if (!intensityIsNumber) {
intensity = 1.0;
}

this.modelContainer.traverse(object => {
if (object && (object as Mesh).isMesh && (object as Mesh).material) {
const {material} = object as Mesh;
if (Array.isArray(material)) {
material.forEach(
material => (material as MeshStandardMaterial).envMapIntensity =
intensity);
} else {
((object as Mesh).material as MeshStandardMaterial).envMapIntensity =
intensity;
}
}
});
}

/**
* Pass in a THREE.Object3D to be controlled
* by this model.
*
* @param {THREE.Object3D}
*/
setObject(model: Object3D) {
this.clear();
Expand All @@ -127,10 +98,6 @@ export default class Model extends Object3D {
this.dispatchEvent({type: 'model-load'});
}

/**
* @param {String?} url
* @param {Function?} progressCallback
*/
async setSource(
url: string|null, progressCallback?: (progress: number) => void) {
if (!url || url === this.url) {
Expand Down
14 changes: 0 additions & 14 deletions src/three-components/ModelScene.ts
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,6 @@ export default class ModelScene extends Scene {
this.skyboxMesh = this.createSkyboxMesh();

this.add(this.pivot);
this.add(this.shadowLight);
this.pivot.add(this.model);

this.setSize(width, height);
Expand All @@ -129,9 +128,6 @@ export default class ModelScene extends Scene {

/**
* Sets the model via URL.
*
* @param {String?} source
* @param {Function?} progressCallback
*/
async setModelSource(
source: string|null, progressCallback?: (progress: number) => void) {
Expand Down Expand Up @@ -168,9 +164,6 @@ export default class ModelScene extends Scene {
/**
* Receives the size of the 2D canvas element to make according
* adjustments in the scene.
*
* @param {number} width
* @param {number} height
*/
setSize(width: number, height: number) {
if (width !== this.width || height !== this.height) {
Expand Down Expand Up @@ -232,14 +225,8 @@ export default class ModelScene extends Scene {
});
}

configureStageLighting(intensityScale: number) {
this.shadowLight.intensity = intensityScale;
this.isDirty = true;
}

/**
* Returns the size of the corresponding canvas element.
* @return {Object}
*/
getSize(): {width: number, height: number} {
return {width: this.width, height: this.height};
Expand Down Expand Up @@ -275,7 +262,6 @@ export default class ModelScene extends Scene {

/**
* Returns the current camera.
* @return {THREE.Camera}
*/
getCamera(): Camera {
return this.activeCamera;
Expand Down

0 comments on commit c55e893

Please sign in to comment.