首页 > 网络编程 > JavaScript > javascript技巧 > Three.js 3D模型展示与交互

Three.js 3D模型展示与交互实现完整代码

2025-08-11 10:00:34 作者：取什名字

Three.js是一个开源的WebGL库,它提供了一套易于使用的API来创建和显示3D图形在网页上,这篇文章主要介绍了Three.js 3D模型展示与交互实现的相关资料,需要的朋友可以参考下

前言

本文将详细解析一个基于Three.js的3D模型展示与交互系统的完整实现代码，该系统包含了模型加载、环境光照、用户交互、响应式设计等多个功能模块。

一、代码概述

这段代码实现了一个完整的3D产品展示系统，主要功能包括：

创建3D场景并设置正交相机
加载并显示3D模型
实现模型旋转交互(鼠标拖拽和惯性效果)
添加加载动画
实现响应式布局
自定义光标效果

二、核心代码解析

1. 场景初始化

这部分代码初始化了Three.js的核心组件：

const scene = new THREE.Scene();
const boxElement = document.querySelector(".productModel_box");
const width = boxElement.clientWidth;
const height = boxElement.clientHeight;

// 设置正交相机
const aspect = width / height;
const frustumSize = 10;
const camera = new THREE.OrthographicCamera(
    (frustumSize * aspect) / -2,
    (frustumSize * aspect) / 2,
    frustumSize / 2,
    frustumSize / -2,
    0.1,
    1000
);
camera.position.z = 7.5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.NoToneMapping;
boxElement.appendChild(renderer.domElement);

scene: 3D场景容器
camera: 使用正交投影相机(OrthographicCamera)，适合产品展示
renderer: WebGL渲染器，开启抗锯齿和透明背景

2. 加载动画实现

function createLoadingCube() {
    const loadingScene = new THREE.Scene();
    const loadingCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
    loadingCamera.position.z = 5;
    const loadingRenderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    loadingRenderer.setClearAlpha(0);
    loadingRenderer.setSize(100, 100);
    document.getElementById("loading-cube").appendChild(loadingRenderer.domElement);

    const cube = new THREE.Mesh(
        new THREE.BoxGeometry(2, 2, 2),
        new THREE.MeshBasicMaterial({ color: 0xfe5000, wireframe: true })
    );
    loadingScene.add(cube);
    loadingScene.add(new THREE.AmbientLight(0xffffff, 1));

    function animateLoadingCube() {
        requestAnimationFrame(animateLoadingCube);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        loadingRenderer.render(loadingScene, loadingCamera);
    }

    animateLoadingCube();
    return function () {
        document.getElementById("loading-cube").removeChild(loadingRenderer.domElement);
    };
}

const cleanupLoadingCube = createLoadingCube();

这段代码创建了一个旋转的线框立方体作为加载动画：

创建独立的场景、相机和渲染器
添加一个橙色线框立方体
实现立方体旋转动画
返回清理函数，用于加载完成后移除动画

3. 环境光照设置

const pmremGenerator = new THREE.PMREMGenerator(renderer);
new THREE.RGBELoader().load(
    "https://cdn.shopify.com/s/files/1/0753/2393/2896/files/photo_studio_01_2k.hdr?v=1746778998",
    (hdrTexture) => {
        const envMap = pmremGenerator.fromEquirectangular(hdrTexture).texture;
        scene.environment = envMap;
        hdrTexture.dispose();
        pmremGenerator.dispose();
    }
);

使用HDR环境贴图创建逼真的光照效果：

使用PMREMGenerator预处理环境贴图
加载2K分辨率的HDR贴图
将处理后的环境贴图应用到场景

4. 模型加载与设置

const loader = new THREE.GLTFLoader();
const dracoLoader = new THREE.DRACOLoader();
dracoLoader.setDecoderPath("https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/libs/draco/");
loader.setDRACOLoader(dracoLoader);

let model = null;
let initialRotation = { x: 0, y: Math.PI };
let hasPlayedScrollAnimation = false;

