Show grid in object

Stencils: How to show grid in object in threejs

by mmalex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	overflow: hidden;
	padding: 0;
	margin: 0;
}

JavaScript

var camera, scene, renderer, controls, geometry, material, mesh, gridHelper, polygon;

var edges = [{
    "x": -204.87113421108512,
    "y": -150,
    "z": 350.73338884671745
}, {
    "x": -204.87113421108535,
    "y": -150,
    "z": -38.02713383973953
}, {
    "x": -83.08211641046344,
    "y": -150,
    "z": -39.62530388610881
}, {
    "x": -78.88807649109879,
    "y": -150,
    "z": -538.3155247201529
}, {
    "x": 220.63777329601388,
    "y": -150,
    "z": -535.796479191672
}, {
    "x": 220.63777329601444,
    "y": -150,
    "z": 176.94968924487634
}, {
    "x": -53.07402331399715,
    "y": -150,
    "z": 176.9496892448766
}, {
    "x": -53.07402331399726,
    "y": -150,
    "z": 350.41591086077415
}];

init();
animate();

function init() {

    scene = new THREE.Scene();

    renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x555555, 1);
    renderer.sortObjects = true;

    document.body.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    scene.add(camera);

    camera.position.x = 100;
    camera.position.y = 1000;
    camera.position.z = -100;

    controls = new THREE.OrbitControls(camera);

    gridHelper = new THREE.GridHelper(1500, 30);
    gridHelper.position.y = -150;
    scene.add(gridHelper);

    var shape = new THREE.Shape();
    let firstEdge = edges[0];
    shape.moveTo(firstEdge.x, -firstEdge.z);
    const len = edges.length;
    for (let i = 1; i < len; i++) {
        shape.lineTo(edges[i].x, -edges[i].z);
    }

    shape.lineTo(firstEdge.x, -firstEdge.z);

    var material = new THREE.MeshBasicMaterial({
        color: 0x00aa00,
        opacity: 1,
        side: THREE.DoubleSide,
        transparent: false,
        depthTest: false
    });

    var polygonGeometry = new...