如何設定正確的方向使用THREE.DecalGeometry

貼花我想了解如何貼花添加到使用網狀THREE.DecalGeometry 如何設定正確的方向使用THREE.DecalGeometry

我每個面將貼花到頂點 - face.a，我試過使用面部正常和任意的Vector3來定義貼花的方向。

我不明白爲什麼所有貼花都沒有正確創建。我在哪裏出錯方向？臉部正常不正確？

function addObjects(){ 
    var geometry = new THREE.BoxGeometry(200, 200, 200, 8, 8, 8); 
    var material = new THREE.MeshLambertMaterial({color: 0xff0000}); 
    cube = new THREE.Mesh(geometry, material); 

    // addWireframeHelper(cube, 0xffffff, 1); 

scene.add(cube); 
    THREE.ImageUtils.crossOrigin = 'Anonymous'; 
    var texture = THREE.ImageUtils.loadTexture('http://i.imgur.com/RNb17q7.png'); 
    geometry.faces.forEach(function(face){ 
    var index = face.a; 
    var vertex = geometry.vertices[index]; 
    var direction = new THREE.Vector3(0,1,0); 
    addDecal(cube, vertex, direction, texture); 
}) 
} 

function addDecal(mesh, position, direction, texture){ 
var size = 16; 
var decalGeometry = new THREE.DecalGeometry( 
    mesh, 
    position, 
    direction, 
    new THREE.Vector3(size,size,size), 
    new THREE.Vector3(1,1,1) 
); 

var decalMaterial = new THREE.MeshLambertMaterial({ 
    map: texture, 
    transparent: true, 
    depthTest: true, 
    depthWrite: false, 
    polygonOffset: true, 
    polygonOffsetFactor: -4, 
}); 

    var m = new THREE.Mesh(decalGeometry, decalMaterial); 
    mesh.add(m); 
}

這是熱點64PX X 64PX

這是他們是如何得到映射...

爲什麼有些捉襟見肘貼花？

我已經建立了JSFIDDLE

編輯：

使用SphereBufferGeometry通過WestLangley建議，我現在高興的是，這種解決方案會爲我工作。

來源

2015-12-09 Neil

不是一個答案，但（1）鍵入'renderer.info'到控制檯就看你有769層的幾何形狀及769繪製每幀調用。此外，你的立方體每面有128個面，當2應該足夠。（2）當面部法線與y軸平行時，貼花可能無法正確定向。嘗試一個球體。（3）你爲什麼使用貼花而不是'THREE.Sprite'或'THREE.Points'？ – WestLangley

@WestLangley（1）證實了769和769（2）添加了球體示例（3）Sprite和Points都指向相機，並且不像平貼紙那樣平放在球體上。我可能不得不妥協和解決這個問題。 – Neil

（1）您的演示與無形的球體和1大貼花。 http://jsfiddle.net/db6j8pc3/3/ - 只是爲了看看你真的在做什麼...（2）是的，而不是貼花，我的意思是建議'THREE.PlaneBufferGeometry'。 – WestLangley

而不是使用THREE.DecalGeometry，您所使用情況的SphereBufferGeometry的部門將是足夠的，而且計算較便宜。

var geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength);

three.js所r.73

來源

2015-12-16 22:52:32 WestLangley

如何設定正確的方向使用THREE.DecalGeometry

回答

相關問題