【three.js】三维交互核心技术 - 射线检测与物理级拖拽实现

// 精确的坐标转换公式（考虑设备像素比）
function getNDC(clientX, clientY) {
    const rect = canvas.getBoundingClientRect();
    const x = ((clientX - rect.left) / rect.width) * 2 - 1;
    const y = -((clientY - rect.top) / rect.height) * 2 + 1;
    return new THREE.Vector2(x, y);
}

// 逆向推导验证（调试用）
function debugWorldToScreen(worldPos, camera) {
    const vector = worldPos.clone().project(camera);
    const x = Math.round((vector.x + 1) * renderer.domElement.width / 2);
    const y = Math.round((1 - vector.y) * renderer.domElement.height / 2);
    return {x, y};
}

投影矩阵运算原理：

视图投影矩阵=投影矩阵x视图矩阵

世界位置=逆(视图投影矩阵)xNDC坐标

在三维图形学中，射线检测通常涉及将屏幕上的像素坐标转换为三维世界空间中的射线。这个过程包括以下几个步骤：【屏幕像素坐标】【NDC坐标系】【摄像机空间】【世界空间】

屏幕像素坐标 → NDC坐标系：

javascript 复制代码

mouse.x = (clientX / window.innerWidth) * 2 - 1;
mouse.y = - (clientY / window.innerHeight) * 2 + 1;

这里，clientX 和 clientY 是屏幕上的像素坐标，通过除以窗口的宽度和高度，并乘以2再减去1或加上1（取决于Y轴的方向），将它们转换为NDC坐标。NDC坐标的范围是[-1, 1]。

摄像机空间转换：

使用THREE.Raycaster类可以方便地实现从NDC坐标到摄像机空间的转换。

javascript 复制代码

const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);

这里的mouse是一个包含x和y属性的对象，代表NDC坐标。camera是Three.js中的摄像机对象。setFromCamera方法会根据摄像机的位置和投影矩阵计算出射线的原点（摄像机位置）和方向

核心公式：

javascript 复制代码

origin = camera.position

direction = mouseVector.unproject(camera).sub(camera.position).normalize()

其中，mouseVector.unproject(camera)将NDC坐标转换为世界坐标（但尚未归一化），然后减去摄像机位置得到射线方向向量，最后通过normalize方法将其归一化。

1.2 几何相交算法优化

1.2.1 包围盒快速排除

BVH加速结构 ：使用THREE.BVH库预处理复杂模型

使用BVH（Bounding Volume Hierarchy）加速结构可以显著减少需要检测的物体数量。

javascript 复制代码

geometry.boundsTree = new THREE.MeshBVH(geometry);

// 加速检测
raycaster.firstHitOnly = true;
const intersects = raycaster.intersectObject(mesh, true);

这里，THREE.MeshBVH是Three.js提供的一个用于构建BVH加速结构的类。通过将几何体的BVH树分配给geometry.boundsTree，并在射线检测时设置raycaster.firstHitOnly = true，可以只获取第一个相交的物体，从而提高效率。

性能对比测试数据（纯借鉴）

模型面数	普通检测(ms)	BVH检测(ms)	优化比
10,000	12.5	1.2	10.4x
50,000	58.3	3.8	15.3x
100,000	128.4	6.1	21.0x

最佳实践代码

javascript 复制代码

// BVH预处理优化
function prepareBVH(mesh) {
    mesh.geometry.boundsTree = new THREE.MeshBVH(mesh.geometry, {
        lazyGeneration: false,
        strategy: THREE.MeshBVH.SplitStrategy.CENTER
    });
    
    // 内存优化技巧
    mesh.geometry.disposeBoundsTree = () => {
        mesh.geometry.boundsTree = null;
        mesh.geometry.attributes = null;
    };
}

// 批量处理场景物体
scene.traverse(obj => {
    if (obj.isMesh) prepareBVH(obj);
});

1.2.2 LOD分级检测

LOD（Level of Detail）技术可以根据物体与摄像机的距离动态地选择不同精度的模型

javascript 复制代码

const lod = new THREE.LOD(); 
lod.addLevel(highDetailMesh, 50); // 距离<50时用高模 
lod.addLevel(lowDetailMesh, 100); // 50-100用低模 
// 检测时自动选择合适层级的包围盒（注意：这里需要额外的逻辑来处理LOD的层级切换和射线检测）

在实际应用中，LOD技术通常与BVH加速结构结合使用，以进一步提高性能。

LOD分级检测实现方案

javascript 复制代码

class SmartRaycaster extends THREE.Raycaster {
    intersectLOD(object) {
        const levels = object.lod.levels;
        let closestIntersect = null;
        
        for (let i = levels.length - 1; i >= 0; i--) {
            const mesh = levels[i].object;
            const intersects = this.intersectObject(mesh, true);
            
            if (intersects.length > 0) {
                closestIntersect = intersects[0];
                if (i > 0) this._compareWithLowerLOD(closestIntersect, levels[i-1]);
                break;
            }
        }
        return closestIntersect;
    }

