Three.js旋轉的自定義幾何問題

我剛開始使用Javascript，特別是three.js。我有一個自定義的幾何體，我用它來創建一個三角棱鏡。它產生了正確的形狀，但是當它旋轉時，一些面看起來不正確。其他內置幾何（CubeGeometry，CylinderGeometry ...）工作得很好。它與我的自定義幾何有關嗎？還是它與照明有關？或者網格或材質？Three.js旋轉的自定義幾何問題

這裏是正在發生的事情的一個例子小提琴：3D Shapes Fiddle

下面是相關代碼：

function getTriPrismGeometry(){ 
    var geometry = new THREE.Geometry() 

    geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(-100, 100, 0))); 
    geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(-100, -100, 0))); 
    geometry.vertices.push(new THREE.Vertex(new THREE.Vector3( 100, -100, 0))); 
    geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(-100, 100, -100))); 
    geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(-100, -100, -100))); 
    geometry.vertices.push(new THREE.Vertex(new THREE.Vector3( 100, -100, -100))); 

    geometry.faces.push(new THREE.Face3(0,1,2)); 
    geometry.faces.push(new THREE.Face3(3,4,0)); 
    geometry.faces.push(new THREE.Face3(0, 1, 4)); 
    geometry.faces.push(new THREE.Face3(1, 4, 5)); 
    geometry.faces.push(new THREE.Face3(1, 2,5)); 
    geometry.faces.push(new THREE.Face3(2, 0, 3)); 
    geometry.faces.push(new THREE.Face3(2, 3, 5)); 
    geometry.faces.push(new THREE.Face3(3,4, 5)); 

    geometry.computeCentroids(); 
    geometry.computeFaceNormals(); 
    geometry.computeVertexNormals(); 

    init(geometry, true); 
} 

function init(geometry, isCustom) { 

    camera = new THREE.PerspectiveCamera(75, width/height, 1, 10000); 
    camera.position.z = 300; 

    scene = new THREE.Scene(); 

    material = new THREE.MeshLambertMaterial({ color: 0xff0000 }); 
    mesh = new THREE.Mesh(geometry, material); 

    if (isCustom){ 
     material.side = THREE.DoubleSide; 
     mesh.doubleSided = true; 
    } 

    scene.add(mesh); 

    ambient = new THREE.AmbientLight(0x101010); 
    ambient.position.set(0, -70, 100).normalize(); 
    scene.add(ambient); 

    directionalLight = new THREE.DirectionalLight(0xffffff); 
    directionalLight.position = camera.position; 
    scene.add(directionalLight);; 

} 

function animate() { 

    // note: three.js includes requestAnimationFrame shim 
    requestAnimationFrame(animate); 

    render(); 
} 
function render(){ 
    var delta = Date.now() - start; 

    directionalLight.position = camera.position; 

    //mesh.position.y = Math.abs(Math.sin(delta * 0.002)) * 150; 
    mesh.rotation.x = delta * 0.0003; 
    mesh.rotation.z = delta * 0.0002; 


    renderer.render(scene, camera); 

}

我非常新的three.js所，特別是3D渲染和任何幫助讚賞。提前致謝！

來源

2013-04-14 ScottyLa

你可能想看看主three.js所的網站上列出了這個問題。相關部分是討論相機的遠近值和你正在查看的物體以及多邊形如何被「剪切」，這是一種很好的方式來表示多邊形不會被繪製，它存在於遠近值之外相機。這是一個畫布渲染器問題。 https://github.com/mrdoob/three.js/issues/1035#issuecomment-3423126 –

在您的自定義幾何體中，您需要按照逆時針順序指定面部頂點。

使用該修復程序，您的自定義幾何結構就很好。

另外，從當前的three.js例子中學習。您的代碼使用過時的模式。例如，Vertex已被棄用。這種新的模式是：

geometry.vertices.push(new THREE.Vector3(-100, 100, 0));

http://jsfiddle.net/JLKCU/3/ - three.js所r.54

來源

2013-04-14 07:22:56 WestLangley

感謝您的所有幫助，您對頂點順序的更改非常完美！同樣感謝您對照明和陰影問題的關注。 – ScottyLa

Three.js旋轉的自定義幾何問題

回答

相關問題