Create plane from polyline points using threejs

Question

I am trying to achieve something like this:

I have a Polyline and its points now I want to create a sheet same as shown in the image. Above is polyline and below a sheet created from that polyline points.

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;
}

<script src="http://mrdoob.github.io/three.js/build/three.min.js"></script>
<script src=http://mrdoob.github.io/three.js/examples/js/controls/OrbitControls.js></script>
<div id="threed-view-container" style="width: 100%; height: 500px"></div>

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

Take a look at this SO answer for some ideas.

prisoner849
– prisoner849

2019-11-22 14:19:25 +00:00
Commented Nov 22, 2019 at 14:19 — prisoner849
– prisoner849, Commented Nov 22, 2019 at 14:19

Ethan Hermsey · Accepted Answer · 2019-11-22 17:36:00Z

0

I'm not sure, but i see this: In the points array threeDpoints, every point has 2 parts. However in the extrudePath function it's looking for 3. (p[0], p[1], p[2])

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

`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;`

answered Nov 22, 2019 at 17:36

Ethan Hermsey

9305 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create plane from polyline points using threejs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related