Threejs使用顶点自定义三维几何体
Threejs custom 3d geometry using vertices
我正在尝试使用顶点制作圆柱体曲面的四分之一,只有长表面积,而不是边。我尝试制作一个四边形列表,但这段代码不起作用。http://jsfiddle.net/R7pQB/32/
for(i = 90; i > 0; i -= 2 ){
geometry.vertices.push( new THREE.Vector3( 0, quad1_y[i], quad1_z[i]) );
geometry.vertices.push( new THREE.Vector3( L, quad1_y[i], quad1_z[i]) );
geometry.vertices.push( new THREE.Vector3( L, quad1_y[i - 1], quad1_z[i - 1]) );
geometry.vertices.push( new THREE.Vector3( 0, quad1_y[i - 1],quad1_z[i - 1]) );
geometry.faces.push( new THREE.Face4(0,1,2,3) );
}
正如@newvalue所指出的,您并没有增加人脸索引。您正在将顶点推向网格。接下来你需要把它们连接到一张脸上。我发现使用第二个计数器要容易得多,对于Face4实例,它会增加4。此外,您可以计算并在同一循环中添加顶点/面,而不是两个循环:
function initGeometry( R , L) {
var geometry = new THREE.Geometry();
var deg;
var f = 0;
for( deg = 0; deg < 90; deg++,f += 4 ){
var ca = deg * 0.01745329252;//cache current angle
var na = (deg+1) * 0.01745329252;//cache next angle (could do with a conditional and storing previous angle)
var ccos = Math.cos(ca);//current cos
var csin = Math.sin(ca);//current sin
var ncos = Math.cos(na);//next cos
var nsin = Math.sin(na);//next sin
var tl = new THREE.Vector3( R * ccos, L * .5, R * csin);//top left = current angle, positive y
var bl = new THREE.Vector3( R * ccos,-L * .5, R * csin);//bottom left = current angle, negative y
var tr = new THREE.Vector3( R * ncos, L * .5, R * nsin);//top right = next angle, positive y
var br = new THREE.Vector3( R * ncos,-L * .5, R * nsin);//bottom right = next angle, negative y
/*
tl--tr
| /|
| / |
|/ |
bl--br
*/
geometry.vertices.push(tl,tr,br,bl);//notice vertices are added in (cw) order
geometry.faces.push(new THREE.Face4(f,f+1,f+2,f+3));//add the correct face indices, easy with a second counter
}
一些代码经过扩展,因此更容易理解顶点之间的连接、它们在三维空间中的位置,以及它们在添加面时引用的顶点阵列中的位置。
根据你的小提琴,以下是完整的清单:
var renderer;
var camera;
var scene;
var object;
initConfig();
initGeometry( 50, 300 );
startRender();
function initConfig() {
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1);
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 100);
camera.position.set(0, 0, 100);
camera.lookAt(scene.position);
scene.add(camera);
}
function initGeometry( R , L) {
var geometry = new THREE.Geometry();
var deg;
var f = 0;
for( deg = 0; deg < 90; deg++,f += 4 ){
var ca = deg * 0.01745329252;//cache current angle
var na = (deg+1) * 0.01745329252;//cache next angle (could do with a conditional and storing previous angle)
var ccos = Math.cos(ca);//current cos
var csin = Math.sin(ca);//current sin
var ncos = Math.cos(na);//next cos
var nsin = Math.sin(na);//next sin
var tl = new THREE.Vector3( R * ccos, L * .5, R * csin);//top left = current angle, positive y
var bl = new THREE.Vector3( R * ccos,-L * .5, R * csin);//bottom left = current angle, negative y
var tr = new THREE.Vector3( R * ncos, L * .5, R * nsin);//top right = next angle, positive y
var br = new THREE.Vector3( R * ncos,-L * .5, R * nsin);//bottom right = next angle, negative y
/*
tl--tr
| /|
| / |
|/ |
bl--br
*/
geometry.vertices.push(tl,tr,br,bl);//notice vertices are added in (cw) order
geometry.faces.push(new THREE.Face4(f,f+1,f+2,f+3));//add the correct face indices, easy with a second counter
}
object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({color:0x660033, side:THREE.DoubleSide}));
object.position.set(0,0,0);
object.rotation.x = Math.PI * .35;//a bit of rotation to make the structure visible
object.scale.set(.35,.35,.35);//again, to make things easier to see
scene.add(object);
}
function startRender(){
renderer.render(scene, camera);
}
此外,网格非常密集(半个圆柱体有90个面)。您可能想尝试使用较少的线段绘制网格,这将使您有机会练习顶点/面索引。
几何体的所有面都有相同的顶点索引?
geometry.faces.push( new THREE.Face4(0,1,2,3) );
相关文章:
- 通过拖动可以更改三维模型对象在Three.js场景中的位置
- 在哪里可以找到可用的开源三维图表
- 如何在three.js中加载指定文件内容而非路径的三维模型
- 创建三维维度数组
- 如何用javascript创建三维数组我想把数据插入数组中,这有助于我的代码
- 使用三个js加载三维模型示例
- CSS三维旋转;不能在Chrome上使用列布局
- 方向感知三维立方体动画
- Three.js:将三维位置转换为二维屏幕位置
- JavaScript交互式三维对象
- 在线显示三维模型
- 在处理中围绕三维球体动态观察
- Chrome动画CSS3三维立方体与悬停状态问题
- 使用javascript在三维中旋转文本和图片
- Javascript 三维数组,得到错误
- 二维对象/将数组关联到三维对象Javascript中
- 来自 Javascript 中二维数组的三维数组
- 三.js:“选择工具” 如何检测二维正方形和三维物体的交集
- Threejs使用顶点自定义三维几何体
- 如何更改p5js三维几何体的填充