Эллипс с помощью three.js

Question

С помощью данного кода строю эллипс

var curve = new THREE.EllipseCurve(
    0,  0,            // ax, aY
    10, 10,           // xRadius, yRadius
    0,  2 * Math.PI,  // aStartAngle, aEndAngle
    false,            // aClockwise
    0                 // aRotation
);
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial({color: '#000'});
var ellipse = new THREE.Line(geometry, material);
scene.add(ellipse);

Вопрос заключается в том, чтобы сделать его объемным и залить внутри цветом, а именно получить такую фигуру, где 1, допустим, 10 условных единиц, где 2 - 35 у.е.
Спасибо!

Answer 1

Можно воспользоваться Shape и ExtrudeGeometry:

let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement)
let camera = new THREE.PerspectiveCamera(75,innerWidth/innerHeight,0.1,1000);
camera.position.set(5, 2, 0);
new THREE.OrbitControls(camera, renderer.domElement);
let scene = new THREE.Scene();

let curve = new THREE.EllipseCurve(0, 0,  1, 2,  0, 2 * Math.PI);

let shape = new THREE.Shape();
curve.getPoints(50).forEach((p, i) => {
  shape[i ? 'lineTo' : 'moveTo'](p.x, p.y)
});

let geom = new THREE.ExtrudeGeometry(shape, {
  depth: 0.5, 
  bevelEnabled: false
});

let mesh = new THREE.Mesh(geom, new THREE.MeshNormalMaterial());

scene.add(mesh);
requestAnimationFrame(render);

function render(t) {
    mesh.rotation.y=t/1000
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

addEventListener("resize", function () {
    camera.aspect = innerWidth / innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(innerWidth, innerHeight);
});

body {
  margin: 0;
  overflow: hidden;
}

<script src="https://unpkg.com/[email protected]/build/three.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>

БЛОГ НА HUSL

Эллипс с помощью three.js

Ответы (1 шт):