代码之家  ›  专栏  ›  技术社区  ›  geoffs3310

三.如何用曲线边画形状

  •  0
  • geoffs3310  · 技术社区  · 6 年前

    enter image description here

    我希望两个顶角用一个半圆连接起来,这样它就变成了一个正方形,上面切了一个半圆,就像这样:

    enter image description here

    var Shape = new THREE.Shape();
    Shape.lineTo(0, 4);
    Shape.lineTo(2, 2);
    Shape.lineTo(4, 4);
    Shape.lineTo(4, 0);
    Shape.lineTo(0, 0);
    
    2 回复  |  直到 6 年前
        1
  •  1
  •   prisoner849    6 年前

    你可以这样做:

    var Shape = new THREE.Shape();
    Shape.absarc(2, 4, 2, Math.PI, Math.PI * 2);
    Shape.lineTo(4, 0);
    Shape.lineTo(0, 0);
    

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(3, 5, 8);
    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);
    
    scene.add(new THREE.GridHelper(10, 10));
    
    var Shape = new THREE.Shape();
    Shape.absarc(2, 4, 2, Math.PI, Math.PI * 2);
    Shape.lineTo(4, 0);
    Shape.lineTo(0, 0);
    
    var shapeGeom = new THREE.ShapeBufferGeometry(Shape);
    var shapeMaterial = new THREE.MeshBasicMaterial({
      color: 0x00ff00,
      side: THREE.DoubleSide
    });
    var shapeMesh = new THREE.Mesh(shapeGeom, shapeMaterial);
    scene.add(shapeMesh);
    
    render();
    
    function render() {
      requestAnimationFrame(render);
      renderer.render(scene, camera);
    }
    body {
      overflow: hidden;
      margin: 0;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
        2
  •  0
  •   WestLangley    6 年前

    http://threejs.org/examples/webgl_geometry_shapes.html :

    var trackShape = new THREE.Shape();
    
    trackShape.moveTo( 40, 40 );
    trackShape.lineTo( 40, 160 );
    trackShape.absarc( 60, 160, 20, Math.PI, 0, false );
    trackShape.lineTo( 80, 40 );
    //trackShape.moveTo( 40, 40 ); // optional. shape will auto-close