第51节：Three.js源码解析 - 核心架构设计

概述

理解Three.js的源码架构对于深入掌握WebGL编程和进行高级定制开发至关重要。本节将深入剖析Three.js的核心架构设计，包括Object3D继承体系、渲染器工作机制、场景图管理等关键概念。

Three.js核心架构图：
Three.js核心架构 场景图系统 渲染管线 数学系统 资源管理 Object3D基类 场景图遍历 变换继承 WebGLRenderer 材质系统 着色器编译 矩阵运算 向量计算 四元数旋转 加载器系统 缓存机制 内存管理 灵活的场景组织 高效的渲染性能 精确的数学计算 统一的资源加载

核心源码深度解析

Object3D继承体系

Three.js的核心是基于场景图的3D对象管理系统，Object3D是所有可渲染对象的基类。

// Object3D 核心属性与方法
class Object3D {
    constructor() {
        // 唯一标识
        this.uuid = THREE.MathUtils.generateUUID();
        
        // 变换属性
        this.position = new Vector3();
        this.rotation = new Euler();
        this.quaternion = new Quaternion();
        this.scale = new Vector3(1, 1, 1);
        this.matrix = new Matrix4();
        this.matrixWorld = new Matrix4();
        this.matrixAutoUpdate = true;
        
        // 层级关系
        this.parent = null;
        this.children = [];
        
        // 渲染属性
        this.visible = true;
        this.layers = new Layers();
        this.castShadow = false;
        this.receiveShadow = false;
        this.frustumCulled = true;
        this.renderOrder = 0;
        
        // 用户数据
        this.userData = {};
    }
    
    // 添加子对象
    add(object) {
        if (arguments.length > 1) {
            for (let i = 0; i < arguments.length; i++) {
                this.add(arguments[i]);
            }
            return this;
        }
        
        if (object === this) {
            console.error("Object3D.add: object can't be added as a child of itself.", object);
            return this;
        }
        
        if (object && object.isObject3D) {
            if (object.parent !== null) {
                object.parent.remove(object);
            }
            object.parent = this;
            this.children.push(object);
            object.dispatchEvent({ type: 'added' });
        } else {
            console.error("Object3D.add: object not an instance of Object3D.", object);
        }
        
        return this;
    }
    
    // 移除子对象
    remove(object) {
        if (arguments.length > 1) {
            for (let i = 0; i < arguments.length; i++) {
                this.remove(arguments[i]);
            }
            return this;
        }
        
        const index = this.children.indexOf(object);
        if (index !== -1) {
            object.parent = null;
            this.children.splice(index, 1);
            object.dispatchEvent({ type: 'removed' });
        }
        
        return this;
    }
    
    // 更新世界变换矩阵
    updateMatrix() {
        this.matrix.compose(this.position, this.quaternion, this.scale);
        this.matrixWorldNeedsUpdate = true;
    }
    
    // 更新世界矩阵
    updateMatrixWorld(force) {
        if (this.matrixAutoUpdate) this.updateMatrix();
        
        if (this.matrixWorldNeedsUpdate || force) {
            if (this.parent === null) {
                this.matrixWorld.copy(this.matrix);
            } else {
                this.matrixWorld.multiplyMatrices(this.parent.matrixWorld, this.matrix);
            }
            
            this.matrixWorldNeedsUpdate = false;
            force = true;
        }
        
        // 递归更新子对象
        for (let i = 0, l = this.children.length; i < l; i++) {
            this.children[i].updateMatrixWorld(force);
        }
    }
    
    // 遍历场景图
    traverse(callback) {
        callback(this);
        for (let i = 0, l = this.children.length; i < l; i++) {
            this.children[i].traverse(callback);
        }
    }
}

核心继承关系分析

类名	继承关系	主要功能	关键特性
Object3D	基类	场景图节点基础	变换、层级、遍历
Mesh	Object3D	可渲染网格	几何体+材质
Camera	Object3D	相机抽象	投影矩阵
Light	Object3D	光源	光照计算
Group	Object3D	空节点	组织场景图
Scene	Object3D	场景根节点	背景、雾效

WebGLRenderer渲染流程

// 渲染器核心流程（简化版）
class WebGLRenderer {
    constructor(parameters) {
        // WebGL上下文
        this.context = this.createContext(parameters);
        this.state = new WebGLState(this.context);
        this.properties = new WebGLProperties();
        
        // 渲染管线组件
        this.shaderCache = new ShaderCache();
        this.geometryCache = new GeometryCache();
        this.materialCache = new MaterialCache();
        
        // 渲染状态
        this.autoClear = true;
        this.autoClearColor = true;
        this.autoClearDepth = true;
        this.autoClearStencil = true;
        
        // 渲染目标
        this.renderTarget = null;
        this.currentRenderTarget = null;
    }
    