    _compareWithLowerLOD(intersect, lowerLOD) {
        const lowerMesh = lowerLOD.object;
        const lowerTest = this.intersectObject(lowerMesh, true);
        if (lowerTest.length > 0 && 
        lowerTest[0].distance < intersect.distance * 1.2) {
            return lowerTest[0];
        }
        return intersect;
    }
}

2. 生产级拖拽系统实现

实现一个生产级的拖拽系统需要考虑多个因素，包括拖拽平面的选择、运动约束和惯性模拟等。

2.1 拖拽平面计算

动态平面选择算法可以根据摄像机的方向和用户的输入来确定拖拽平面。

javascript 复制代码

const cameraDir = camera.getWorldDirection(new THREE.Vector3()); 
const planeNormal = new THREE.Vector3(); 
    if (Math.abs(cameraDir.y) > 0.8) { 
        planeNormal.set(0, 0, 1); // 俯视时用XY平面 
    } else { 
        planeNormal.set(0, 1, 0); // 平视时用XZ平面 
    } 
    const dragPlane = new THREE.Plane(planeNormal);

这里，通过计算摄像机的世界方向来确定拖拽平面的法向量。如果摄像机的Y方向分量较大（即接近俯视或仰视），则选择XY平面作为拖拽平面；否则，选择XZ平面。

动态平面选择算法增强版

javascript 复制代码

function calculateOptimalPlane(camera, object) {
    const cameraDir = camera.getWorldDirection(new THREE.Vector3());
    const objNormal = object.up.clone();
    
    const angleThreshold = 0.6;
    const alignment = cameraDir.dot(objNormal);
    
    if (Math.abs(alignment) > angleThreshold) {
        // 当视线方向与物体法线接近时使用View Plane
        return new THREE.Plane().setFromNormalAndCoplanarPoint(
            cameraDir, 
            object.position
        );
    } else {
        // 自动选择最大运动平面
        const bounds = new THREE.Box3().setFromObject(object);
        const size = new THREE.Vector3();
        bounds.getSize(size);
        
        if (size.y > size.x && size.y > size.z) {
            return new THREE.Plane(new THREE.Vector3(0, 1, 0));
        }
        return new THREE.Plane(new THREE.Vector3(0, 0, 1));
    }
}

2.2 运动约束

为了实现平滑的拖拽效果，需要考虑运动约束和惯性模拟。

轴向锁定

通过限制物体的移动方向来实现轴向锁定。例如，只允许物体在X轴上移动。

javascript 复制代码

// 只允许X轴移动
intersectPoint.x = startPosition.x + (currentPoint.x - clickOffset.x);
object.position.x = THREE.MathUtils.clamp(
  intersectPoint.x, 
  minX, 
  maxX
);

这里，intersectPoint是射线与拖拽平面的交点，startPosition是拖拽开始时的物体位置，currentPoint是当前鼠标位置，clickOffset是拖拽开始时的鼠标偏移量。通过计算新的X坐标并限制其在指定范围内，可以实现轴向锁定。

六自由度约束配置器

javascript 复制代码

class DragConstraint {
    constructor() {
        this.mode = 'FREE';
        this.axes = { x: true, y: true, z: true };
        this.rotation = { x: false, y: false, z: false };
        this.snap = { translation: 0.1, rotation: Math.PI/12 };
    }

    apply(position, delta) {
        const newPos = position.clone();
        if (this.mode === 'AXIS_LOCK') {
            ['x', 'y', 'z'].forEach(axis => {
                newPos[axis] = this.axes[axis] ? 
                    Math.round((position[axis] +
delta[axis])/this.snap.translation)*this.snap.translation :
                    position[axis];
            });
        }
        return newPos;
    }
}

// 使用示例
const constraint = new DragConstraint();
constraint.mode = 'AXIS_LOCK';
constraint.axes.y = false; // 锁定Y轴移动

2.3 惯性运动：

在拖拽结束时，可以模拟物体的惯性运动来使效果更加自然。

javascript 复制代码

let velocity = new THREE.Vector3();
const friction = 0.95;

document.addEventListener('mouseup', () => {
  const animate = () => {
    velocity.multiplyScalar(friction);
    object.position.add(velocity);
    
    if (velocity.length() > 0.01) {
      requestAnimationFrame(animate);
    }
  };
  
  requestAnimationFrame(animate);
});

这里，velocity是物体的速度向量，friction是摩擦系数。在mouseup事件触发时，启动一个动画循环来不断更新物体的位置，并逐渐减小速度直到停止。

物理级惯性模拟

javascript 复制代码

class InertiaSystem {
    constructor(object) {
        this.velocity = new THREE.Vector3();
        this.angularVelocity = new THREE.Vector3();
        this.damping = 0.92;
        this.maxSpeed = 2.0;
    }

    update(deltaTime) {
        this.velocity.clampLength(0, this.maxSpeed);
        this.object.position.add(this.velocity.clone().multiplyScalar(deltaTime));
        this.velocity.multiplyScalar(Math.pow(this.damping, deltaTime));
        
        this.object.rotation.x += this.angularVelocity.x * deltaTime;
        this.object.rotation.y += this.angularVelocity.y * deltaTime;
        this.object.rotation.z += this.angularVelocity.z * deltaTime;
        this.angularVelocity.multiplyScalar(Math.pow(this.damping, deltaTime));
    }

