threejs 贴花移动

### 实现Three.js中的贴花移动

在Three.js中，可以通过调整`DecalGeometry`的位置来实现实体上的贴花移动。这涉及到创建一个初始的贴花几何体并将其附加到场景中的对象上。之后通过改变该几何体的世界位置坐标，可以达到移动的效果。

// 创建一个基础的对象作为被施加贴花的目标
const geometry = new THREE.BoxGeometry( 10, 10, 10 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

// 定义贴花的位置相对于目标物体表面某一点
let positionOnSurface = new THREE.Vector3(x, y, z); // 需要计算得到的具体数值
positionOnSurface.applyMatrix4(cube.matrixWorld);

// 构建贴花几何体以及材质
const decalGeometry = new THREE.DecalGeometry(
    cube,
    positionOnSurface.clone().sub(new THREE.Vector3(dx, dy, dz)), // 贴花方向向量
    new THREE.Vector3(ux, uy, uz),                                // 切线空间X轴
    new THREE.Vector3(vx, vy, vz),                                // 切线空间Y轴
    width, height                                                 // 贴花尺寸
);
const decalMaterial = new THREE.MeshPhongMaterial({color: 0xff0000});
const decalMesh = new THREE.Mesh(decalGeometry, decalMaterial);
scene.add(decalMesh);

// 移动贴花的方法如下所示
function moveDecal(targetPosition){
    const newPosition = targetPosition.clone();
    newPosition.applyMatrix4(cube.matrixWorld);
    
    // 更新贴花世界位置
    decalMesh.position.copy(newPosition);
}

为了使上述代码正常工作，需要注意的是，在调用`moveDecal()`函数之前，应该先确保已经正确设置了`targetPosition`变量表示新的期望位置，并且这个新位置应当是在目标模型表面上的一个有效点[^1]。