Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 142159

Create plane from polyline points using threejs

$
0
0

I am trying to achieve something like this:

enter image description here

I followed solution from this post Extruding a line in three.js but when I try this it renders nothing.

Here is the code which I tried:

let containerThreeJs = document.getElementById('threed-view-container');
let w = containerThreeJs.offsetWidth;
let h = containerThreeJs.offsetHeight;

let renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(w, h);
containerThreeJs.appendChild(renderer.domElement);


let scene = new THREE.Scene();

let camera = new THREE.PerspectiveCamera(5, 1, 1, 1000);
camera.position.setScalar(300);

let threeDpoints = [[88.5,370],[229.5,268],[300.5,333],[373.5,290],[426.5,392]];

let geometry = extrudePath(threeDpoints, 100);

            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00, side: THREE.DoubleSide} );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

var controls = new THREE.OrbitControls(camera, renderer.domElement);

render();

function resize(renderer) {
      const canvas = renderer.domElement;
      const width = canvas.clientWidth;
      const height = canvas.clientHeight;
      const needResize = canvas.width !== width || canvas.height !== height;
      if (needResize) {
          renderer.setSize(width, height, false);
      }
      return needResize;
}

function render() {
      if (resize(renderer)) {
            camera.aspect = canvas.clientWidth / canvas.clientHeight;
            camera.updateProjectionMatrix();
      }
      renderer.render(scene, camera);
      requestAnimationFrame(render);
}

function extrudePath( points, depth ) {
      var geometry = new THREE.PlaneGeometry(10, 10, points.length - 1, 1);
      var vertices = geometry.vertices;
      // if I comment this loop then the plane is visible
      for (var i = 0, l = points.length, p; i < l; i++) {
            p = points[i];

            vertices[i].x = vertices[i + l].x = p[0];
            vertices[i].y = vertices[i + l].y = p[1];

            vertices[i].z = p[2];
            vertices[i + l].z = p[2] + depth;
      }

      geometry.computeFaceNormals();

      return geometry;
}

If I remove the for loop from extrudePath then the simple plane is visible but if I keep it nothing seems to render.


Viewing all articles
Browse latest Browse all 142159

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>