Пользовательские формы с three.js

Я пытаюсь создать многоугольник в three.js. Это код, который я использовал.

function DeployZone(coordinatesList) {
// Create the polygon Shape
{


    var material = new THREE.MeshLambertMaterial({ color: 0x00ffcc });

    var faces = [0, 1, 2, 3, 4];

    var geometry = new THREE.Geometry();
    for (var i = 0; i < coordinatesList.length; i++) {
        geometry.vertices.push(new THREE.Vector3(
            coordinatesList[i].x,
            coordinatesList[i].z,
            coordinatesList[i].y
        ));
    }


    for (var i = 0; i<faces.length; i++) {
        for (var j = 1; j < faces.length - 1; j++) {
            geometry.faces.push(new THREE.Face3(faces[0], faces[j], faces[j + 1]));
        }
    }

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

}
}

Вот координаты, которые я передаю:

var coordinatesList = new List<Coordinates>() {
      new Coordinates(X:0,Y:0,Z:0),
       new Coordinates(X:0,Y:10,Z:0),
       new Coordinates(X:5,Y:10,Z:0),
       new Coordinates(X:2,Y:8,Z:0),
       new Coordinates(X:5,Y:5,Z:0)
    };

Хотя он создает многоугольник, но он не создает желаемый многоугольник. Вершина в (x:2,y:8,z:0) не в позиции. Проблема в том, что треугольные грани не определены должным образом. Пожалуйста, помогите с этим, чтобы грани и вершины могли быть динамическими, а сгенерированная геометрия подходила.

Благодаря тонну.

P.S. Я пытался работать с формой, но, похоже, это тоже не работает для меня. Я использовал это в коде.


javascript three.js 3d geometry-surface
person SAK    schedule 23.10.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Использование THREE.Shape() прекрасно подходит в вашем случае:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(0, 5, 10);
camera.lookAt(0, 5, 0);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var grid = new THREE.GridHelper(30, 30, 0xffffff, 0x404040);
grid.rotation.x = Math.PI * 0.5;
scene.add(grid);

var coordinatesList = [
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(0, 10, 0),
  new THREE.Vector3(5, 10, 0),
  new THREE.Vector3(2, 8, 0),
  new THREE.Vector3(5, 5, 0)
];


// shape
var geomShape = new THREE.ShapeBufferGeometry(new THREE.Shape(coordinatesList));
var matShape = new THREE.MeshBasicMaterial({color:"blue"});
var shape = new THREE.Mesh(geomShape, matShape);
scene.add(shape);

// points
var geom = new THREE.BufferGeometry().setFromPoints(coordinatesList);
var matPoints = new THREE.PointsMaterial({size: 0.55, color: "pink"});
var points = new THREE.Points(geom, matPoints);
scene.add(points);


// lines
var matLines = new THREE.LineBasicMaterial({color: "magenta"});
var lines = new THREE.LineLoop(geom, matLines);
scene.add(lines);


renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>

Три.js r109

person prisoner849    schedule 23.10.2019
comment
Привет, большое спасибо. Однако есть проблема. Я обновил координаты следующим образом: coordinatesList = [ new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 10, 10), new THREE.Vector3(5, 10, 10), new THREE.Vector3(2, 8, 8 ), new THREE.Vector3(5, 5, 5) ]; хотя точки и линии были отображены, как и ожидалось, но не форма. - person SAK; 24.10.2019