Javascript 更新贴花几何体顶点、UV、，

我现在正在玩。我能在我的球体上涂上一层漂亮的污渍

下面是我用来在球体上“应用”贴图的代码。（我有一些自定义类，但不用担心这一点

// Create sphere
var mainMesh = new THREE.Mesh(
    new THREE.SphereGeometry(7, 16, 16),
    new THREE.MeshBasicMaterial({ color: 0x00a1fd })
);

// Declare decal material
var decalMaterial = new THREE.MeshPhongMaterial({
    color               : 0xff0000,    
    specular            : 0x444444,
    map                 : TextureLoader.instance.getTexture('http://threejs.org/examples/textures/decal/decal-diffuse.png'),
    normalMap           : TextureLoader.instance.getTexture('http://threejs.org/examples/textures/decal/decal-normal.jpg'),
    normalScale         : new THREE.Vector2( 1, 1 ),
    shininess           : 30,
    transparent         : true,
    depthTest           : true,
    depthWrite          : false,
    polygonOffset       : true,
    polygonOffsetFactor : -4,
    wireframe           : false
});

// Create decal itself
var decal = new THREE.Mesh(
    new THREE.DecalGeometry(
        mainMesh,
        new THREE.Vector3(0, 2.5, 3),
        new THREE.Vector3(0, 0, 0),
        new THREE.Vector3(8, 8, 8),
        new THREE.Vector3(1, 1, 1)
    ),
    decalMaterial.clone()
);

// Add mesh + decal + helpers
scene.add(
    mainMesh,
    new THREE.HemisphereLight(0xffffff, 0, 1),
    decal,
    new THREE.WireframeHelper(decal, 0xffff00)
);

decal.add(new THREE.BoxHelper(decal, 0xffff00));

    function moveDecal()
    {
        decal.translateX(1);
        decal.geometry.computeDecal();
    };

现在，我想移动球体上的这个污点，从而更新贴花的几何图形

不幸的是，当我调用

贴花.geometry.computeDecal（）

时，贴花的网格没有更新。我找不到任何解决方案

// Create sphere
var mainMesh = new THREE.Mesh(
    new THREE.SphereGeometry(7, 16, 16),
    new THREE.MeshBasicMaterial({ color: 0x00a1fd })
);

// Declare decal material
var decalMaterial = new THREE.MeshPhongMaterial({
    color               : 0xff0000,    
    specular            : 0x444444,
    map                 : TextureLoader.instance.getTexture('http://threejs.org/examples/textures/decal/decal-diffuse.png'),
    normalMap           : TextureLoader.instance.getTexture('http://threejs.org/examples/textures/decal/decal-normal.jpg'),
    normalScale         : new THREE.Vector2( 1, 1 ),
    shininess           : 30,
    transparent         : true,
    depthTest           : true,
    depthWrite          : false,
    polygonOffset       : true,
    polygonOffsetFactor : -4,
    wireframe           : false
});

// Create decal itself
var decal = new THREE.Mesh(
    new THREE.DecalGeometry(
        mainMesh,
        new THREE.Vector3(0, 2.5, 3),
        new THREE.Vector3(0, 0, 0),
        new THREE.Vector3(8, 8, 8),
        new THREE.Vector3(1, 1, 1)
    ),
    decalMaterial.clone()
);

// Add mesh + decal + helpers
scene.add(
    mainMesh,
    new THREE.HemisphereLight(0xffffff, 0, 1),
    decal,
    new THREE.WireframeHelper(decal, 0xffff00)
);

decal.add(new THREE.BoxHelper(decal, 0xffff00));

    function moveDecal()
    {
        decal.translateX(1);
        decal.geometry.computeDecal();
    };

根据

decadgeometry

类，函数

computeDecal

已设置为true，用于更新顶点、颜色、UV等所需的各种成员

    this.computeDecal = function() {
        // [...]
        this.verticesNeedUpdate     = true;
        this.elementsNeedUpdate     = true;
        this.morphTargetsNeedUpdate = true;
        this.uvsNeedUpdate          = true;
        this.normalsNeedUpdate      = true;
        this.colorsNeedUpdate       = true;
     };

谢谢你的帮助

---

PS:

您正在尝试更新几何体的顶点

可以更改顶点分量的值

geometry.vertices[ 0 ].x += 1;

但你不能添加新的真理

geometry.vertices.push( new THREE.Vector3( x, y, z ) ); // not allowed

或者指定一个新的顶点数组

geometry.vertices = new_array; // not allowed

在几何体至少渲染一次之后

类似，用于其他属性，例如UV

有关更多信息，请参阅以下答案：

---

three.js r.80

Mmmh，你是说每次我想移动我的贴花时，我别无选择，只能换一个新的？@WestLangley“你不能”是什么意思在这种情况下是什么意思？你是说Three.js不会在内部更新这些值吗？如果是，你知道为什么库在用户尝试更新不可变属性时不会抛出警告或错误吗？