How to illuminate objects in the scene with textures?

Questions
1

I have a glb file that contains a building model。
I don’t want to use any lights, but rather use textures to illuminate objects in the scene.
But it failed. The building model is black, and I haven’t figured out where the problem lies?

02.PNG
02.PNG1887×914 71 KB

I used an editor to load the model and also used an image as the background and environment map.
This looks very good.
01
011920×870 95.1 KB

I want your help, thank you!
This is the code:

<!-- 演示场景及物体背景 使用图片给物体打光-->
<template>
    <div ref="container"></div>
</template>

<script>
    import * as THREE from "three";
    // 轨道控制器
    import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js";
    // GLTF加载
    import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader.js";
    // 解析器
    import {DRACOLoader} from "three/examples/jsm/loaders/DRACOLoader";
    import Stats from 'three/examples/jsm/libs/stats.module.js';

    let scene, camera, renderer, control, cube;
    let gui, stats;
    let pmremGenerator, envMap;

    export default {
        mounted() {
            this.init();

            this.render();

            // 监听窗口变化
            window.addEventListener("resize", () => {
                // 重置渲染器宽高比
                renderer.setSize(window.innerWidth, window.innerHeight);
                // 重置相机宽高比
                camera.aspect = window.innerWidth / window.innerHeight;
                // 更新相机投影矩阵
                camera.updateProjectionMatrix();
            });
        },
        methods: {
            // 场景
            initScene() {
                scene = new THREE.Scene();
                scene.background = new THREE.Color('#808080'); // 使用灰色背景
            },
            // 相机
            initCamera() {
                camera = new THREE.PerspectiveCamera(
                    75,
                    window.innerWidth / window.innerHeight,
                    0.1,
                    1000
                );
                camera.position.z = 64;
            },
            // 渲染
            initRenderer() {
                renderer = new THREE.WebGLRenderer();
                renderer.setSize(window.innerWidth, window.innerHeight);
                this.$refs.container.appendChild(renderer.domElement);

                // 创建PMREMGenerator对象并编译equirectangular shader
                pmremGenerator = new THREE.PMREMGenerator(renderer);
                pmremGenerator.compileEquirectangularShader();
            },
            // 轨道控制器
            initControl() {
                control = new OrbitControls(camera, renderer.domElement);
            },

            loadTexture() {
                new THREE.TextureLoader().load('textures/sun_sdr_rendition.jpg', (texture) => {

                    // 创建环境贴图
                    envMap = pmremGenerator.fromEquirectangular(texture).texture;
                    // 给场景添加背景
                    scene.background = envMap;
                    // 给场景中的所有物体添加默认的环境贴图
                    scene.environment = envMap;

                    // 解析器(用于解析经过压缩过的glb文件)
                    const dracoLoader = new DRACOLoader();
                    dracoLoader.setDecoderPath('./draco/');

                    const loader = new GLTFLoader();
                    loader.setDRACOLoader(dracoLoader);
                    loader.load("chmy.glb", (glb) => {

                            glb.scene.traverse((child) => {
                                if (child.isMesh) {

                                    // 将环境贴图应用到模型的材质中
                                    child.material.envMap = envMap;
                                    child.material.envMapIntensity = 1; // 可选：设置环境贴图的强度
                                    child.material.needsUpdate = true;
                                }
                            });

                            scene.add(glb.scene);
                            this.render();
                        },
                        function (xhr) {
                            // 加载进度
                            // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
                        },
                        function (error) {
                            console.log("An error happened:", error);
                        }
                    );

                });
            },
            // Stats
            initStats() {
                stats = new Stats();
                this.$refs.container.appendChild(stats.dom);
            },
            init() {
                // 场景
                this.initScene();
                // 相机
                this.initCamera();
                // 渲染
                this.initRenderer();
                // 控制器
                this.initControl();
                this.loadTexture();
                // Stats
                this.initStats();
            },

            render() {
                requestAnimationFrame(this.render);
                stats.begin();
                renderer.render(scene, camera);
                stats.end();
            }
        }
    };
</script>
2
  1. You don’t need pmremGenerator.fromEquirectangular, its automatic.
  2. If you’re not using HDR / EXR textures, all you really need is (a) a Texture loader, (b) correct encoding / colorSpace, (c) correct mapping, ex (code in the bottom right):
const loader = new THREE.TextureLoader();

scene.environment = loader.load('./castle-2-HD.jpg', texture => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  texture.encoding = THREE.sRGBEncoding;
});

For three r151 and newer, use colorSpace instead: texture.colorSpace = THREE.SRGBColorSpace;