threejs 小白学习方法

比如官网的这个demo 点右下角进去源码

我们会发现 它里面并没有光 light等字眼 也没有 hdr 然后场景还是这么亮 这下就可以针对代码查看了

然后整体代码贴出来先

<script type="module">

            import * as THREE from 'three';

            import Stats from 'three/addons/libs/stats.module.js';

            import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
            import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

            import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
            import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

            let mixer;
            //  动画控制器

            const clock = new THREE.Clock();
            const container = document.getElementById( 'container' );

            const stats = new Stats();//性能检测插件
            container.appendChild( stats.dom );
    
            //渲染器   threejs场景渲染必需品
            const renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.outputEncoding = THREE.sRGBEncoding;
            container.appendChild( renderer.domElement );

            const pmremGenerator = new THREE.PMREMGenerator( renderer );

            const scene = new THREE.Scene();//场景
            scene.background = new THREE.Color( 0xbfe3dd );//背景
            scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;
            //查看一下   environment啥意思   
            const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
            camera.position.set( 5, 2, 8 );
            //controls控制器   鼠标旋转拖拽等操作    里面包含多种属性  可自行百度
            const controls = new OrbitControls( camera, renderer.domElement );
            controls.target.set( 0, 0.5, 0 );
            controls.update();
            controls.enablePan = false;
            controls.enableDamping = true;
            //draco模型压缩处理  
            const dracoLoader = new DRACOLoader();
            dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
            //加载模型  gltf模型
            const loader = new GLTFLoader();
            loader.setDRACOLoader( dracoLoader );
            loader.load( 'models/gltf/LittlestTokyo.glb', function ( gltf ) {

                const model = gltf.scene;
                model.position.set( 1, 1, 0 );
                model.scale.set( 0.01, 0.01, 0.01 );
                scene.add( model );

                mixer = new THREE.AnimationMixer( model );
                mixer.clipAction( gltf.animations[ 0 ] ).play();

                animate();

            }, undefined, function ( e ) {

                console.error( e );

            } );

            //窗口变化 自适应函数 
            window.onresize = function () {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            };

            //动画函数  一秒60帧
            function animate() {

                requestAnimationFrame( animate );

                const delta = clock.getDelta();
                //动画控制器  animate函数里面更新
                mixer.update( delta );

                controls.update();

                stats.update();

                renderer.render( scene, camera );

            }


        </script>

发现并没有灯光 然后代码注释了一下 看到enviorment不知道是啥 百度一下 environment

然后我们知道了 原来场景的光源来自这里 这下就可以放到自己项目里面了 试一下效果

跟他有关的代码全部引入

这里做一个代码提出

import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';






const pmremGenerator = new THREE.PMREMGenerator( renderer );

 const scene = new THREE.Scene();
 scene.background = new THREE.Color( 0xbfe3dd );
 scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;

看到这里会不会发现 掌握官网demo 就等于掌握项目