    // 主渲染方法
    render(scene, camera) {
        // 1. 场景图更新
        this.updateSceneGraph(scene, camera);
        
        // 2. 渲染状态初始化
        this.initRenderState();
        
        // 3. 投影矩阵设置
        this.setProjectionMatrix(camera);
        
        // 4. 场景图遍历渲染
        this.renderScene(scene, camera);
        
        // 5. 后期处理
        this.postProcessing();
    }
    
    // 场景图更新
    updateSceneGraph(scene, camera) {
        // 更新所有对象的矩阵
        scene.updateMatrixWorld();
        
        // 更新相机投影矩阵
        if (camera.parent === null) camera.updateMatrixWorld();
        
        // 收集所有需要渲染的对象
        this.renderList = new RenderList();
        this.projectObject(scene, camera);
    }
    
    // 对象投影与排序
    projectObject(object, camera) {
        if (object.visible === false) return;
        
        // 视锥体剔除
        if (object.frustumCulled && this.frustumCulling) {
            if (this.frustum.intersectsObject(object) === false) return;
        }
        
        const visible = object.layers.test(camera.layers);
        if (!visible) return;
        
        // 根据对象类型处理
        if (object.isMesh || object.isLine || object.isPoints) {
            // 计算Z深度用于排序
            const position = object.getWorldPosition(new Vector3());
            const depth = camera.worldToLocal(position).z;
            
            this.renderList.push(object, depth, object.material);
        }
        
        // 递归处理子对象
        for (let i = 0, l = object.children.length; i < l; i++) {
            this.projectObject(object.children[i], camera);
        }
    }
    
    // 渲染场景
    renderScene(scene, camera) {
        // 设置渲染状态
        this.state.setBlending(NoBlending);
        this.state.setDepthTest(true);
        this.state.setDepthWrite(true);
        
        // 渲染不透明对象（从前往后）
        this.renderList.sortOpaque();
        this.renderObjects(this.renderList.opaque, scene, camera);
        
        // 渲染透明对象（从后往前）
        this.renderList.sortTransparent();
        this.renderObjects(this.renderList.transparent, scene, camera);
    }
    
    // 渲染对象数组
    renderObjects(objects, scene, camera) {
        for (let i = 0, l = objects.length; i < l; i++) {
            const object = objects[i];
            this.renderObject(object, scene, camera);
        }
    }
    
    // 渲染单个对象
    renderObject(object, scene, camera) {
        // 设置对象渲染状态
        this.setObjectRenderState(object);
        
        // 获取或编译着色器程序
        const program = this.getProgram(object.material, object.geometry);
        
        // 绑定着色器程序
        this.state.useProgram(program.program);
        
        // 更新uniforms
        this.updateUniforms(object, camera, scene, program);
        
        // 绑定几何体
        this.bindGeometry(object.geometry, program);
        
        // 执行绘制调用
        this.executeDrawCall(object, program);
    }
    
    // 获取着色器程序
    getProgram(material, geometry) {
        const programKey = this.generateProgramKey(material, geometry);
        
        if (!this.shaderCache.has(programKey)) {
            // 编译新着色器程序
            const program = this.compileProgram(material, geometry);
            this.shaderCache.set(programKey, program);
        }
        
        return this.shaderCache.get(programKey);
    }
    
    // 编译着色器程序
    compileProgram(material, geometry) {
        // 生成顶点着色器
        const vertexShader = this.buildVertexShader(material, geometry);
        
        // 生成片段着色器
        const fragmentShader = this.buildFragmentShader(material);
        
        // 编译链接程序
        const program = new WebGLProgram(
            this.context,
            vertexShader,
            fragmentShader,
            material
        );
        
        return program;
    }
}

材质系统架构

// 材质基类核心实现
class Material {
    constructor() {
        this.uuid = THREE.MathUtils.generateUUID();
        this.name = '';
        this.type = 'Material';
        
        // 透明度相关
        this.transparent = false;
        this.opacity = 1;
        this.alphaTest = 0;
        this.blending = NormalBlending;
        this.blendSrc = SrcAlphaFactor;
        this.blendDst = OneMinusSrcAlphaFactor;
        
        // 深度测试
        this.depthTest = true;
        this.depthWrite = true;
        
        // 面相关
        this.side = FrontSide;
        this.flatShading = false;
        
        // 顶点颜色
        this.vertexColors = false;
        
        // 用户数据
        this.userData = {};
        
        // 版本号（用于缓存失效）
        this.version = 0;
    }
    
