当前位置：首页 > 文章列表 > 文章 > 前端 > Three.js实现3D效果的完整教程

Three.js实现3D效果的完整教程

2025-07-08 19:08:30 0浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JavaScript实现3D效果通常依赖于WebGL或基于WebGL的库，比如Three.js、Babylon.js等。以下是使用Three.js实现简单3D效果的基本步骤：1. 引入Three.js库你可以通过CDN引入Three.js：2. 创建场景、相机和渲染器// 场景 const scene = new THREE.Scene(); // 相机（透视相机） const camera = new THREE.PerspectiveCamera( 75, // 视野角度 window.innerWidth / window.innerHeight, // 宽高比 0.1, // 近裁剪面 1000 // 远裁剪面 ); // 渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);3. 添加光源 // 环境光 const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); // 方向光 const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(5, 5, 5); scene.add(direction》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

用JavaScript实现3D效果主要依赖于WebGL技术和Three.js库。1. WebGL是一种基于OpenGL ES 2.0的JavaScript API，允许在浏览器中进行硬件加速的3D图形渲染。2. Three.js是一个基于WebGL的JavaScript 3D库，简化了3D开发过程，使创建和操作3D场景更加容易。

怎样用JavaScript实现3D效果？

用JavaScript实现3D效果是一项既有趣又富有挑战性的任务。让我们从回答这个问题开始，然后深入探讨如何用JavaScript实现3D效果的细节。

怎样用JavaScript实现3D效果？

要用JavaScript实现3D效果，我们主要依赖于WebGL技术。WebGL是一种基于OpenGL ES 2.0的JavaScript API，它允许在浏览器中进行硬件加速的3D图形渲染。除了WebGL，我们还可以使用一些高级库和框架，如Three.js，来简化3D开发过程。通过这些工具，我们可以创建复杂的3D场景、动画和交互效果。

现在，让我们深入探讨如何用JavaScript实现3D效果的各个方面。

在JavaScript中实现3D效果的旅程就像探索一个全新的维度。无论你是想创建一个简单的3D模型，还是一个复杂的虚拟现实体验，JavaScript都提供了强大的工具来实现你的创意。

首先，我们需要了解WebGL，这是实现3D效果的核心技术。WebGL允许我们在浏览器中直接操作GPU，进行高效的3D渲染。虽然WebGL提供了极大的灵活性，但它也需要我们处理很多底层的细节，比如顶点着色器和片元着色器的编写。

让我们来看一个简单的WebGL示例，展示如何绘制一个旋转的立方体：

// 初始化WebGL上下文
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

if (!gl) {
    console.error('WebGL not supported, falling back on experimental-webgl');
    gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
    alert('Your browser does not support WebGL');
}

// 定义顶点着色器
const vsSource = `
    attribute vec4 aVertexPosition;

    uniform mat4 uModelViewMatrix;
    uniform mat4 uProjectionMatrix;

    void main() {
        gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
    }
`;

// 定义片元着色器
const fsSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;

// 编译着色器
function compileShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }

    return shader;
}

// 初始化着色器程序
function initShaderProgram(gl, vsSource, fsSource) {
    const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vsSource);
    const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fsSource);

    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);

    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
        return null;
    }

    return shaderProgram;
}

// 初始化缓冲区
function initBuffers(gl) {
    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    const positions = [
        // 前
        -1.0, -1.0,  1.0,
         1.0, -1.0,  1.0,
         1.0,  1.0,  1.0,
        -1.0,  1.0,  1.0,

        // 后
        -1.0, -1.0, -1.0,
        -1.0,  1.0, -1.0,
         1.0,  1.0, -1.0,
         1.0, -1.0, -1.0,

        // 顶
        -1.0,  1.0, -1.0,
        -1.0,  1.0,  1.0,
         1.0,  1.0,  1.0,
         1.0,  1.0, -1.0,

        // 底
        -1.0, -1.0, -1.0,
         1.0, -1.0, -1.0,
         1.0, -1.0,  1.0,
        -1.0, -1.0,  1.0,

        // 右
         1.0, -1.0, -1.0,
         1.0,  1.0, -1.0,
         1.0,  1.0,  1.0,
         1.0, -1.0,  1.0,

        // 左
        -1.0, -1.0, -1.0,
        -1.0, -1.0,  1.0,
        -1.0,  1.0,  1.0,
        -1.0,  1.0, -1.0
    ];

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

    return {
        position: positionBuffer,
    };
}

// 绘制场景
function drawScene(gl, programInfo, buffers, deltaTime) {
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clearDepth(1.0);
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    const fieldOfView = 45 * Math.PI / 180;
    const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
    const zNear = 0.1;
    const zFar = 100.0;
    const projectionMatrix = mat4.create();

    mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);

    const modelViewMatrix = mat4.create();

    mat4.translate(modelViewMatrix, modelViewMatrix, [-0.0, 0.0, -6.0]);
    mat4.rotate(modelViewMatrix, modelViewMatrix, cubeRotation, [0, 0, 1]);
    mat4.rotate(modelViewMatrix, modelViewMatrix, cubeRotation * 0.7, [0, 1, 0]);

    {
        const numComponents = 3;
        const type = gl.FLOAT;
        const normalize = false;
        const stride = 0;
        const offset = 0;
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
        gl.vertexAttribPointer(
            programInfo.attribLocations.vertexPosition,
            numComponents,
            type,
            normalize,
            stride,
            offset);
        gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
    }

    gl.useProgram(programInfo.program);

    gl.uniformMatrix4fv(
        programInfo.uniformLocations.projectionMatrix,
        false,
        projectionMatrix);
    gl.uniformMatrix4fv(
        programInfo.uniformLocations.modelViewMatrix,
        false,
        modelViewMatrix);

    {
        const offset = 0;
        const vertexCount = 36;
        gl.drawArrays(gl.TRIANGLE_FAN, offset, vertexCount);
    }

    cubeRotation += deltaTime;
}

// 主循环
let cubeRotation = 0.0;
let then = 0;

function render(now) {
    now *= 0.001;
    const deltaTime = now - then;
    then = now;

    drawScene(gl, programInfo, buffers, deltaTime);

    requestAnimationFrame(render);
}

// 初始化WebGL
const shaderProgram = initShaderProgram(gl, vsSource, fsSource);

const programInfo = {
    program: shaderProgram,
    attribLocations: {
        vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
    },
    uniformLocations: {
        projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
        modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
    },
};

const buffers = initBuffers(gl);

requestAnimationFrame(render);

这个示例展示了如何使用WebGL绘制一个旋转的立方体。我们定义了顶点和片元着色器，初始化了缓冲区，并在主循环中不断更新立方体的旋转角度。

然而，直接使用WebGL编写3D应用可能会非常复杂和繁琐。为了简化开发过程，我们可以使用Three.js，这是一个基于WebGL的JavaScript 3D库。Three.js提供了更高层次的抽象，使我们能够更轻松地创建和操作3D场景。

让我们来看一个使用Three.js创建相同旋转立方体的示例：

// 初始化Three.js场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

// 动画循环
function animate() {
    requestAnimationFrame(animate);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

animate();

使用Three.js，我们只需要几行代码就能创建一个旋转的立方体。这展示了Three.js在简化3D开发方面的强大能力。

在实际项目中，使用Three.js可以大大提高开发效率，但也有一些需要注意的地方。首先，Three.js虽然简化了开发过程，但它仍然依赖于WebGL，因此在性能优化方面需要特别注意。其次，Three.js的版本更新较快，可能需要定期更新代码以保持兼容性。

在性能优化方面，我们可以考虑以下几点：