Javascript 如何在three.js中构建自定义平面几何体？

我想在three.js中创建一个平面，但点多于默认点（因此我不想使用PlaneGeometry，因为我认为它不允许我定义自定义点）。原因是，我想能够动画或移动任何给定的时间点

这就是我到目前为止所做的：

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();
}

我想做的是创建如下内容：

---

尝试在THREE.PlaneGeometry中再添加两个参数

三.平面几何图形（宽度、高度、宽度段、高度段）

查阅库（查看函数调用），查阅文档

这也可能用于：

---

由于涉及平面几何，它已被弃用（因此将在下一版本中删除）。改为使用平面缓冲几何体

@如果你想要“正常”平面划分，pailhead的答案是正确的

如果希望顶点具有其他位置，则必须按顶点构建几何体顶点，这是另一种情况*

此外，这也满足了您以后移动/设置顶点动画的需要，您可以在几何体创建后通过以下方式更改每个顶点的位置：

planeMesh.geometry.vertices[i].set(x,y,z);// this way you can move each vertex coordinates
planeMesh.geometry.verticesNeedUpdate=true;

---

*：具有4个顶点（=2个三角形）的平面示例：

当然，使该几何体成为平面的原因是4个顶点是共线的

---

当您创建具有多个面的几何体时，您知道您需要笔+纸来绘制面：）根据您的几何体，您还可以使用算法。

我使用以下方法创建了自定义平面：

        // 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 );

//平面
变量大小=500，步长=100；
var geometry=new THREE.geometry（）；
对于（var i=-size；i如果要添加具有自定义边框的平面，建议您直接更改位置属性数组并更新几何体点位置：

//这里您选择了x中的分区
常数x_长度=1
常数除法=10
让几何体=新的三个。平面缓冲几何体（x_length，1，divisions，1）
let material=new THREE.MeshPhongMaterial（{color:0xecf0f1，线框：true}）
设pointPos=geometry.getAttribute（“位置”）.array
for（设i=0；i

下面是我的示例
你如何逐点构建它？抱歉，忽略上面的帖子（我仍然习惯stackoverflow）。因此，我尝试以下操作：
geometry.vertex.push（新三点.矢量3（0,1,10），//vertex0新三点.矢量3（1,0,10），//1新三点.矢量3（1,1,10），//2新三点.矢量3（0,0,10）//3）；geometry.faces.push（新建三个.Face3（2,1,0），//使用秩为2,1,0的顶点新建三个.Face3（1,1,2）//顶点[3]，1,2…）
但是我得到了一个错误：gl抽屉元素：尝试访问属性1中超出范围的顶点。您可以删除以前的注释。您要求我调试代码，请链接一个JSFIDLE。顺便说一句，您可以对您喜欢的答案进行投票，并验证给您带来最多的答案。我用最新版本的threejs和corre更新了将面3（1,1,2）修改为（3,1,2）。这就是错误的原因（面3需要3点…）。但是你仍然有工作要做。我不能为你做，但你可能必须检查这些问题，你好，问题是纹理显示不正确？你好，维克托，可以为你的自定义平面添加纹理吗？是的。我的自定义在我的计划中是针对“地面”的，它起作用了。这里：var ground=new THREE.Mesh（新的3.PlaneGeometry（1000,1000,50,50），新的3.MeshLambertMaterial（{color:0xFFFFFF}））；ground.receiveShadow=true；ground.position.set（0，-25,0）；ground.rotation.x=-Math.PI/2；scene.add（ground）；嗨Victor，如果你同意的话，你能看看我的JS小提琴吗？我看到的屏幕上只有一条线。
        // 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 );