    // 复制材质
    copy(source) {
        this.name = source.name;
        this.transparent = source.transparent;
        this.opacity = source.opacity;
        this.blending = source.blending;
        this.blendSrc = source.blendSrc;
        this.blendDst = source.blendDst;
        this.depthTest = source.depthTest;
        this.depthWrite = source.depthWrite;
        this.side = source.side;
        this.vertexColors = source.vertexColors;
        return this;
    }
    
    // 克隆材质
    clone() {
        return new this.constructor().copy(this);
    }
    
    // 触发更新（通知渲染器重新编译着色器）
    needsUpdate(value = true) {
        if (value === true) this.version++;
    }
    
    // 序列化
    toJSON(meta) {
        const data = {
            metadata: {
                version: 4.5,
                type: 'Material',
                generator: 'Material.toJSON'
            },
            uuid: this.uuid,
            type: this.type
        };
        
        if (this.name !== '') data.name = this.name;
        
        // 序列化标准属性
        if (this.transparent === true) data.transparent = true;
        if (this.opacity !== 1) data.opacity = this.opacity;
        if (this.blending !== NormalBlending) data.blending = this.blending;
        // ... 其他属性序列化
        
        return data;
    }
}

// MeshBasicMaterial 实现示例
class MeshBasicMaterial extends Material {
    constructor(parameters) {
        super();
        
        this.type = 'MeshBasicMaterial';
        
        // 基础材质特有属性
        this.color = new Color(0xffffff);
        this.map = null;
        this.lightMap = null;
        this.specularMap = null;
        this.alphaMap = null;
        this.envMap = null;
        
        // 反射相关
        this.reflectivity = 1;
        this.refractionRatio = 0.98;
        
        // 线框模式
        this.wireframe = false;
        this.wireframeLinewidth = 1;
        this.wireframeLinecap = 'round';
        this.wireframeLinejoin = 'round';
        
        this.setValues(parameters);
    }
    
    copy(source) {
        super.copy(source);
        
        this.color.copy(source.color);
        this.map = source.map;
        this.lightMap = source.lightMap;
        this.specularMap = source.specularMap;
        this.alphaMap = source.alphaMap;
        this.envMap = source.envMap;
        
        this.reflectivity = source.reflectivity;
        this.refractionRatio = source.refractionRatio;
        
        this.wireframe = source.wireframe;
        this.wireframeLinewidth = source.wireframeLinewidth;
        this.wireframeLinecap = source.wireframeLinecap;
        this.wireframeLinejoin = source.wireframeLinejoin;
        
        return this;
    }
}

几何体系统解析

// BufferGeometry 核心实现
class BufferGeometry {
    constructor() {
        this.uuid = THREE.MathUtils.generateUUID();
        this.name = '';
        this.type = 'BufferGeometry';
        
        // 属性缓冲区
        this.attributes = {};
        this.index = null;
        
        // 边界体积
        this.boundingBox = null;
        this.boundingSphere = null;
        
        // 绘制范围
        this.drawRange = { start: 0, count: Infinity };
        
        // 用户数据
        this.userData = {};
    }
    
    // 设置索引
    setIndex(index) {
        if (Array.isArray(index)) {
            this.index = new BufferAttribute(new Uint16Array(index), 1);
        } else {
            this.index = index;
        }
        return this;
    }
    
    // 设置属性
    setAttribute(name, attribute) {
        this.attributes[name] = attribute;
        return this;
    }
    
    // 获取属性
    getAttribute(name) {
        return this.attributes[name];
    }
    
    // 删除属性
    deleteAttribute(name) {
        delete this.attributes[name];
        return this;
    }
    
    // 计算边界框
    computeBoundingBox() {
        if (this.boundingBox === null) {
            this.boundingBox = new Box3();
        }
        
        const position = this.attributes.position;
        if (position !== undefined) {
            this.boundingBox.setFromBufferAttribute(position);
        } else {
            this.boundingBox.makeEmpty();
        }
    }
    
    // 计算边界球
    computeBoundingSphere() {
        if (this.boundingSphere === null) {
            this.boundingSphere = new Sphere();
        }
        
        const position = this.attributes.position;
        if (position !== undefined) {
            // 使用 Ritter's bounding sphere 算法
            const box = new Box3();
            box.setFromBufferAttribute(position);
            
            const center = box.getCenter(new Vector3());
            const maxRadiusSq = this.getMaxRadiusSq(center, position);
            
            this.boundingSphere.center.copy(center);
            this.boundingSphere.radius = Math.sqrt(maxRadiusSq);
        } else {
            this.boundingSphere.radius = 0;
        }
    }
    
