# How to use getPoints() to create an array of coordinates from of a rotated line drawn from EllipseCurve

Hello there,

Thanks to the community for all the help so far… you guys have been awesome!

I have this issue I’m trying to solve so that I can finally get my elliptical orbitals finished. I’m trying to pull the points from a line that is rotated and drawn from an EllipseCurve. I’ve figured out how to pull the coordinates from the a EllipseCurve using getPoints(). However, thats an array of Vector2 Values without the rotation of the Line giving the orbits the eccentricity. When I try the get points on the line it throws an error… Is there a way to pull the points from the line in the same manner as the EllipseCurve?

Here is the lines rotated and drawn from the EllipseCurve I’m talking about.

Here is the format I need the values in (Vector3) for the BufferGeometry. As you can see I’m trying to repurpose the logic from the MotionAlongCurve example.

Here is the code from the lines I’m trying to pull the points from.

``````import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

var pointer, raycaster;

const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

pointer = new THREE.Vector2();
raycaster = new THREE.Raycaster();

const scene = new THREE.Scene();

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
10000
);

const controls = new OrbitControls(camera, renderer.domElement);

camera.position.set(0, 0, 1000);
controls.update();

renderer.render(scene, camera);

/* world */

const world = new THREE.Mesh(
new THREE.SphereGeometry(100, 64, 32),
new THREE.MeshStandardMaterial({
map: worldTexture,
// wireframe: true,
})
);

/* ellipse const */
const ellipseMaterial = new THREE.LineBasicMaterial({ color: 0x000000 });

/* ellipse one*/

const curveOne = new THREE.EllipseCurve(
50,
0, // ax, aY
300,
0,
2 * Math.PI, // aStartAngle, aEndAngle
false, // aClockwise
0 // aRotation
);

/* comet */

const pointsOne = curveOne.getPoints(50);
const geometryOne = new THREE.BufferGeometry().setFromPoints(pointsOne);

// Create the final object to add to the scene
const ellipseOne = new THREE.Line(geometryOne, ellipseMaterial);
ellipseOne.rotation.x = Math.PI * 0.6;
ellipseOne.rotation.y = Math.PI * 0.1;

/* ellipse two */

const curveTwo = new THREE.EllipseCurve(
0,
0, // ax, aY
200,
0,
2 * Math.PI, // aStartAngle, aEndAngle
false, // aClockwise
0 // aRotation
);

const pointsTwo = curveTwo.getPoints(100);
console.log(pointsTwo);
const geometryTwo = new THREE.BufferGeometry().setFromPoints(pointsTwo);

// Create the final object to add to the scene
const ellipseTwo = new THREE.Line(geometryTwo, ellipseMaterial);
ellipseTwo.rotation.x = Math.PI * 0.48;
ellipseTwo.rotation.y = Math.PI * 0.05;

// console.log( ellipseTwo.geometry.setFromPoints(curve.getPoints(500));

/* comet */

const cometTwo = new THREE.Mesh(
new THREE.SphereGeometry(10, 10, 5),
new THREE.MeshStandardMaterial({
wireframe: true,
})
);
cometTwo.position.x = 200;
cometTwo.rotation.x = Math.PI * 0.6;
cometTwo.rotation.y = Math.PI * 0.15;

/* ellipse three*/

const curveThree = new THREE.EllipseCurve(
50,
0, // ax, aY
300,
0,
2 * Math.PI, // aStartAngle, aEndAngle
false, // aClockwise
0 // aRotation
);

const pointsThree = curveThree.getPoints(50);
const geometryThree = new THREE.BufferGeometry().setFromPoints(pointsThree);

// Create the final object to add to the scene
const ellipseThree = new THREE.Line(geometryThree, ellipseMaterial);
ellipseThree.rotation.x = Math.PI * 0.6;
ellipseThree.rotation.y = Math.PI * 0.15;

// dose not work with lines...

// console.log(ellipseThree.getPoints(100));

/* lighting */

const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(-500, 500, 1000);

/* function */

animate();

function animate() {
requestAnimationFrame(animate);

world.rotation.y += -0.001;

cometTwo.position.x += 1;

renderer.render(scene, camera);
}

``````

The plan is to get an array of the line coordinates that I can then use in the MotionAlongCurve logic, hopefully allowing me to get moving with this project again.

Thank you once again!

You can apply the matrixWorld of Line to the 2D vector to get the global 3d position. Something like this:

``````point3d = new Vector3(point.x, point.y, 0).applyMatrix4(ellipseLine.matrixWorld)
``````
2 Likes

Hi repalash,

Thanks for the response, I’m a little unsure with matrixWorld.
I implement the code but its throwing an error…

Is this an initialisation error?

Below is the striped out code, the same as before… only removing all the unused elements.

``````/* setup */

import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
var pointer, raycaster;
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
pointer = new THREE.Vector2();
raycaster = new THREE.Raycaster();
const scene = new THREE.Scene();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
10000
);
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.set(0, 0, 1000);
controls.update();
renderer.render(scene, camera);

/* main */

/* world */

const world = new THREE.Mesh(
new THREE.SphereGeometry(100, 64, 32),
new THREE.MeshStandardMaterial({
map: worldTexture,
// wireframe: true,
})
);

/* ellipse */

const ellipseMaterial = new THREE.LineBasicMaterial({ color: 0x000000 });

const curveTwo = new THREE.EllipseCurve(
0,
0, // ax, aY
200,
0,
2 * Math.PI, // aStartAngle, aEndAngle
false, // aClockwise
0 // aRotation
);

const pointsTwo = curveTwo.getPoints(100);
console.log(pointsTwo);
const geometryTwo = new THREE.BufferGeometry().setFromPoints(pointsTwo);

// Create the final object to add to the scene
const ellipseTwo = new THREE.Line(geometryTwo, ellipseMaterial);
ellipseTwo.rotation.x = Math.PI * 0.48;
ellipseTwo.rotation.y = Math.PI * 0.05;

point3d = new Vector3(point.x, point.y, 0).applyMatrix4(ellipseTwo.matrixWorld);
console.log(point3d);

/* lighting */

const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(-500, 500, 1000);

/* function */

animate();

function animate() {
requestAnimationFrame(animate);

world.rotation.y += -0.001;

renderer.render(scene, camera);
}

``````

As you can see its the same, I just removed all the unrelated objects so it’s easier to read. It’s no longer throwing the error because I commented out the suggested code.

Thank you for the response, Its really appreciated.