How to draw Shape geometry with 3d points(x,y,z) using threejs which is not flat shape(surface)

问题

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.set(0, 10, 300);
        var renderer = new THREE.WebGLRenderer({
          antialias: true
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var controls = new THREE.TrackballControls(camera, renderer.domElement);

        var light = new THREE.DirectionalLight(0xffffff, 0.5);
        light.position.setScalar(100);
        scene.add(light);
        scene.add(new THREE.AmbientLight(0xffffff, 0.5));


        var closedSpline = new THREE.CatmullRomCurve3([
          new THREE.Vector3(-60, -100, -10),
          new THREE.Vector3(-60, 20, 0),
          new THREE.Vector3(-60, 120, -20),
          new THREE.Vector3(60, 120, 0),
          new THREE.Vector3(60, -100, 10)
        ]);
        closedSpline.curveType = 'catmullrom';
        closedSpline.closed = true;

        var closedSpline1 = new THREE.CatmullRomCurve3([
          new THREE.Vector3(-50, -90, -10),
          new THREE.Vector3(-50, 10, 0),
          new THREE.Vector3(-50, 110, -20),
          new THREE.Vector3(50, 110, 0),
          new THREE.Vector3(50, -90, 10)
        ]);
        closedSpline1.curveType = 'catmullrom';
        closedSpline1.closed = true;

        var tubeGeometry = new THREE.TubeBufferGeometry(closedSpline, 100, 1, 5, true);

        var material = new THREE.MeshLambertMaterial({
          color: 0xb00000,
          wireframe: false
        });
        var mesh = new THREE.Mesh(tubeGeometry, material);
        scene.add(mesh);

        var tubeGeometry1 = new THREE.TubeBufferGeometry(closedSpline1, 100, 1, 5,true);

        var material1 = new THREE.MeshLambertMaterial({
          color: 0xb00000,
          wireframe: false
        });
        var mesh1 = new THREE.Mesh(tubeGeometry1, material1);
        scene.add(mesh1);


        // magic starts here
        var shape = new THREE.Shape(closedSpline1.getPoints(100)); // make a shape
        shape.holes.push(new THREE.Path(closedSpline1.getPoints(100))); // add a hole
        var shapeGeometry = new THREE.ShapeGeometry(shape); // create a geometry
        var track = new THREE.Mesh(shapeGeometry, new THREE.MeshLambertMaterial({
          color: "yellow",
          side:THREE.DoubleSide,
        })); // create a track from the geometry
        scene.add(track);

        render();

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

Above is my code which draw two tube geometry using THREE.CatmullRomCurve3 points and surface between those two tubes. Issue i am facing is surface between those two tubes(Track in above code) is always flat(2d) instead of 3d. I think THREE.Shape() are not using z axis values to draw surface. Can anybody guide me to right direction or some related samples. Thanks

回答1:

You can do the trick, using concatenated sets of points from curves and THREE.PlaneGeometry():

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 300);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(100);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var closedSpline = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-60, -100, -10),
  new THREE.Vector3(-60, 20, 0),
  new THREE.Vector3(-60, 120, -20),
  new THREE.Vector3(60, 120, 0),
  new THREE.Vector3(60, -100, 10)
]);
closedSpline.curveType = 'catmullrom';
closedSpline.closed = true;

var closedSpline1 = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-50, -90, -10),
  new THREE.Vector3(-50, 10, 0),
  new THREE.Vector3(-50, 110, -20),
  new THREE.Vector3(50, 110, 0),
  new THREE.Vector3(50, -90, 10)
]);
closedSpline1.curveType = 'catmullrom';
closedSpline1.closed = true;

var tubeGeometry = new THREE.TubeBufferGeometry(closedSpline, 100, 1, 5, true);

var material = new THREE.MeshLambertMaterial({
  color: 0xb00000,
  wireframe: false
});
var mesh = new THREE.Mesh(tubeGeometry, material);
scene.add(mesh);

var tubeGeometry1 = new THREE.TubeBufferGeometry(closedSpline1, 100, 1, 5,
  true);

var material1 = new THREE.MeshLambertMaterial({
  color: 0xb00000,
  wireframe: false
});
var mesh1 = new THREE.Mesh(tubeGeometry1, material1);
scene.add(mesh1);

// magic starts here
var points1 = closedSpline.getPoints(100); // get the first set of points
var points2 = closedSpline1.getPoints(100); // get the second set of points 
var allPoints = points1.concat(points2); // concatenate them

var planeGeom = new THREE.PlaneGeometry(1, 1, 100, 1); // create a plane geometry
planeGeom.vertices = allPoints; // replace its vertices with the previously concatenated array of points

planeGeom.computeFaceNormals();
planeGeom.computeVertexNormals();

var track = new THREE.Mesh(planeGeom, new THREE.MeshLambertMaterial({
  color: "yellow",
  wireframe: false
}));
scene.add(track);

render();

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

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

来源：https://stackoverflow.com/questions/50350568/how-to-draw-shape-geometry-with-3d-pointsx-y-z-using-threejs-which-is-not-flat

标签

three.js