我刚开始使用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渲染和任何帮助赞赏。提前致谢!
你可能想看看主three.js所的网站上列出了这个问题。相关部分是讨论相机的远近值和你正在查看的物体以及多边形如何被“剪切”,这是一种很好的方式来表示多边形不会被绘制,它存在于远近值之外相机。这是一个画布渲染器问题。 https://github.com/mrdoob/three.js/issues/1035#issuecomment-3423126 –