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

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

代码语言：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 );
                                bul.........完整代码请登录后点击上方下载按钮下载查看