ThreeJS 3D zeigt auf "flache" Geometrie (jeder Punkt verbindet sich mit den nächsten Punkten)

Question

Ich zeichne eine 3D Form mit mehreren Vector3 Punkten mit THREE.ConvexGeometry. Auf diese Weise entsteht ein 3D-Objekt, aber was ich eigentlich versuche zu erschaffen, ist eine «3D-Ebene». Hier ist ein Beispiel für einen Drahtmodell, was der Code generiert. Mein Ziel ist es, nur eine einfache Form (rote Linie) und nicht das ganze Volumen zu bekommen.

Der Code ist:

var material = new THREE.MeshPhongMaterial({ 
    color: 0xff0000, 
    shading: THREE.FlatShading, 
    wireframe: true 
}); 
material.side = THREE.DoubleSide; 


let meshPoints = shapeData.meshPoints; //this is a variable 
let points = []; 
for (let i = 0; i < meshPoints.length; i++) {points.push(new THREE.Vector3(meshPoints[i][0],meshPoints[i][1],meshPoints[i][2]));  } 
let geometry = new THREE.ConvexGeometry(points); 

var mesh = new THREE.Mesh(geometry, material); 
mesh.name = shapeData.name; 

mesh.material.transparent = true; 
mesh.material.opacity = 0.2; 

window.scene.add(mesh); 

Answer 1

Sicher, die THREE.ConvexGeometry, die eine konvexe Hülse erzeugt, wird nicht die richtige Wahl eine konkave Oberfläche zu erzeugen.

Wahrscheinlich wollen Sie ein genrate THREE.PlaneGeometry

das Code-Snippet Siehe:

(function onLoad() { 
 
    var container, camera, scene, renderer, controls; 
 
    
 
    init(); 
 
    animate(); 
 

 
    function createModel() { 
 

 
    var radius0 = 60, radius1 = 20, height = 100, 
 
     startAngle = THREE.Math.degToRad(-20), 
 
     endAngle = THREE.Math.degToRad(110), 
 
     horSegs = 25, vertSegs = 25; 
 
    var width = radius0 * (endAngle-startAngle); 
 
    var plane = new THREE.PlaneGeometry(width, height, horSegs, vertSegs); 
 
    
 
    var index = 0; 
 
    for (var i = 0; i <= vertSegs; i++) { 
 
     for (var j = 0; j <= horSegs; j++) { 
 
     var angle = startAngle + j/horSegs * (endAngle - startAngle); 
 
     var vertRel = i/vertSegs; 
 
     var r_add = Math.sin(vertRel*Math.PI); 
 
     var radius = radius0 + radius1 * r_add; 
 
     plane.vertices[index].z = radius * Math.cos(angle); 
 
     plane.vertices[index].x = radius * Math.sin(angle); 
 
     index++; 
 
     } 
 
    } 
 
    plane.computeVertexNormals(); 
 

 
    var material = new THREE.MeshLambertMaterial({ 
 
     color: 0xa2cddd, 
 
     side: THREE.DoubleSide 
 
    }); 
 
    
 
    var mesh = new THREE.Object3D(); 
 
    var curve = new THREE.Mesh(plane, material); 
 
    curve.rotation.z = THREE.Math.degToRad(-90); 
 
    mesh.add(curve); 
 
    mesh.position.x=0 
 
    mesh.position.y=40 
 
    mesh.position.z=-20 
 
    
 
    scene.add(mesh); 
 
    } 
 

 
    function init() { 
 
    container = document.getElementById('container'); 
 
    
 
    renderer = new THREE.WebGLRenderer({ 
 
     antialias: true 
 
    }); 
 
    renderer.setPixelRatio(window.devicePixelRatio); 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
    renderer.shadowMap.enabled = true; 
 
    container.appendChild(renderer.domElement); 
 

 
    scene = new THREE.Scene(); 
 
    scene.background = new THREE.Color(0xffffff); 
 
    
 
    camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 10000); 
 
    camera.position.set(-80, 40, -80); 
 
    scene.add(camera); 
 
    resize(); 
 
    window.onresize = resize; 
 
    
 
    var ambientLight = new THREE.AmbientLight(0x404040); 
 
    scene.add(ambientLight); 
 

 
    var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); 
 
    directionalLight.position.x = -2; 
 
    directionalLight.position.y = 2; 
 
    directionalLight.position.z = -4; 
 
    scene.add(directionalLight); 
 

 
    controls = new THREE.OrbitControls(camera, renderer.domElement); 
 
\t \t 
 
    addGridHelper(); 
 
    createModel(); 
 
    } 
 

 
    function addGridHelper() { 
 
    var planeGeometry = new THREE.PlaneGeometry(2000, 2000); 
 
    planeGeometry.rotateX(-Math.PI/2); 
 

 
    var planeMaterial = new THREE.ShadowMaterial({ 
 
     opacity: 0.2 
 
    }); 
 
    var plane = new THREE.Mesh(planeGeometry, planeMaterial); 
 
    plane.position.y = -200; 
 
    plane.receiveShadow = true; 
 
    scene.add(plane); 
 

 
    var helper = new THREE.GridHelper(2000, 100); 
 
    helper.material.opacity = 0.25; 
 
    helper.material.transparent = true; 
 
    scene.add(helper); 
 

 
    var axis = new THREE.AxesHelper(1000); 
 
    scene.add(axis); 
 
    } 
 

 
    function resize() { 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
    camera.aspect = window.innerWidth/window.innerHeight; 
 
    camera.updateProjectionMatrix(); 
 
    //controls.handleResize(); 
 
    } 
 

 
    function animate() { 
 
    requestAnimationFrame(animate); 
 
    render(); 
 
    } 
 

 
    function render() { 
 
    renderer.render(scene, camera); 
 
    } 
 
})();

<script src="https://threejs.org/build/three.js"></script> 
 
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> 
 

 
<div id="container"></div>

Answer 2

Verwenden Sie die earcut Algorythm das richtige Dreieck Flächen zu erzeugen. Der Code sieht wie folgt aus

let meshPoints = shapeData.meshPoints; 
 
let geom = new THREE.Geometry(); 
 

 
// Triangulation 
 
// generate array with earcut 
 
let earcutArray = []; 
 
for (var i = 0; i < meshPoints.length; i++) { 
 
\t earcutArray.push(meshPoints[i][0]); 
 
\t earcutArray.push(meshPoints[i][1]); 
 
\t earcutArray.push(meshPoints[i][2]); 
 
} 
 
let earcutFaces = earcut(earcutArray, null, 3); 
 

 
//add vertices 
 
for (var i = 0; i < meshPoints.length; i++) { 
 
\t geom.vertices.push(new THREE.Vector3(meshPoints[i][0],meshPoints[i][1],meshPoints[i][2])); 
 
} 
 

 
//add faces 
 
let totalEarCutLength = earcutFaces.length; 
 
for (var i = 0; i < totalEarCutLength/3; i++) { 
 
\t let one = earcutFaces[i*3]; 
 
\t let two = earcutFaces[i*3+1]; 
 
\t let three = earcutFaces[i*3+2]; 
 
\t geom.faces.push(new THREE.Face3(one, two, three)); 
 
} 
 

 
//add normals 
 
geom.computeFaceNormals(); 
 

 
//material 
 
let material = new THREE.MeshBasicMaterial({ color: 0x000000, wireframe: true, wireframe_linewidth: 25 }); 
 
material.side = THREE.DoubleSide; 
 

 
let mesh = new THREE.Mesh(geom, material); 
 
window.scene.add(mesh);