threejs 模型局部高亮

### Three.js 中实现模型局部高亮

为了在 Three.js 场景中实现 3D 模型的局部高亮显示，可以采用多种技术手段来达到这一目的。一种常见的方式是通过材质变化和几何体操作相结合的方法。

#### 使用 ShaderMaterial 或 CustomShader 来创建高亮效果

对于更复杂的高亮需求，可以通过编写自定义着色器 (Custom Shaders) 来控制特定部分的颜色渲染。这允许精确地指定哪些顶点应该被照亮以及如何处理光照条件下的颜色过渡[^1]。

const material = new THREE.ShaderMaterial({
    uniforms: {
        uColor: { value: new THREE.Color(0xff7f50) }, // 高亮颜色
        uHighlightPosition: { value: new THREE.Vector3() },
        uRadius: { value: 1 }
    },
    vertexShader: `
        varying vec3 vWorldPosition;
        void main() {
            vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }`,
    fragmentShader: `
        uniform float uRadius;
        uniform vec3 uHighlightPosition;
        uniform vec3 uColor;

        varying vec3 vWorldPosition;

        void main(){
            float dist = distance(vWorldPosition, uHighlightPosition);
            if(dist < uRadius){
                gl_FragColor = vec4(uColor, 1.);
            }else{
                discard; // 不绘制超出范围的部分
            }
        }`
});

此代码片段展示了如何利用 `THREE.ShaderMaterial` 创建带有距离衰减特性的高亮区域。当某个位置接近预设的中心点 (`uHighlightPosition`) 并且在其半径范围内时，则应用新的颜色；否则不进行任何修改或丢弃该像素以保持原始外观。

#### 利用 Raycasting 技术定位交互目标并触发高亮逻辑

考虑到用户可能希望基于鼠标的输入来进行互动式的高亮展示，那么就需要借助于之前提到过的 `THREE.Raycaster` 工具。每当检测到用户的点击事件或其他形式的选择动作之后，就可以发射一条射线去判断是否有物体位于这条线上，并据此调整相应对象的状态以便启动上述描述的那种视觉反馈机制。

// 假定已经初始化好了 renderer 和 scene 变量...
let mouse = new THREE.Vector2();
let raycaster = new THREE.Raycaster();

function onMouseClick(event) {
    event.preventDefault();

    // 将鼠标坐标标准化至 [-1, 1] 范围内
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    // 更新射线投射器的方向向量
    raycaster.setFromCamera(mouse, camera);

    let intersects = raycaster.intersectObjects(scene.children); // 获取相交的对象列表
    
    if(intersects.length > 0){
        const selectedObject = intersects[0].object;
        
        // 对选中的 object 应用特殊材质或者其他方式使其突出显示
        applyHighlight(selectedObject);
    }
}

这段脚本说明了怎样捕捉用户的鼠标活动并将之转化为能够识别具体哪个实体被选取的过程。一旦确定下来具体的 mesh 后就能进一步执行个性化的样式更改命令比如改变其表面属性使之更加醒目易见。