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