javascript 你如何在three.js中构建自定义平面几何？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31297567/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you build a custom plane geometry in three.js?
提问by blazerix
I want to create a plane in three.js, but with more points than default (so I don't want to use PlaneGeometry, as I don't think it will let me define custom points). The reason being is that I want to be able to animate or move any given point in time.
我想在three.js中创建一个平面，但点数比默认值多（所以我不想使用PlaneGeometry，因为我认为它不会让我定义自定义点）。原因是我希望能够动画或移动任何给定的时间点。
This is what I have so far:
这是我到目前为止：
var camera;
var scene;
var renderer;
var mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);
var geometry = new THREE.PlaneGeometry( 50, 50);
var texture = THREE.ImageUtils.loadTexture('images/03032122.png', {}, function() {
renderer.render(scene, camera);
})
var material = new THREE.MeshBasicMaterial({map: texture, transparent: true })
mesh = new THREE.Mesh(geometry, material );
mesh.position.z = -50;
scene.add( mesh );
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xffffff, 1);
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
render();
}
function animate() {
//mesh.scale.x+= 0.0003;
render();
requestAnimationFrame( animate );
}
function render() {
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
What I'm looking to do, is create something like this:
我想要做的是创建这样的东西：
http://www.math.ubc.ca/~cass/courses/m308-02b/projects/schweber/square%20tiles.gif
http://www.math.ubc.ca/~cass/courses/m308-02b/projects/schweber/square%20tiles.gif
回答by Atrahasis
Becare about PlaneGeometry, it is deprecated (so it will be removed in a next revision). Use PlaneBufferGeometry instead.
注意PlaneGeometry，它已被弃用（因此它将在下一个修订版中删除）。请改用 PlaneBufferGeometry。
@pailhead's answer is correct if you want the 'normal' plane division.
如果您想要“正常”平面划分，@pailhead 的答案是正确的。
If you want the vertices to have other positions you would have to build the geometry vertex per vertex that is something else*.
如果您希望顶点具有其他位置，则必须为每个顶点构建几何顶点，这是其他东西*。
Also and that answers your need to move/animate the vertices later, you can change each vertex'position after the geometry creation by writing :
此外，这满足了您稍后移动/动画顶点的需要，您可以在几何创建后通过编写更改每个顶点的位置：
planeMesh.geometry.vertices[i].set(x,y,z);// this way you can move each vertex coordinates
planeMesh.geometry.verticesNeedUpdate=true;
* : example for a plane with 4 vertices (=2 triangles) :
* ：具有 4 个顶点（= 2 个三角形）的平面示例：
var geo=new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(x1,y1,z1),//vertex0
new THREE.Vector3(x2,y2,z2),//1
new THREE.Vector3(x3,y3,z3),//2
new THREE.Vector3(x4,y4,z4)//3
);
geometry.faces.push(
new THREE.Face3(2,1,0),//use vertices of rank 2,1,0
new THREE.Face3(3,1,2)//vertices[3],1,2...
);
of course what makes this geometry a plane is that the 4 vertices are coplonar.
当然，使这个几何体成为平面的原因是 4 个顶点是共面的。
When you create a geometry with many faces, you understand you need a pen + paper to draw your faces :) Depending on your geometry you can also use an algorithm.
当您创建具有多个面的几何图形时，您会明白需要笔+纸来绘制您的面:) 根据您的几何图形，您还可以使用算法。
回答by Víctor Romário Paz de Jesus
I created my customized plane, using:
我创建了我的定制飞机，使用：
// Plane
var size = 500, step = 100;
var geometry = new THREE.Geometry();
for ( var i = - size; i <= size; i += step ) {
geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
geometry.vertices.push( new THREE.Vector3( size, 0, i ) );
geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
geometry.vertices.push( new THREE.Vector3( i, 0, size ) );
}
var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.5 } );
var line = new THREE.Line( geometry, material, THREE.LinePieces );
scene.add( line );
回答by pailhead
Try adding two more arguments to THREE.PlaneGeometry.
尝试向 THREE.PlaneGeometry 添加另外两个参数。
THREE.PlaneGeometry( width , height, widthSegments , heightSegments)
THREE.PlaneGeometry( width , height, widthSegments , heightSegments)
consult the library (look at a function call), consult the documentation.
查阅库（查看函数调用），查阅文档。
This might also possibly be used:
这也可能用于：
http://threejs.org/docs/#Reference/Extras.Geometries/ParametricGeometry
http://threejs.org/docs/#Reference/Extras.Geometries/ParametricGeometry
