Wie zum Rendern von 2D-Form der Punkte in three.js

Rendern 2D-Form der Punkte in three.js? Ich habe nicht finden keine arbeiten geometrie... ich muss nur machen polygon der Punkte, die in der gleichen Ebene.

Form nicht Recht, dass es unterstützt nur 2D-Koords und ich brauche für die Verwendung von 3D-Punkten...

Ich bin mit dem folgenden code zum erstellen der Form in der X,Y-Ebene

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

Wie man in der Arbeit ist es die 3D-Welt? Jede Lösung? wie:

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

etc

InformationsquelleAutor Jan Vorisek | 2012-09-29

  1. 1

    Müssen Sie erstellen Sie eine geometrie mit den Formen, die' vertices (nach der Extraktion) und die Verwendung der triangulation, um die Gesichter.

    Der code sollte wie folgt Aussehen:

    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();
    was ist 'Form' hier? In meinem Fall habe ich einen Kreis und wenn ich Schreibe " Kreis.extractPoints' bin immer Fehler.
    vielleicht könnte dies helfen: stackoverflow.com/a/28029600/678780

    InformationsquelleAutor EliSherer

  2. 10

    Können Sie erstellen Sie ein polygon aus 3 Punkten etwa so:

    //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 );

    three.js r.69

    InformationsquelleAutor WestLangley

  3. 9

    Als der r51 gibt es eine neue Art von geometrie, die THREE.ShapeGeometry eine zwei-dimensionale Form gebaut auf einer Ebene. Ein Beispiel für seine Verwendung finden Sie hier: http://mrdoob.github.com/three.js/examples/webgl_geometry_shapes.html

    Können Sie THREE.Shape zu konstruieren, die 2d-Form und rufen Sie dann shape.makeGeometry() konvertieren es in eine THREE.ShapeGeometry. Hier ist eine pseudo-code-Beispiel, das einen Kreis macht:

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

    Den mesh hat position, rotation, und scale die Ihnen helfen können, richten Sie das Objekt im dreidimensionalen Raum.

    InformationsquelleAutor jonobr1

Schreibe einen Kommentar