代码之家 › 专栏 › 技术社区 › GAURANG KORANT

如何使用非平面形状(曲面)的threejs绘制具有三维点(x、y、z)的形状几何体

three.js

GAURANG KORANT · 技术社区 · 6 年前

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

上面是我的代码,它使用 THREE.CatmullRomCurve3 这两个管之间的点和曲面。我面临的问题是,这两个管道之间的曲面(上面代码中的轨迹)总是平坦的(2d),而不是3d。我想 THREE.Shape() 不使用z轴值绘制曲面。有谁能告诉我正确的方向或一些相关的样品吗。谢谢

1 回复 | 直到 6 年前

prisoner849 4 年前

可以使用曲线和 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://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>