1

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

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 у.е. введите сюда описание изображения
Спасибо!

2
  • объемный эллипс? сфероид? 9 мая 2020 в 16:32
  • @Stranger in the Q, обновил вопрос и добавил фигуру, которую нужно получить. 9 мая 2020 в 16:53

1 ответ 1

5

Можно воспользоваться 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>

1
  • Отличный ответ! Все в точности как нужно было, спасибо 9 мая 2020 в 21:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.