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旋转的自定义几何问题

回答

相关问题