2016-09-21 21 views
1

我目前在玩ThreeJS decals。我已经能够在我的球体上留下美丽的污点。更新DecalGeometry顶点,UVs,

这是我用来在我的球体上“应用”贴花的一段代码。 (我有一些自定义类,但不用担心这一点。

// 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)); 

现在,我woud喜欢动这个污点对我的领域,因此,更新我的贴花的几何形状。

不幸,当我打电话decal.geometry.computeDecal(),贴花的网格不更新,我找不到这方面有任何解决方案。

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

按照DecalGeometry类,功能computeDecal已经被设置为更新需要真正各个成员顶点,col UV,...

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

谢谢你的帮忙! :d

PS:ThreeJS r80

回答

1

您尝试更新您的几何体的顶点。

你可以改变一个顶点componnent的价值,

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

,但你不能添加新veritices

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

或指定一个新的顶点数组

geometry.vertices = new_array; // not allowed 

后该几何图形至少已渲染一次。

相似,用于其他属性,如UV。

欲了解更多信息,请参阅本答:verticesNeedUpdate in Three.js

three.js所R.80

+1

Mmmh,所以你的意思是我没有选择,但我想移动它每次都用新的来代替我的贴花? – Hellium

+0

@WestLangley在这种情况下,“你不能”意味着什么?你的意思是Three.js不会在内部更新这些值吗?如果是这样,你知道为什么当用户尝试更新不可变属性时,库不会发出警告或错误吗? – duhaime