ThreeJS如何繪制帶有彎曲邊緣的形狀

Question

我正在嘗試使用由直線和彎曲邊緣組成的threeJS制作形狀。 目前，我有以下內容：

我希望兩個上角由一個半圓連接，以便最終成為一個正方形，從頂部切出一個半圓，如下所示：

我該怎么做？ 我曾嘗試過用貝塞爾曲線和圓弧弄亂，但一無所獲。 但是，它必須是一個完美的圓圈，以便與下面的對象對齊。

目前，我的代碼是：

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

Answer 1

您可以這樣操作：

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> 

Answer 2

您可以通過修改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

three.js r.96