123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304 |
- <!-- Licensed under a BSD license. See license.html for license -->
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
- <title>Three.js - Cleanup Loaded Files</title>
- <style>
- html, body {
- height: 100%;
- margin: 0;
- }
- #c {
- width: 100%;
- height: 100%;
- display: block;
- }
- #root {
- position: absolute;
- left: 0;
- top: 0;
- }
- </style>
- </head>
- <body>
- <canvas id="c"></canvas>
- </body>
- <script type="importmap">
- {
- "imports": {
- "three": "../../build/three.module.js",
- "three/addons/": "../../examples/jsm/"
- }
- }
- </script>
- <script type="module">
- import * as THREE from 'three';
- import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
- class ResourceTracker {
- constructor() {
- this.resources = new Set();
- }
- track( resource ) {
- if ( ! resource ) {
- return resource;
- }
- // handle children and when material is an array of materials or
- // uniform is array of textures
- if ( Array.isArray( resource ) ) {
- resource.forEach( resource => this.track( resource ) );
- return resource;
- }
- if ( resource.dispose || resource instanceof THREE.Object3D ) {
- this.resources.add( resource );
- }
- if ( resource instanceof THREE.Object3D ) {
- this.track( resource.geometry );
- this.track( resource.material );
- this.track( resource.children );
- } else if ( resource instanceof THREE.Material ) {
- // We have to check if there are any textures on the material
- for ( const value of Object.values( resource ) ) {
- if ( value instanceof THREE.Texture ) {
- this.track( value );
- }
- }
- // We also have to check if any uniforms reference textures or arrays of textures
- if ( resource.uniforms ) {
- for ( const value of Object.values( resource.uniforms ) ) {
- if ( value ) {
- const uniformValue = value.value;
- if ( uniformValue instanceof THREE.Texture ||
- Array.isArray( uniformValue ) ) {
- this.track( uniformValue );
- }
- }
- }
- }
- }
- return resource;
- }
- untrack( resource ) {
- this.resources.delete( resource );
- }
- dispose() {
- for ( const resource of this.resources ) {
- if ( resource instanceof THREE.Object3D ) {
- if ( resource.parent ) {
- resource.parent.remove( resource );
- }
- }
- if ( resource.dispose ) {
- resource.dispose();
- }
- }
- this.resources.clear();
- }
- }
- function main() {
- const canvas = document.querySelector( '#c' );
- const renderer = new THREE.WebGLRenderer( { antialias: true, canvas } );
- const fov = 75;
- const aspect = 2; // the canvas default
- const near = 0.1;
- const far = 5;
- const camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
- camera.position.z = 2;
- const scene = new THREE.Scene();
- scene.background = new THREE.Color( 'lightblue' );
- function addLight( ...pos ) {
- const color = 0xFFFFFF;
- const intensity = 2.5;
- const light = new THREE.DirectionalLight( color, intensity );
- light.position.set( ...pos );
- scene.add( light );
- }
- addLight( - 1, 2, 4 );
- addLight( 2, - 2, 3 );
- function frameArea( sizeToFitOnScreen, boxSize, boxCenter, camera ) {
- const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
- const halfFovY = THREE.MathUtils.degToRad( camera.fov * .5 );
- const distance = halfSizeToFitOnScreen / Math.tan( halfFovY );
- // compute a unit vector that points in the direction the camera is now
- // in the xz plane from the center of the box
- const direction = ( new THREE.Vector3() )
- .subVectors( camera.position, boxCenter )
- .multiply( new THREE.Vector3( 1, 0, 1 ) )
- .normalize();
- // move the camera to a position distance units way from the center
- // in whatever direction the camera was from the center already
- camera.position.copy( direction.multiplyScalar( distance ).add( boxCenter ) );
- // pick some near and far values for the frustum that
- // will contain the box.
- camera.near = boxSize / 100;
- camera.far = boxSize * 100;
- camera.updateProjectionMatrix();
- // point the camera to look at the center of the box
- camera.lookAt( boxCenter.x, boxCenter.y, boxCenter.z );
- }
- const gltfLoader = new GLTFLoader();
- function loadGLTF( url ) {
- return new Promise( ( resolve, reject ) => {
- gltfLoader.load( url, resolve, undefined, reject );
- } );
- }
- function waitSeconds( seconds = 0 ) {
- return new Promise( resolve => setTimeout( resolve, seconds * 1000 ) );
- }
- const fileURLs = [
- 'resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf', /* threejs.org: url */
- 'resources/models/3dbustchallange_submission/scene.gltf', /* threejs.org: url */
- 'resources/models/mountain_landscape/scene.gltf', /* threejs.org: url */
- 'resources/models/simple_house_scene/scene.gltf', /* threejs.org: url */
- ];
- async function loadFiles() {
- for ( ;; ) {
- for ( const url of fileURLs ) {
- const resMgr = new ResourceTracker();
- const track = resMgr.track.bind( resMgr );
- const gltf = await loadGLTF( url );
- const root = track( gltf.scene );
- scene.add( root );
- // compute the box that contains all the stuff
- // from root and below
- const box = new THREE.Box3().setFromObject( root );
- const boxSize = box.getSize( new THREE.Vector3() ).length();
- const boxCenter = box.getCenter( new THREE.Vector3() );
- // set the camera to frame the box
- frameArea( boxSize * 1.1, boxSize, boxCenter, camera );
- await waitSeconds( 2 );
- renderer.render( scene, camera );
- resMgr.dispose();
- await waitSeconds( 1 );
- }
- }
- }
- loadFiles();
- function resizeRendererToDisplaySize( renderer ) {
- const canvas = renderer.domElement;
- const width = canvas.clientWidth;
- const height = canvas.clientHeight;
- const needResize = canvas.width !== width || canvas.height !== height;
- if ( needResize ) {
- renderer.setSize( width, height, false );
- }
- return needResize;
- }
- function render() {
- if ( resizeRendererToDisplaySize( renderer ) ) {
- const canvas = renderer.domElement;
- camera.aspect = canvas.clientWidth / canvas.clientHeight;
- camera.updateProjectionMatrix();
- }
- renderer.render( scene, camera );
- requestAnimationFrame( render );
- }
- requestAnimationFrame( render );
- }
- main();
- </script>
- </html>
|