6

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.

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

4 Answers 4

6

Becare about PlaneGeometry, it is deprecated (so it will be removed in a next revision). Use PlaneBufferGeometry instead.

@pailhead's answer is correct if you want the 'normal' plane division.

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) :

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.

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.

7
  • How would you go about building it vertex by vertex?
    – blazerix
    Jul 8, 2015 at 20:35
  • Sorry, ignore the above post (I'm still getting used to stackoverflow). So, I try the following: geometry.vertices.push( new THREE.Vector3(0,1,10),//vertex0 new THREE.Vector3(1,0,10),//1 new THREE.Vector3(1,1,10),//2 new THREE.Vector3(0,0,10)//3 ); geometry.faces.push( new THREE.Face3(2,1,0),//use vertices of rank 2,1,0 new THREE.Face3(1,1,2)//vertices[3],1,2... ); but I get the an error: glDrawElements: attempt to access out of range vertices in attribute 1
    – blazerix
    Jul 9, 2015 at 14:45
  • you can delete your previous comment. You are asking me to debug code, please link a jsfiddle. You can upvote the answers you like by the way, and validate the one that brings most to you.
    – Mouloud85
    Jul 9, 2015 at 14:49
  • I updated the fiddle with the last version of threejs and corrected the Face3(1,1,2) to (3,1,2). That was the cause of the error (you need 3 points for a face3...). However you still have work to do. I cannot do it for you, but you may will have to check those questions stackoverflow.com/questions/17640089/face-is-not-drawn, stackoverflow.com/questions/19085369/…
    – Mouloud85
    Jul 9, 2015 at 15:23
  • Hi there, the problem is with the texture not displaying right?
    – blazerix
    Jul 9, 2015 at 15:47
1

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 );
3
  • Hi Victor, Would it be possible to add a texture to your custom plane?
    – blazerix
    Jul 9, 2015 at 15:58
  • Yes. My customization was for a "ground" in my plan and it worked. here: var ground = new THREE.Mesh( new THREE.PlaneGeometry(1000, 1000, 50, 50), new THREE.MeshLambertMaterial({color:0xFFFFFF}) ); ground.receiveShadow = true; ground.position.set(0, -25, 0); ground.rotation.x = -Math.PI / 2; scene.add(ground); Jul 9, 2015 at 17:08
  • Hi Victor, if it is okay with you, could you take a look at my JS Fiddle? All I see is a line across the screen. jsfiddle.net/z9z28ume
    – blazerix
    Jul 10, 2015 at 13:57
0

Try adding two more arguments to THREE.PlaneGeometry.

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

0

If you want to add a plane with custom borders I recommend you to change the position attribute array directly and updating the geometry points position:

// Here you chose the divisions in x
    const x_lenght = 1 
    const divisions = 10
    
    let geometry = new THREE.PlaneBufferGeometry( x_lenght, 1, divisions, 1 )
    let material = new THREE.MeshPhongMaterial( { color: 0xecf0f1, wireframe: true } )
    
    let pointPos = geometry.getAttribute("position").array
        
    for (let i = 0; i < divisions + 1; i++) {
      let x = pointPos[3 * i] + x_lenght/2

      // This case is making y = x^2
      pointPos[3 * i + 1] = Math.pow(x, 2) 
      pointPos[3 * ( divisions + 1 ) + 3 * i + 1] = - pointPos[3 * i  + 1]
      
      console.log(`x = ${pointPos[3 * i]}; y = ${pointPos[3 * ( divisions + 1 ) + 3 * i + 1]}`)

        }
    
    pointPos.needsUpdate = true;
    
    mesh = new THREE.Mesh(geometry, material )

    scene.add(mesh)

Here is my example https://codepen.io/ferrari212/pen/bGpgLBd?editors=0010

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.