Shape doesn't close
Small circles do not close properly
HTML
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
JavaScript
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 100);
camera.position.z = 35;
var scene = new THREE.Scene();
var light = new THREE.PointLight();
light.position.set(0, 20, 50);
scene.add(light);
var renderer = renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var outerRadius = 10;
var innerRadius = 9;
var arcShape = new THREE.Shape();
arcShape.moveTo(outerRadius, 0);
arcShape.absarc(0, 0, outerRadius, 0, Math.PI * 2, false);
var holePath = new THREE.Path();
holePath.moveTo(innerRadius, 0);
holePath.absarc(0, 0, innerRadius, 0, Math.PI * 2, true);
arcShape.holes.push(holePath);
var extrudeSettings = { amount: 3, bevelEnabled: false, curveSegments:40 };
var geometry = new THREE.ExtrudeGeometry(arcShape, extrudeSettings);
geometry.computeVertexNormals();
var material = new THREE.MeshPhongMaterial({
color: 0xf00fff
});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);
animate();
function animate() {
requestAnimationFrame(animate);
mesh.rotation.y -= 0.01;
renderer.render(scene, camera);
}