前言：threejs入门，场景贴图、模型引入

技术：vue3+three@0.165.0

依赖引入

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';

代码

let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000),
    scene = new THREE.Scene(),
    renderer = new THREE.WebGLRenderer({ antialias: true }),
    controls；

// 初始化场景
const initScene = () => {
    setEnvMap();
    loadGltf('three/01.glb', [0, -20, 0], [0, 0, 0], [0.1, 0.1, 0.1], 'three/01.jpg')
    loadGltf('three/02.glb', [-20, -19, 0], [0, 0, 0], [10, 10, 10], 'three/02.png')
}

// 场景设置
const setEnvMap = () => {
    new RGBELoader().load(`three/001.hdr`, (texture) => {
        texture.mapping = THREE.EquirectangularRefractionMapping;
        scene.background = texture;
        scene.environment = texture;
    },
        // 加载失败的回调
        (xhr) => {
            console.error(xhr);
        }
    );
}

// 加载gltf/glb模型
const loadGltf = (url, position, rotation, scale, textureUrl) => {
    const gltfLoader = new GLTFLoader();
    gltfLoader.load(url, (gltf) => {
        let model = gltf.scene;
        if (textureUrl) {
            const textureLoader = new THREE.TextureLoader();
            const texture = textureLoader.load(textureUrl);
            model.traverse((child) => {
                if (child instanceof THREE.Mesh) {
                    child.material.map = texture;
                }
            });
        }

        model.position.set(position[0], position[1], position[2]);
        model.rotation.set(rotation[0], rotation[1], rotation[2]);
        model.scale.set(scale[0], scale[1], scale[2]);
        scene.add(model);
    });
}

//  相机
const initCamera = () => {
    camera.position.set(0, 28, 10);
    camera.lookAt(0, 0, 1);
}

// 渲染器
const initRenderer = () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
}

// 控制器
const initControls = () => {
    controls = new OrbitControls(camera, renderer.domElement);
    controls.dampingFactor = 0.25;
    controls.minDistance = 10;
    controls.maxDistance = 50;
    controls.maxPolarAngle = Math.PI / 2;
    controls.minPolarAngle = Math.PI / 4;
    controls.target.set(0, 0, 0);
    controls.update();
}

// 渲染
const render = () => {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    controls.update();
    for (let key in renderFunc) {
        renderFunc[key]();
    }
}