@inweb/viewer-three
Version:
JavaScript library for rendering CAD and BIM files in a browser using Three.js
214 lines (172 loc) • 7.2 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('three'), require('@inweb/viewer-three')) :
typeof define === 'function' && define.amd ? define(['three', '@inweb/viewer-three'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.THREE, global.ODA.Three));
})(this, (function (three, viewerThree) { 'use strict';
/**
* This class represents a scene with a basic room setup that can be used as
* input for {@link PMREMGenerator#fromScene}. The resulting PMREM represents the room's
* lighting and can be used for Image Based Lighting by assigning it to {@link Scene#environment}
* or directly as an environment map to PBR materials.
*
* The implementation is based on the [EnvironmentScene](https://github.com/google/model-viewer/blob/master/packages/model-viewer/src/three-components/EnvironmentScene.ts)
* component from the `model-viewer` project.
*
* ```js
* const environment = new RoomEnvironment();
* const pmremGenerator = new THREE.PMREMGenerator( renderer );
*
* const envMap = pmremGenerator.fromScene( environment ).texture;
* scene.environment = envMap;
* ```
*
* @augments Scene
* @three_import import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
*/
class RoomEnvironment extends three.Scene {
constructor() {
super();
const geometry = new three.BoxGeometry();
geometry.deleteAttribute( 'uv' );
const roomMaterial = new three.MeshStandardMaterial( { side: three.BackSide } );
const boxMaterial = new three.MeshStandardMaterial();
const mainLight = new three.PointLight( 0xffffff, 900, 28, 2 );
mainLight.position.set( 0.418, 16.199, 0.300 );
this.add( mainLight );
const room = new three.Mesh( geometry, roomMaterial );
room.position.set( -0.757, 13.219, 0.717 );
room.scale.set( 31.713, 28.305, 28.591 );
this.add( room );
const boxes = new three.InstancedMesh( geometry, boxMaterial, 6 );
const transform = new three.Object3D();
// box1
transform.position.set( -10.906, 2.009, 1.846 );
transform.rotation.set( 0, -0.195, 0 );
transform.scale.set( 2.328, 7.905, 4.651 );
transform.updateMatrix();
boxes.setMatrixAt( 0, transform.matrix );
// box2
transform.position.set( -5.607, -0.754, -0.758 );
transform.rotation.set( 0, 0.994, 0 );
transform.scale.set( 1.970, 1.534, 3.955 );
transform.updateMatrix();
boxes.setMatrixAt( 1, transform.matrix );
// box3
transform.position.set( 6.167, 0.857, 7.803 );
transform.rotation.set( 0, 0.561, 0 );
transform.scale.set( 3.927, 6.285, 3.687 );
transform.updateMatrix();
boxes.setMatrixAt( 2, transform.matrix );
// box4
transform.position.set( -2.017, 0.018, 6.124 );
transform.rotation.set( 0, 0.333, 0 );
transform.scale.set( 2.002, 4.566, 2.064 );
transform.updateMatrix();
boxes.setMatrixAt( 3, transform.matrix );
// box5
transform.position.set( 2.291, -0.756, -2.621 );
transform.rotation.set( 0, -0.286, 0 );
transform.scale.set( 1.546, 1.552, 1.496 );
transform.updateMatrix();
boxes.setMatrixAt( 4, transform.matrix );
// box6
transform.position.set( -2.193, -0.369, -5.547 );
transform.rotation.set( 0, 0.516, 0 );
transform.scale.set( 3.875, 3.487, 2.986 );
transform.updateMatrix();
boxes.setMatrixAt( 5, transform.matrix );
this.add( boxes );
// -x right
const light1 = new three.Mesh( geometry, createAreaLightMaterial( 50 ) );
light1.position.set( -16.116, 14.37, 8.208 );
light1.scale.set( 0.1, 2.428, 2.739 );
this.add( light1 );
// -x left
const light2 = new three.Mesh( geometry, createAreaLightMaterial( 50 ) );
light2.position.set( -16.109, 18.021, -8.207 );
light2.scale.set( 0.1, 2.425, 2.751 );
this.add( light2 );
// +x
const light3 = new three.Mesh( geometry, createAreaLightMaterial( 17 ) );
light3.position.set( 14.904, 12.198, -1.832 );
light3.scale.set( 0.15, 4.265, 6.331 );
this.add( light3 );
// +z
const light4 = new three.Mesh( geometry, createAreaLightMaterial( 43 ) );
light4.position.set( -0.462, 8.89, 14.520 );
light4.scale.set( 4.38, 5.441, 0.088 );
this.add( light4 );
// -z
const light5 = new three.Mesh( geometry, createAreaLightMaterial( 20 ) );
light5.position.set( 3.235, 11.486, -12.541 );
light5.scale.set( 2.5, 2.0, 0.1 );
this.add( light5 );
// +y
const light6 = new three.Mesh( geometry, createAreaLightMaterial( 100 ) );
light6.position.set( 0.0, 20.0, 0.0 );
light6.scale.set( 1.0, 0.1, 1.0 );
this.add( light6 );
}
/**
* Frees internal resources. This method should be called
* when the environment is no longer required.
*/
dispose() {
const resources = new Set();
this.traverse( ( object ) => {
if ( object.isMesh ) {
resources.add( object.geometry );
resources.add( object.material );
}
} );
for ( const resource of resources ) {
resource.dispose();
}
}
}
function createAreaLightMaterial( intensity ) {
// create an emissive-only material. see #31348
const material = new three.MeshLambertMaterial( {
color: 0x000000,
emissive: 0xffffff,
emissiveIntensity: intensity
} );
return material;
}
///////////////////////////////////////////////////////////////////////////////
// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
// All rights reserved.
//
// This software and its documentation and related materials are owned by
// the Alliance. The software may only be incorporated into application
// programs owned by members of the Alliance, subject to a signed
// Membership Agreement and Supplemental Software License Agreement with the
// Alliance. The structure and organization of this software are the valuable
// trade secrets of the Alliance and its suppliers. The software is also
// protected by copyright law and international treaty provisions. Application
// programs incorporating this software must include the following statement
// with their copyright notices:
//
// This application incorporates Open Design Alliance software pursuant to a
// license agreement with Open Design Alliance.
// Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
// All rights reserved.
//
// By use of this software, its documentation or related materials, you
// acknowledge and accept the above terms.
///////////////////////////////////////////////////////////////////////////////
class RoomEnvironmentComponent {
constructor(viewer) {
this.viewer = viewer;
const environment = new RoomEnvironment();
const pmremGenerator = new three.PMREMGenerator(this.viewer.renderer);
this.viewer.scene.environment = pmremGenerator.fromScene(environment).texture;
environment.dispose();
}
dispose() {
this.viewer.scene.environment = undefined;
}
}
viewerThree.components.registerComponent("LightComponent", (viewer) => new RoomEnvironmentComponent(viewer));
}));
//# sourceMappingURL=RoomEnvironmentComponent.js.map