exruded mesh on curve offset contour
uses offset contour to create a shape and then into an extruded shape
by black strings
HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
CSS
body {
overflow: hidden;
margin: 0;
}
JavaScript
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 50);
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);
var light = new THREE.DirectionalLight(0xffffff, 0.75);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.25));
var grid = new THREE.GridHelper(50, 50, 0xffffff, 0x101010);
grid.rotateX(Math.PI / 2);
scene.add(grid);
extrudeDemo();
// circle curve
function extrudeDemo(){
const curve = new THREE.EllipseCurve(
0, 0, // ax, aY
10, 10, // xRadius, yRadius
0, 2 * Math.PI, // aStartAngle, aEndAngle
false, // aClockwise
0 // aRotation
);
const points = curve.getPoints( 20 );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
// Create the final object to add to the scene
const ellipse = new THREE.Line( geometry, material );
scene.add(ellipse);
const shape = new THREE.Shape();
shape.lineTo(-1, 0);
const offsetPoints = ProfiledContourGeometryPointsOnly(shape, points, false, false);
drawLine(offsetPoints, 0x00ff00);
const newShapePoints = [...points, ...offsetPoints.reverse()];
const newShape = new THREE.Shape(newShapePoints);
/* const geo = new THREE.ShapeGeometry(newShape);
const m = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({color: 0x00ff0000, transparent: true, opacity: .5}));
scene.add(m); */
const extrudeAmount = 5;
const isBevel = true;
const bevelSegments = 1;
const steps = 0;
const bevelSize = 0;
const bevelThickness = 0;
// extrude setting
const config = {
depth: extrudeAmount,
bevelEnabled:...