0

I'm currently building floor plan top view using orthographic camera. I have different shapes of floor plane so i needed to fill it with grid lines like a map texture that adjusts based on the shape of the geometry. How do you fill a shape geometry with grid lines. I can't use grid helper since you can't map it like a material in geometry.

Here's my code

        var scene = new THREE.Scene();
        var camera = new THREE.OrthographicCamera(
            window.innerWidth / - 2, window.innerWidth / 2,window.innerHeight / 2, window.innerHeight / - 2, 1, 1000 );

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        // this can be any shape vertices
        var rectangle_vertices = `[
            {"x":37.59899999999991,"y":256.15200000000027},
            {"x":37.59899999999992,"y":-196.20799999999997},
            {"x":642.3589999999999,"y":-196.20799999999997},
            {"x":642.3589999999999,"y":256.15200000000027}
        ]`;

        rectangle_vertices = JSON.parse(rectangle_vertices);

        var shape = new THREE.Shape(rectangle_vertices);

        var geometry = new THREE.ShapeGeometry(shape);
        var material = new THREE.MeshBasicMaterial({
            color : 0xffffff
        });

        var floor = new THREE.Mesh(geometry, material);
        scene.add( floor );

        camera.position.x = 300;
        camera.position.y = 0;
        camera.position.z = 5;

        renderer.render( scene, camera );
Peter O.
  • 32,158
  • 14
  • 82
  • 96
Defyleiti
  • 535
  • 1
  • 7
  • 23
  • This example show how to texture an arbitrary shape: https://threejs.org/examples/webgl_geometry_shapes.html – WestLangley Dec 21 '19 at 15:06
  • Also see [this SO answer](https://stackoverflow.com/questions/17558085/three-js-orthographic-camera/17567292#17567292) for how to properly instantiate an orthographic camera. – WestLangley Dec 21 '19 at 15:08
  • Use a custom shader to draw a grid, based on UVs or coordinates of vertices. Or use a texture with grid lines. – prisoner849 Dec 21 '19 at 18:16
  • @WestLangley, Thank you. Regarding camera position of orthographic how do I correctly set it to be on top view? Until now I'm still confused how to position it correctly. like top view, front view etc. – Defyleiti Dec 22 '19 at 03:06

0 Answers0