三.ExplodeModifier 黑客攻击 [英] THREE.ExplodeModifier hacking

问题描述

我正在使用 ExplodeModifier 复制顶点，以便我可以单独控制 Face3 对象.对于我的具体示例，仅此一项在视觉上看起来很差，所以我决定添加 3 个额外的面(每个现有面)，这样我就可以有一个指向几何体内部的金字塔形状.

I'm using the ExplodeModifier to duplicate the vertices so I can have individual control over Face3 objects. For my specific example, this alone looks visually poor, so I decided to add 3 extra faces (per existing face) so I can have a pyramid shape pointing inwards the geometry.

我设法修改了 ExplodeModifier 并创建了额外的面，但是我遇到了几个错误:

I managed to modify the ExplodeModifier and create the extra faces, however I get several errors:

THREE.DirectGeometry.fromGeometry(): 未定义的 vertexUv 和 THREE.BufferAttribute.copyVector3sArray(): 向量未定义

THREE.DirectGeometry.fromGeometry(): Undefined vertexUv and THREE.BufferAttribute.copyVector3sArray(): vector is undefined

我知道现在每个面有 9 个额外的顶点，所以我需要根据 uv 的，并且由于我不需要纹理而是纯色，所以我不介意使用错误的 uv ......所以，我也复制 uvs 并避免第一个警告，但我无法摆脱 copyVector2sArray...

I understand that now I have 9 extra vertices per face, so I need according uv's, and since I don't need a texture but a solid color I don't mind having the wrong uvs... So, I also duplicated the uvs and avoid the first warning but I can't get rid of the copyVector2sArray...

伪代码:

var geometry = new THREE.IcosahedronGeometry( 200, 1 );
var material = new THREE.MeshPhongMaterial( { shading: THREE.FlatShading } );

var explodeModifier = new THREE.ExplodeModifier();
explodeModifier.modify( geometry );

var mesh = new THREE.Mesh( geometry, material );
scene.addChild( mesh );

Explode Modifier 有这个伪代码:

The Explode Modifier has this pseudo code:

var vertices = [];
var faces = [];

for ( var i = 0, il = geometry.faces.length; i < il; i ++ ) {
    (...)

    var extraFace1 = new THREE.Face3().copy(face)
    extraFace1.c = geometry.vertices[0]

    var extraFace2 = new THREE.Face3().copy(face)
    extraFace2.b = geometry.vertices[0]

    var extraFace3 = new THREE.Face3().copy(face)
    extraFace3.a = geometry.vertices[0]

    faces.push( extraFace1 );
    faces.push( extraFace2 );
    faces.push( extraFace3 );
}

geometry.vertices = vertices;
geometry.faces = faces;

```

我在此处添加了一个示例.它有效，但我想避免控制台警告...

I added an example HERE. It works, but I want to avoid the console warnings...

推荐答案

正如@mrdoob 所指出的，我分配的是 THREE.Vector3 而不是 index添加了 THREE.Face3.

As pointed out by @mrdoob I was assigning a THREE.Vector3 and not an index to the added THREE.Face3.

 var extraFace1 = new THREE.Face3().copy(face)
 extraFace1.a = geometry.faces.length * 3 - 1

 var extraFace2 = new THREE.Face3().copy(face)
 extraFace2.b = geometry.faces.length * 3 - 1

 var extraFace3 = new THREE.Face3().copy(face)
 extraFace3.c = geometry.faces.length * 3 - 1

jsfiddle 更新

这篇关于三.ExplodeModifier 黑客攻击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！