    recordMovement(prevPos, currentPos, deltaTime) {
        const delta = currentPos.clone().sub(prevPos);
        this.velocity.copy(delta.divideScalar(deltaTime));
    }
}

3.性能优化工具箱

3.1诊断工具

javascript 复制代码

// 射线检测性能分析器
class RaycastProfiler {
    constructor() {
        this.stats = {
            totalTests: 0,
            earlyOuts: 0,
            triangleChecks: 0,
            hitRate: 0
        };
    }

    begin() {
        this.startTime = performance.now();
    }

    end() {
        this.stats.duration = performance.now() - this.startTime;
        this.stats.hitRate = this.stats.totalTests > 0 ? 
            (this.stats.totalTests - this.stats.earlyOuts)/this.stats.totalTests : 0;
    }

    log() {
        console.table({
            'Total Objects Tested': this.stats.totalTests,
            'Early Optimized Outs': this.stats.earlyOuts,
            'Triangle Checks': this.stats.triangleChecks,
            'Hit Rate (%)': (this.stats.hitRate * 100).toFixed(1),
            'Total Time (ms)': this.stats.duration.toFixed(2)
        });
    }
}

3.2内存优化策略

1.BVH内存管理

javascript 复制代码

function manageSceneBVH() {
    const visibilityThreshold = 50; // 单位：米
    scene.traverse(obj => {
        if (obj.isMesh) {
            const distance = camera.position.distanceTo(obj.position);
            if (distance > visibilityThreshold && !obj.geometry.boundsTree) {
                prepareBVH(obj);
            } else if (distance <= visibilityThreshold && obj.geometry.boundsTree) {
                obj.geometry.disposeBoundsTree();
            }
        }
    });
}

4.扩展应用案例

4.1高级选取系统

javascript 复制代码

class SmartSelection {
    constructor() {
        this.selectionBuffer = new Map();
        this.hoverState = null;
    }

    onHover(intersect) {
        if (this.hoverState !== intersect.object.uuid) {
            this.applyHoverEffect(intersect.object);
            this.hoverState = intersect.object.uuid;
        }
    }

    applyHoverEffect(object) {
        // 使用顶点着色器实现高效高亮
        object.material.onBeforeCompile = shader => {
            shader.fragmentShader = shader.fragmentShader.replace(
                'gl_FragColor = vec4(diffuse, opacity);',
                `gl_FragColor = vec4(mix(diffuse, vec3(1.0,0.5,0.5), 0.3), opacity);`
            );
        };
        object.material.needsUpdate = true;
    }
}

5.常见问题解决方案

5.1射线检测精度问题

Z-fighting解决方案

javascript 复制代码

raycaster.params = {
    Line: { threshold: 0.1 },
    Points: { threshold: 0.05 },
    Mesh: {
        precision: 0.0001,
        checkIntersectionFlags: true,
        maxDepth: 50,
        skipBackfaces: true
    }
};

5.2移动端优化技巧

javascript 复制代码

function setupTouchRaycaster() {
    const touchHandler = {
        currentTouch: null,
        onTouchStart: (e) => {
            touchHandler.currentTouch = e.touches[0];
            const ndc = getNDC(touchHandler.currentTouch.clientX, 
                              touchHandler.currentTouch.clientY);
            raycaster.setFromCamera(ndc, camera);
        },
        onTouchMove: (e) => {
            // 惯性预测算法
            const deltaX = e.touches[0].clientX - touchHandler.currentTouch.clientX;
            const deltaY = e.touches[0].clientY - touchHandler.currentTouch.clientY;
            inertiaSystem.velocity.set(deltaX * 0.1, -deltaY * 0.1, 0);
        }
    };
    
    renderer.domElement.addEventListener('touchstart', touchHandler.onTouchStart);
    renderer.domElement.addEventListener('touchmove', touchHandler.onTouchMove);
}

附加资源

Three.js官方文档：了解Three.js的API和用法。

Raycaster类详细介绍：了解Raycaster类的功能和用法。

BVH加速结构论文：深入了解BVH加速结构的工作原理和实现方法。

LOD技术教程：学习LOD技术的实现和应用。

码字不易，各位大佬点点赞哦

【three.js】三维交互核心技术 - 射线检测与物理级拖拽实现

​​​​​​​1. 射线检测数学原理全解

1.1 三维坐标系转换链（深度解析）

1.1.1坐标转换数学推导

1.2 几何相交算法优化

1.2.1 包围盒快速排除

1.2.2 LOD分级检测

2. 生产级拖拽系统实现

2.1 拖拽平面计算

2.2 运动约束

轴向锁定

六自由度约束配置器

2.3 惯性运动：

3.性能优化工具箱

3.1诊断工具

3.2内存优化策略

1.BVH内存管理

4.扩展应用案例

4.1高级选取系统

5.常见问题解决方案

5.1射线检测精度问题

5.2移动端优化技巧

附加资源

1. 射线检测数学原理全解