123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205 |
- import * as THREE from 'three';
- import { GLTFLoader } from '../../examples/jsm/loaders/GLTFLoader.js';
- import { threejsLessonUtils } from './threejs-lesson-utils.js';
- {
- const darkColors = {
- background: '#333',
- };
- const lightColors = {
- background: '#FFF',
- };
- const darkMatcher = window.matchMedia( '(prefers-color-scheme: dark)' );
- function fogExample( scene, fog, update ) {
- scene.fog = fog;
- const width = 4;
- const height = 3;
- const depth = 10;
- const geometry = new THREE.BoxGeometry( width, height, depth );
- const material = new THREE.MeshPhongMaterial( { color: 'hsl(130,50%,50%)' } );
- return {
- obj3D: new THREE.Mesh( geometry, material ),
- update,
- };
- }
- function houseScene( props, fogInHouse ) {
- const { scene, camera } = props;
- scene.background = new THREE.Color( '#FFF' );
- camera.far = 200;
- const loader = new GLTFLoader();
- const settings = {
- shininess: 0,
- roughness: 1,
- metalness: 0,
- };
- loader.load( '/manual/examples/resources/models/simple_house_scene/scene.gltf', ( gltf ) => {
- const hackGeometry = new THREE.CircleGeometry( 0.5, 32 );
- const box = new THREE.Box3();
- const size = new THREE.Vector3();
- const center = new THREE.Vector3();
- const materials = new Set();
- gltf.scene.traverse( ( node ) => {
- const material = node.material;
- if ( material ) {
- // hack in the bottom of the trees since I don't have
- // the model file
- if ( node.name === 'mesh_11' || node.name === 'mesh_6' ) {
- node.updateWorldMatrix( true, false );
- box.setFromObject( node );
- box.getSize( size );
- box.getCenter( center );
- const hackMesh = new THREE.Mesh( hackGeometry, node.material );
- scene.add( hackMesh );
- hackMesh.position.copy( center );
- hackMesh.rotation.x = Math.PI * 0.5;
- hackMesh.position.y -= size.y / 2;
- hackMesh.scale.set( size.x, size.z, 1 );
- }
- ( Array.isArray( material ) ? material : [ material ] ).forEach( ( material ) => {
- if ( ! materials.has( material ) ) {
- materials.add( material );
- for ( const [ key, value ] of Object.entries( settings ) ) {
- if ( material[ key ] !== undefined ) {
- material[ key ] = value;
- }
- }
- if ( ! fogInHouse && material.name.startsWith( 'fogless' ) ) {
- material.fog = false;
- }
- }
- } );
- }
- } );
- scene.add( gltf.scene );
- } );
- camera.fov = 45;
- camera.position.set( 0.4, 1, 1.7 );
- camera.lookAt( 1, 1, 0.7 );
- const color = 0xFFFFFF;
- const near = 1.5;
- const far = 5;
- scene.fog = new THREE.Fog( color, near, far );
- const light = new THREE.PointLight( 0xFFFFFF, 1 );
- light.position.copy( camera.position );
- light.position.y += 0.2;
- scene.add( light );
- const target = [ 1, 1, 0.7 ];
- return {
- trackball: false,
- obj3D: new THREE.Object3D(),
- update: ( time ) => {
- camera.lookAt( target[ 0 ] + Math.sin( time * .25 ) * .5, target[ 1 ], target[ 2 ] );
- },
- };
- }
- function createLightDarkFogUpdater( fog ) {
- return function () {
- const isDarkMode = darkMatcher.matches;
- const colors = isDarkMode ? darkColors : lightColors;
- fog.color.set( colors.background );
- };
- }
- threejsLessonUtils.addDiagrams( {
- fog: {
- create( props ) {
- const { scene } = props;
- const color = 0xFFFFFF;
- const near = 12;
- const far = 18;
- const fog = new THREE.Fog( color, near, far );
- return fogExample( scene, fog, createLightDarkFogUpdater( fog ) );
- },
- },
- fogExp2: {
- create( props ) {
- const { scene } = props;
- const color = 0xFFFFFF;
- const density = 0.1;
- const fog = new THREE.FogExp2( color, density );
- return fogExample( scene, fog, createLightDarkFogUpdater( fog ) );
- },
- },
- fogBlueBackgroundRed: {
- create( props ) {
- const { scene } = props;
- scene.background = new THREE.Color( '#F00' );
- const color = '#00F';
- const near = 12;
- const far = 18;
- return fogExample( scene, new THREE.Fog( color, near, far ) );
- },
- },
- fogBlueBackgroundBlue: {
- create( props ) {
- const { scene } = props;
- scene.background = new THREE.Color( '#00F' );
- const color = '#00F';
- const near = 12;
- const far = 18;
- return fogExample( scene, new THREE.Fog( color, near, far ) );
- },
- },
- fogHouseAll: {
- create( props ) {
- return houseScene( props, true );
- },
- },
- fogHouseInsideNoFog: {
- create( props ) {
- return houseScene( props, false );
- },
- },
- } );
- }
|