    // 获取最大半径平方
    getMaxRadiusSq(center, position) {
        let maxRadiusSq = 0;
        
        for (let i = 0, il = position.count; i < il; i++) {
            _vector.fromBufferAttribute(position, i);
            maxRadiusSq = Math.max(maxRadiusSq, center.distanceToSquared(_vector));
        }
        
        return maxRadiusSq;
    }
    
    // 合并几何体
    merge(geometry, matrix) {
        if (geometry.isBufferGeometry !== true) {
            console.error('THREE.BufferGeometry.merge(): geometry not an instance of THREE.BufferGeometry.', geometry);
            return;
        }
        
        if (matrix !== undefined) {
            const normalMatrix = new Matrix3().getNormalMatrix(matrix);
        }
        
        // 合并属性逻辑...
    }
}

数学系统核心

// 矩阵运算核心
class Matrix4 {
    constructor() {
        this.elements = [
            1, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            0, 0, 0, 1
        ];
    }
    
    // 矩阵乘法
    multiply(m) {
        return this.multiplyMatrices(this, m);
    }
    
    // 矩阵乘法实现
    multiplyMatrices(a, b) {
        const ae = a.elements;
        const be = b.elements;
        const te = this.elements;
        
        const a11 = ae[0], a12 = ae[4], a13 = ae[8], a14 = ae[12];
        const a21 = ae[1], a22 = ae[5], a23 = ae[9], a24 = ae[13];
        const a31 = ae[2], a32 = ae[6], a33 = ae[10], a34 = ae[14];
        const a41 = ae[3], a42 = ae[7], a43 = ae[11], a44 = ae[15];
        
        const b11 = be[0], b12 = be[4], b13 = be[8], b14 = be[12];
        const b21 = be[1], b22 = be[5], b23 = be[9], b24 = be[13];
        const b31 = be[2], b32 = be[6], b33 = be[10], b34 = be[14];
        const b41 = be[3], b42 = be[7], b43 = be[11], b44 = be[15];
        
        te[0] = a11 * b11 + a12 * b21 + a13 * b31 + a14 * b41;
        te[4] = a11 * b12 + a12 * b22 + a13 * b32 + a14 * b42;
        te[8] = a11 * b13 + a12 * b23 + a13 * b33 + a14 * b43;
        te[12] = a11 * b14 + a12 * b24 + a13 * b34 + a14 * b44;
        
        te[1] = a21 * b11 + a22 * b21 + a23 * b31 + a24 * b41;
        te[5] = a21 * b12 + a22 * b22 + a23 * b32 + a24 * b42;
        te[9] = a21 * b13 + a22 * b23 + a23 * b33 + a24 * b43;
        te[13] = a21 * b14 + a22 * b24 + a23 * b34 + a24 * b44;
        
        te[2] = a31 * b11 + a32 * b21 + a33 * b31 + a34 * b41;
        te[6] = a31 * b12 + a32 * b22 + a33 * b32 + a34 * b42;
        te[10] = a31 * b13 + a32 * b23 + a33 * b33 + a34 * b43;
        te[14] = a31 * b14 + a32 * b24 + a33 * b34 + a34 * b44;
        
        te[3] = a41 * b11 + a42 * b21 + a43 * b31 + a44 * b41;
        te[7] = a41 * b12 + a42 * b22 + a43 * b32 + a44 * b42;
        te[11] = a41 * b13 + a42 * b23 + a43 * b33 + a44 * b43;
        te[15] = a41 * b14 + a42 * b24 + a43 * b34 + a44 * b44;
        
        return this;
    }
    
    // 组合位置、旋转、缩放
    compose(position, quaternion, scale) {
        const te = this.elements;
        
        // 旋转矩阵
        const x = quaternion._x, y = quaternion._y, z = quaternion._z, w = quaternion._w;
        const x2 = x + x, y2 = y + y, z2 = z + z;
        const xx = x * x2, xy = x * y2, xz = x * z2;
        const yy = y * y2, yz = y * z2, zz = z * z2;
        const wx = w * x2, wy = w * y2, wz = w * z2;
        
        const sx = scale.x, sy = scale.y, sz = scale.z;
        
        te[0] = (1 - (yy + zz)) * sx;
        te[1] = (xy + wz) * sx;
        te[2] = (xz - wy) * sx;
        te[3] = 0;
        
        te[4] = (xy - wz) * sy;
        te[5] = (1 - (xx + zz)) * sy;
        te[6] = (yz + wx) * sy;
        te[7] = 0;
        
        te[8] = (xz + wy) * sz;
        te[9] = (yz - wx) * sz;
        te[10] = (1 - (xx + yy)) * sz;
        te[11] = 0;
        
        te[12] = position.x;
        te[13] = position.y;
        te[14] = position.z;
        te[15] = 1;
        
        return this;
    }
}

