我刚刚开始使用 Javascript,特别是three.js。我有一个自定义几何图形,我用它来创建一个三棱柱。它产生了正确的形状,但是当它旋转时,一些面看起来不正确。其他内置几何图形(CubeGeometry、CylinderGeometry ...)工作得很好。它与我的自定义几何图形有关还是与照明有关?还是网格或材质?
这是正在发生的事情的一个例子的小提琴: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 渲染,非常感谢任何帮助。提前致谢!