three三维灯光移动阴影效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three三维灯光移动阴影效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
	<head>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

	</head>
	<body>

		<div id="container"></div>
		<div id="info">
		
			Real world scale: Brick cube is 50 cm in size. Globe is 50 cm in diameter.<br/>
			Reinhard inline tonemapping with real-world light falloff (decay = 2).
		</div>

		<!-- Import maps polyfill -->
		<!-- Remove this when import maps will be widely supported -->
		<script async type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.3.6.js"></script>


		<script type="importmap">
			{
				"imports": {
					"three": "//repo.bfw.wiki/bfwtool/build/three.module.js"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';

			import Stats from '//repo.bfw.wiki/bfwtool/examples/jsm/libs/stats.module.js';
			import { GUI } from '//repo.bfw.wiki/bfwtool/examples/jsm/libs/lil-gui.module.min.js';

			import { OrbitControls } from '//repo.bfw.wiki/bfwtool/examples/jsm/controls/OrbitControls.js';

			let camera, scene, renderer, bulbLight, bulbMat, hemiLight, stats;
			let ballMat, cubeMat, floorMat;

			let previousShadowMap = false;


			// ref for lumens: http://www.power-sure.com/lumens.htm
			const bulbLuminousPowers = {
				"110000 lm (1000W)": 110000,
				"3500 lm (300W)": 3500,
				"1700 lm (100W)": 1700,
				"800 lm (60W)": 800,
				"400 lm (40W)": 400,
				"180 lm (25W)": 180,
				"20 lm (4W)": 20,
				"Off": 0
			};

			// ref for solar irradiances: https://en.wikipedia.org/wiki/Lux
			const hemiLuminousIrradiances = {
				"0.0001 lx (Moonless Night)": 0.0001,
				"0.002 lx (Night Airglow)": 0.002,
				"0.5 lx (Full Moon)": 0.5,
				"3.4 lx (City Twilight)": 3.4,
				"50 lx (Living Room)": 50,
				"100 lx (Very Overcast)": 100,
				"350 lx (Office Room)": 350,
				"400 lx (Sunrise/Sunset)": 400,
				"1000 lx (Overcast)": 1000,
				"18000 lx (Daylight)": 18000,
				"50000 lx (Direct Sun)": 50000
			};

			const params = {
				shadows: true,
				exposure: 0.68,
				bulbPower: Object.keys( bulbLuminousPowers )[ 4 ],
				hemiIrradiance: Object.keys( hemiLuminousIrradiances )[ 0 ]
			};

			init();
			animate();

			function init() {

				const container = document.getElementById( 'container' );

				stats = new Stats();
				container.appendChild( stats.dom );


				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 100 );
				camera.position.x = - 4;
				camera.position.z = 4;
				camera.position.y = 2;

				scene = new THREE.Scene();

				const bulbGeometry = new THREE.SphereGeometry( 0.02, 16, 8 );
				bulbLight = new THREE.PointLight( 0xffee88, 1, 100, 2 );

				bulbMat = new THREE.MeshStandardMaterial( {
					emissive: 0xffffee,
					emissiveIntensity: 1,
					color: 0x000000
				} );
				bulbLight.add( new THREE.Mesh( bulbGeometry, bulbMat ) );
				bulbLight.position.set( 0, 2, 0 );
				bulbLight.castShadow = true;
				scene.add( bulbLight );

				hemiLight = new THREE.HemisphereLight( 0xddeeff, 0x0f0e0d, 0.02 );
				scene.add( hemiLight );

				floorMat = new THREE.MeshStandardMaterial( {
					roughness: 0.8,
					color: 0xffffff,
					metalness: 0.2,
					bumpScale: 0.0005
				} );
				const textureLoader = new THREE.TextureLoader();
				textureLoader.load( "//repo.bfw.wiki/bfwtool/examples/textures/hardwood2_diffuse.jpg", function ( map ) {

					map.wrapS = THREE.RepeatWrapping;
					map.wrapT = THREE.RepeatWrapping;
					map.anisotropy = 4;
					map.repeat.set( 10, 24 );
					map.encoding = THREE.sRGBEncoding;
					floorMat.map = map;
					floorMat.needsUpdate = true;

				} );
				textureLoader.load( "//repo.bfw.wiki/bfwtool/examples/textures/hardwood2_bump.jpg", function ( map ) {

					map.wrapS = THREE.RepeatWrapping;
					map.wrapT = THREE.RepeatWrapping;
					map.anisotropy = 4;
					map.repeat.set( 10, 24 );
					floorMat.bumpMap = map;
					floorMat.needsUpdate = true;

				} );
				textureLoader.load( "//repo.bfw.wiki/bfwtool/examples/textures/hardwood2_roughness.jpg", function ( map ) {

					map.wrapS = THREE.RepeatWrapping;
					map.wrapT = THREE.RepeatWrapping;
					map.anisotropy = 4;
					map.repeat.s.........完整代码请登录后点击上方下载按钮下载查看