性能优化机制

缓存系统设计

// 统一的缓存管理系统
class Cache {
    constructor() {
        this.files = {};
        this.geometries = {};
        this.textures = {};
        this.materials = {};
        this.shaders = {};
    }
    
    // 文件缓存
    addFile(key, file) {
        if (this.files[key] === undefined) {
            this.files[key] = file;
        }
    }
    
    getFile(key) {
        return this.files[key];
    }
    
    removeFile(key) {
        delete this.files[key];
    }
    
    // 几何体缓存
    addGeometry(key, geometry) {
        if (this.geometries[key] === undefined) {
            this.geometries[key] = geometry;
        }
    }
    
    getGeometry(key) {
        return this.geometries[key];
    }
    
    // 清理缓存
    clear() {
        this.files = {};
        this.geometries = {};
        this.textures = {};
        this.materials = {};
        this.shaders = {};
    }
}

// 全局缓存实例
THREE.Cache = new Cache();

内存管理策略

// 资源销毁工具类
class ResourceManager {
    static disposeObject(object) {
        if (object.geometry) {
            this.disposeGeometry(object.geometry);
        }
        
        if (object.material) {
            this.disposeMaterial(object.material);
        }
        
        // 递归处理子对象
        for (let i = 0; i < object.children.length; i++) {
            this.disposeObject(object.children[i]);
        }
    }
    
    static disposeGeometry(geometry) {
        geometry.dispose();
        
        // 从缓存中移除
        for (const key in THREE.Cache.geometries) {
            if (THREE.Cache.geometries[key] === geometry) {
                delete THREE.Cache.geometries[key];
            }
        }
    }
    
    static disposeMaterial(material) {
        material.dispose();
        
        // 清理纹理
        if (material.map) material.map.dispose();
        if (material.normalMap) material.normalMap.dispose();
        // ... 其他纹理
        
        // 从缓存中移除
        for (const key in THREE.Cache.materials) {
            if (THREE.Cache.materials[key] === material) {
                delete THREE.Cache.materials[key];
            }
        }
    }
}

扩展与定制指南

自定义渲染器

// 自定义渲染器示例
class CustomRenderer extends WebGLRenderer {
    constructor(parameters) {
        super(parameters);
        this.customPasses = [];
    }
    
    // 添加自定义渲染通道
    addCustomPass(pass) {
        this.customPasses.push(pass);
    }
    
    // 重写渲染方法
    render(scene, camera) {
        // 前置处理
        this.preRender(scene, camera);
        
        // 执行自定义通道
        for (const pass of this.customPasses) {
            pass.render(this, scene, camera);
        }
        
        // 主渲染
        super.render(scene, camera);
        
        // 后置处理
        this.postRender(scene, camera);
    }
    
    preRender(scene, camera) {
        // 自定义前置逻辑
        console.log('开始渲染场景:', scene.name);
    }
    
    postRender(scene, camera) {
        // 自定义后置逻辑
        console.log('完成渲染场景:', scene.name);
    }
}

自定义材质

// 自定义材质示例
class CustomMaterial extends Material {
    constructor(parameters) {
        super();
        this.type = 'CustomMaterial';
        
        // 自定义属性
        this.customUniforms = {
            time: { value: 0 },
            amplitude: { value: 1.0 }
        };
        
        // 自定义着色器
        this.vertexShader = `
            uniform float time;
            uniform float amplitude;
            
            varying vec2 vUv;
            
            void main() {
                vUv = uv;
                
                vec3 newPosition = position;
                newPosition.z += sin(position.x * 10.0 + time) * amplitude;
                
                gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
            }
        `;
        
        this.fragmentShader = `
            varying vec2 vUv;
            
            void main() {
                gl_FragColor = vec4(vUv, 1.0, 1.0);
            }
        `;
        
        this.setValues(parameters);
    }
}

通过深入理解Three.js的源码架构，开发者可以更好地优化应用性能、实现高级功能，并在遇到问题时能够快速定位和解决。这种底层知识对于构建复杂的三维应用至关重要。