Создайте плоскость из точек полилинии, используя threejs

Я пытаюсь добиться чего-то вроде этого:

введите здесь описание изображения

У меня есть Polyline и его точки, теперь я хочу создать лист, как показано на рисунке. Выше находится полилиния, а ниже — лист, созданный из точек этой полилинии.

Я следовал решению из этого сообщения Выдавливание строки в three.js но когда я пытаюсь сделать это, ничего не получается.

Вот код, который я пробовал:

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>

Если я удалю цикл for из extrudePath, тогда будет видна простая плоскость, но если я оставлю ее, ничего не будет отображаться.


javascript three.js 3d plane
person Sagar Guhe    schedule 22.11.2019    source источник
comment
Взгляните на этот ответ SO для некоторых идей.   -  person prisoner849    schedule 22.11.2019

Ответы (1)


arrow_upward
0
arrow_downward

Я не уверен, но я вижу это: в массиве точек threeDpoints каждая точка состоит из 2 частей. Однако в функции extrudePath она ищет 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;`
person Ethan Hermsey    schedule 22.11.2019