ThreeJS如何绘制带有弯曲边缘的形状

时间:2018-09-07 09:39:54

标签: javascript three.js

我正在尝试使用由直线和弯曲边缘组成的threeJS制作形状。目前,我有以下内容:

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 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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