Jak oddać kształt punktów 2D w trzech.js? Nie znalazłem żadnej geometrii roboczej ... muszę tylko zrobić wielokąt punktów, które są w tej samej płaszczyźnie.

Kształt nie ma prawa do tego, ponieważ obsługuje tylko kordory 2D i muszę użyć punktów 3D ...

Używam następującego kodu, aby utworzyć kształt w płaszczyźnie X, Y

 var squareShape = new THREE.Shape();
 squareShape.moveTo( 0,0 );
 squareShape.lineTo( 0, 50 );
 squareShape.lineTo( 20, 80 );
 squareShape.lineTo( 50, 50 );
 squareShape.lineTo( 0, 0 );

Jak zrobić w pracy IT 3D World? Jakieś rozwiązanie? lubić:

squareShape.moveTo( 0,0,0 );
squareShape.lineTo( 0, 50, 50 );

Itp

3
Jan Vorisek 30 wrzesień 2012, 00:16

3 odpowiedzi

Najlepsza odpowiedź

Musisz utworzyć geometrię w wierzchołków kształtów (po ekstrakcji) i użyć triangulacji, aby wykonać twarze.

Kod powinien wyglądać coś takiego:

var geometry = new THREE.Geometry();
var shapePoints = shape.extractPoints();
var faces = THREE.Shape.Utils.triangulateShape(shapePoints.shape, shapePoints.holes);
for (var i = 0; i < shapePoints.shape.length; i++) {
    geometry.vertices.push(new THREE.Vector3(shapePoints.shape[i].x, 0, shapePoints.shape[i].y));
}
for (var i = 0; i < faces.length ; i++) {
    var a = faces[i][2] , b = faces[i][1] , c = faces[i][0] ;
    var v1 = shapePoints.shape[a], v2 = shapePoints.shape[b], v3 = shapePoints.shape[c];

    geometry.faces.push( new THREE.Face3(a, b, c) );    
    geometry.faceVertexUvs[0].push(
        [ new THREE.UV(v1.x ,v1.y ), new THREE.UV(v2.x, v2.y), new THREE.UV(v3.x, v3.y)]);
}
geometry.computeCentroids();
geometry.computeFaceNormals();
1
EliSherer 29 wrzesień 2012, 22:59

Możesz utworzyć wielokąt z punktów 3D, takich jak:

// geometry
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( 0, 5, 0 ) );
geometry.vertices.push( new THREE.Vector3( 5, -5, -2 ) );
geometry.vertices.push( new THREE.Vector3( -5, -5, 2 ) );
geometry.vertices.push( new THREE.Vector3( 0, 5, 0 ) ); // close the loop

// material
var material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 1 } );

// line
var line = new THREE.Line( geometry, material );
scene.add( line );

Trzy.js r.69.

10
WestLangley 8 grudzień 2014, 23:42

Od R51 jest nowy typ geometrii, THREE.ShapeGeometry, który jest kształtem dwuwymiarowym skonstruowanym na jednej płaszczyźnie. Przykład jego użycia można znaleźć tutaj: http://mrdoob.github.com/three.js/ Przykłady / webgl_geometry_shapes.html

Możesz użyć THREE.Shape, aby skonstruować kształt 2D, a następnie zadzwonić shape.makeGeometry(), aby przekonwertować go w THREE.ShapeGeometry. Oto przykład kodu pseudo, który tworzy krąg:

var circle = new THREE.Shape();
var radius = 6;

for (var i = 0; i < 16; i++) {
  var pct = (i + 1) / 16;
  var theta = pct * Math.PI * 2.0;
  var x = radius * Math.cos(theta);
  var y = radius * Math.sin(theta);
  if (i == 0) {
    circle.moveTo(x, y);
  } else {
    circle.lineTo(x, y);
  }
}

var geometry = circle.makeGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var mesh = new THREE.Mesh(geometry, material);

mesh ma position, rotation i scale, który może pomóc w zorolić obiekt w przestrzeni trójwymiarowej.

9
jonobr1 18 październik 2012, 06:10