javascript - 如何在 three.js 中构建自定义平面几何图形？

Question

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

我想做的是创建这样的东西:

http://www.math.ubc.ca/~cass/courses/m308-02b/projects/schweber/square%20tiles.gif

Answer 1

注意 PlaneGeometry，它已被弃用(因此将在下一个修订版中删除)。请改用 PlaneBufferGeometry。

如果您想要“正常”平面划分，@pailhead 的回答是正确的。

如果您希望顶点有其他位置，您必须为每个顶点构建几何顶点，这是其他东西*。

此外，这也满足了您稍后移动/动画顶点的需要，您可以在创建几何体后更改每个顶点的位置，方法是编写:

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

---

*:具有 4 个顶点(=2 个三 Angular 形)的平面示例:

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

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

当你创建一个有很多面的几何体时，你就会明白你需要一支笔+一张纸来画出你的脸 :) 根据你的几何体，你还可以使用一种算法。