loader.load(`{{ section.settings.modelLink }}`, (gltf) => {
    model = gltf.scene;
    model.scale.set(7.5, 7.5, 7.5);
    model.position.set(0, -3.5, 0);

    model.traverse((child) => {
        if (child.isMesh && child.material) {
            // 可调整材质属性
        }
    });

    scene.add(model);
    initialRotation = { x: model.rotation.x, y: model.rotation.y };

    setTimeout(() => rotateY180(), 500);
    setupScrollTriggerWithGSAP();

    gsap.to("#loading-container", {
        opacity: 0,
        duration: 0.5,
        onComplete: () => {
            document.getElementById("loading-container").style.display = "none";
            cleanupLoadingCube();
        },
    });
});

模型加载流程：

使用GLTFLoader和DRACOLoader加载压缩的GLTF模型
设置模型缩放和位置
遍历模型所有子元素，可调整材质属性
添加模型到场景
加载完成后隐藏加载动画
执行初始旋转动画(rotateY180)

5. 交互系统实现

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };
let targetRotation = { x: 0, y: 0 };
let currentRotation = { x: 0, y: 0 };
const maxRotationX = Math.PI / 3;
const rotationSensitivity = 0.003;
let velocity = { x: 0, y: 0 };
const friction = 0.95;

// 鼠标移动处理
document.addEventListener("mousemove", (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;

    if (isInsideBox && !isOverReturnIcon) {
        updateCursorPosition(mouseX, mouseY);
        cursor.style.display = "flex";
        document.body.classList.remove("normal-cursor");
    } else {
        cursor.style.display = "none";
        document.body.classList.add("normal-cursor");
    }

    if (!isDragging || !model) return;

    const deltaMove = {
        x: e.clientX - previousMousePosition.x,
        y: e.clientY - previousMousePosition.y,
    };

    velocity = {
        x: -deltaMove.y * rotationSensitivity * 0.5,
        y: deltaMove.x * rotationSensitivity * 0.5,
    };

    targetRotation.y += deltaMove.x * rotationSensitivity;
    targetRotation.x += deltaMove.y * rotationSensitivity;
    targetRotation.x = Math.max(-maxRotationX, Math.min(maxRotationX, targetRotation.x));
    previousMousePosition = { x: e.clientX, y: e.clientY };
});

// 动画循环
function animate() {
    requestAnimationFrame(animate);
    if (!isDragging) {
        targetRotation.y += velocity.y;
        targetRotation.x += velocity.x;
        velocity.x *= friction;
        velocity.y *= friction;
    }

    currentRotation.x += (targetRotation.x - currentRotation.x) * 0.1;
    currentRotation.y += (targetRotation.y - currentRotation.y) * 0.1;

    if (model) {
        model.rotation.x = currentRotation.x;
        model.rotation.y = currentRotation.y;
    }

    renderer.render(scene, camera);
}

交互系统关键点：

鼠标拖拽实现模型旋转
添加旋转惯性效果(velocity和friction)
限制X轴旋转角度(maxRotationX)
平滑过渡效果(使用currentRotation和targetRotation插值)
自定义光标效果

三、功能扩展点

这段代码还可以进一步扩展：

模型材质自定义：在模型加载后的traverse回调中可以修改材质属性
滚动动画：setupScrollTriggerWithGSAP函数可以扩展为基于滚动的动画
多点触控：当前只支持单点触控，可以扩展为多点触控缩放
模型点击事件：添加模型特定部件的点击交互

四、总结

这个3D模型展示系统实现了：

专业的加载流程(加载动画+进度提示)
高质量的渲染效果(HDR环境光)
流畅的交互体验(拖拽+惯性)
响应式设计(窗口大小变化适配)
移动端支持(触摸事件处理)

通过分析这段代码，我们可以学习到如何使用Three.js构建一个完整的产品3D展示系统，涵盖了从加载到交互的完整流程。

到此这篇关于Three.js 3D模型展示与交互实现的文章就介绍到这了,更多相关Three.js 3D模型展示与交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！