threejs 贴花

### 使用 Three.js 实现贴花效果

在 Three.js 中实现贴花效果可以通过多种方式达成，其中一种常见的方式是利用 `ShaderMaterial` 和自定义着色器来创建贴花效果。这种方法允许开发者精确控制贴花的位置、大小以及透明度等属性。

下面是一个简单的例子，展示如何在一个平面上应用贴花：

// 创建场景
const scene = new THREE.Scene();

// 设置相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 渲染器配置
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加平面作为基础对象
const geometry = new THREE.PlaneGeometry(2, 2); // 平面尺寸为2x2
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

// 定义用于绘制贴花的顶点着色器代码
const vertexShaderCode =
    `
void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
}`;

// 定义用于绘制贴花的片段着色器代码
const fragmentShaderCode =
    `
uniform sampler2D texture;
varying vec2 vUv;

void main(){
    gl_FragColor = texture2D(texture, vUv);
}`; 

// 加载图片并转换成纹理供后续使用
var loader = new THREE.TextureLoader().load('path_to_your_decal_image.png');

// 创建带有贴花材质的对象
const decalMaterial = new THREE.ShaderMaterial({
    uniforms: { "texture": { value: loader } },
    vertexShader: vertexShaderCode,
    fragmentShader: fragmentShaderCode,
});

// 应用该材料到新的几何图形上形成最终的贴花物体
const decalGeo = new THREE.PlaneBufferGeometry(1, 1).translate(-0.8, -0.8, 0.1); // 调整位置使贴花位于原模型表面之上
const decalMesh = new THREE.Mesh(decalGeo, decalMaterial);
plane.add(decalMesh);

function animate() {
    requestAnimationFrame(animate);
    
    renderer.render(scene, camera);
}
animate();[^1]

此段代码展示了如何通过 Shader 来实现在特定表面上添加图像形式的小标记或装饰图案的效果。需要注意的是这里的路径 `'path_to_your_decal_image.png'` 需要替换为你实际使用的贴图文件地址。