I’m creating an axis with circles in it, I need the logic for interpolation, so the solution should work with it. Everything works normally, I just can’t change line thickness, I tried various methods and none work, or they do but I can’t integrate interpolation (or I’m just dumb)
I tried using meshlinematerial with a mesh instead of linebasicmaterial and lineloop but they didn’t even appear (no idea what the problem was and it was the closest to my current logic, so if it does work I think it’s my best bet)
import { MeshLineGeometry, MeshLineMaterial } from "meshline";
import { useRef, useEffect } from "react";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import {
Line2,
LineGeometry,
LineMaterial,
} from "three/examples/jsm/Addons.js";
const Axis = () => {
const mountRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
const mountain = mountRef.current;
const textureLoader = new THREE.TextureLoader();
const starTexture = textureLoader.load("star3.png");
const axisLength = 80;
//# Scene
const scene = new THREE.Scene();
scene.frustumCulled = false;
scene.background = new THREE.Color("#000");
scene.fog = new THREE.FogExp2(0x000000, 0.001);
//# Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
if (mountRef.current) {
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
// Append the renderer's canvas element to our container.
mountRef.current.appendChild(renderer.domElement);
console.log(renderer.domElement);
}
//# Camera
const camera = new THREE.PerspectiveCamera(
50,
window.innerWidth / window.innerHeight,
0.5,
10000
);
camera.position.set(200, 100, -30);
//# OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
//# Group
const objectGroup = new THREE.Group();
//# Axes
function createAxis(
points: THREE.Vector3[],
color: string,
thickness: number
) {
const positions = points.flatMap((p) => [p.x, p.y, p.z]);
const geometry = new LineGeometry();
geometry.setPositions(positions);
const material = new LineMaterial({
color,
linewidth: thickness, // Now works reliably
resolution: new THREE.Vector2(window.innerWidth, window.innerHeight),
});
return new Line2(geometry, material);
}
// function createAxis(points: THREE.Vector3[], color: string) {
// const segments = 1000;
// const newPoints = [];
// for (let i = 0; i < segments; i++) {
// const t = i / segments; // 0 - 1
// const x = (1 - t) * points[0].x + t * points[1].x;
// const y = (1 - t) * points[0].y + t * points[1].y;
// const z = (1 - t) * points[0].z + t * points[1].z;
// newPoints.push(new THREE.Vector3(x, y, z));
// }
// for (let i = 0; i < segments; i++) {
// const t = i / segments;
// const x = (1 - t) * points[1].x + t * points[2].x;
// const y = (1 - t) * points[1].y + t * points[2].y;
// const z = (1 - t) * points[1].z + t * points[2].z;
// newPoints.push(new THREE.Vector3(x, y, z));
// }
// const geometry = new THREE.BufferGeometry().setFromPoints(newPoints);
// const material = new THREE.LineBasicMaterial({ color, linewidth: 15 });
// const line = new THREE.Line(geometry, material);
// line.frustumCulled = false;
// return line;
// }
// scene.add(
// createAxis(
// [
// new THREE.Vector3(-100, 0, 0),
// new THREE.Vector3(0, 0, 0),
// new THREE.Vector3(100, 0, 0),
// ],
// xColor
// )
// ); //x axis
// scene.add(
// createAxis(
// [
// new THREE.Vector3(0, -100, 0),
// new THREE.Vector3(0, 0, 0),
// new THREE.Vector3(0, 100, 0),
// ],
// xColor
// )
// ); //y axis
// scene.add(
// createAxis(
// [
// new THREE.Vector3(0, 0, -100),
// new THREE.Vector3(0, 0, 0),
// new THREE.Vector3(0, 0, 100),
// ],
// xColor
// )
// ); //z axis
const xColor = "#fff";
const lineThickness = 3;
objectGroup.add(
createAxis(
[
new THREE.Vector3(-axisLength, 0, 0),
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(axisLength, 0, 0),
],
xColor,
lineThickness
),
createAxis(
[
new THREE.Vector3(0, -axisLength, 0),
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(0, axisLength, 0),
],
xColor,
lineThickness
),
createAxis(
[
new THREE.Vector3(0, 0, -axisLength),
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(0, 0, axisLength),
],
xColor,
lineThickness
)
);
//# Arrow
const arrowLength = 1;
const headLength = 3;
const headWidth = 3;
const arrowColor = "#fff";
// Positive X
const posXArrow = new THREE.ArrowHelper(
new THREE.Vector3(1, 0, 0), // Direction
new THREE.Vector3(axisLength, 0, 0), // Origin
arrowLength,
arrowColor,
headLength,
headWidth
);
objectGroup.add(posXArrow);
// Negative X
const negXArrow = new THREE.ArrowHelper(
new THREE.Vector3(-1, 0, 0),
new THREE.Vector3(-axisLength, 0, 0),
arrowLength,
arrowColor,
headLength,
headWidth
);
objectGroup.add(negXArrow);
// Positive Y
const posYArrow = new THREE.ArrowHelper(
new THREE.Vector3(0, 1, 0), // Direction
new THREE.Vector3(0, axisLength, 0), // Origin
arrowLength,
arrowColor,
headLength,
headWidth
);
objectGroup.add(posYArrow);
// Negative Y
const negYArrow = new THREE.ArrowHelper(
new THREE.Vector3(0, -1, 0),
new THREE.Vector3(0, -axisLength, 0),
arrowLength,
arrowColor,
headLength,
headWidth
);
objectGroup.add(negYArrow);
// Positive Z
const posZArrow = new THREE.ArrowHelper(
new THREE.Vector3(0, 0, 1), // Direction
new THREE.Vector3(0, 0, axisLength), // Origin
arrowLength,
arrowColor,
headLength,
headWidth
);
objectGroup.add(posZArrow);
// Negative X
const negZArrow = new THREE.ArrowHelper(
new THREE.Vector3(0, 0, -1),
new THREE.Vector3(0, 0, -axisLength),
arrowLength,
arrowColor,
headLength,
headWidth
);
objectGroup.add(negZArrow);
//# Circle
function createOrbitalCircle(
radius: number,
color: string,
rotationAxis: THREE.Vector3,
rotationAngle: number
) {
const points = [];
const segments = 128;
// Base circle
const baseGeometry = new THREE.CircleGeometry(radius, segments);
const positions = baseGeometry.getAttribute("position").array;
// Apply 3D rotation
const quaternion = new THREE.Quaternion().setFromAxisAngle(
rotationAxis,
rotationAngle
);
for (let i = 0; i < positions.length; i += 3) {
const vec = new THREE.Vector3(
positions[i],
positions[i + 1],
positions[i + 2]
);
vec.applyQuaternion(quaternion);
if (i !== 0) {
points.push(vec);
}
// console.log(points);
}
const geometry = new MeshLineGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({
color: new THREE.Color(color),
lineWidth: 0.1,
resolution: new THREE.Vector2(window.innerWidth, window.innerHeight),
// transparent: true,
opacity: 0.9,
});
return new THREE.LineLoop(geometry, material);
}
const outerCircles = 3;
const radius = 70;
// const innerCircles = 2;
for (let i = 0; i < outerCircles; i++) {
const inter = i / outerCircles;
objectGroup.add(
createOrbitalCircle(
radius,
"#ffcc00",
new THREE.Vector3(1, 0, 0),
Math.PI * inter
)
);
}
// const sphereGeo = new THREE.BufferGeometry();
const starPositions = new Float32Array([0, 0, 0]);
const starGeometry = new THREE.BufferGeometry();
starGeometry.setAttribute(
"position",
new THREE.BufferAttribute(starPositions, 3) // 3 components per vertex
);
// const sphereGeometry = new THREE.SphereGeometry(15, 32, 16);
// const material = new THREE.MeshBasicMaterial({ color: "#fff" });
const sphereMaterial = new THREE.PointsMaterial({
color: 0xffffff,
size: 120,
sizeAttenuation: true,
transparent: true,
opacity: 0.99,
map: starTexture,
alphaTest: 0.01,
});
const star = new THREE.Points(starGeometry, sphereMaterial);
objectGroup.add(star);
scene.add(objectGroup);
//# Particles
const particleGeometry = new THREE.BufferGeometry();
const particleCount = 20000;
const positions = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount; i++) {
positions[i * 3] = (Math.random() - 0.5) * 2000; // x
positions[i * 3 + 1] = (Math.random() - 0.5) * 2000; // y
positions[i * 3 + 2] = (Math.random() - 0.5) * 2000; // z
}
particleGeometry.setAttribute(
"position",
new THREE.BufferAttribute(positions, 3)
);
const particleMaterial = new THREE.PointsMaterial({
color: 0xffffff,
size: 8,
sizeAttenuation: true,
transparent: true,
opacity: 0.99,
map: starTexture,
alphaTest: 0.01,
});
const particles = new THREE.Points(particleGeometry, particleMaterial);
scene.add(particles);
//# Animation
const animate = () => {
const positions = particleGeometry.attributes.position.array;
const minXPos = 201;
const maxXPos = 300;
const minXNeg = -201;
const maxXNeg = -300;
for (let i = 0; i < positions.length; i += 3) {
const x = positions[i];
const z = positions[i + 2];
if (x >= -201 && x <= 0 && z >= -201 && z <= 0) {
positions[i] = Math.random() * (maxXPos - minXPos) + minXPos;
positions[i + 2] = Math.random() * (maxXPos - minXPos) + minXPos;
} else if (x >= 0 && x <= 201 && z >= 0 && z <= 201) {
positions[i] = Math.random() * (maxXNeg - minXNeg) + minXNeg;
positions[i + 2] = Math.random() * (maxXNeg - minXNeg) + minXNeg;
} else if (x >= -201 && x <= 0 && z >= 0 && z <= 201) {
positions[i] = Math.random() * (maxXPos - minXPos) + minXPos;
positions[i + 2] = Math.random() * (maxXNeg - minXNeg) + minXNeg;
} else if (x >= 0 && x <= 201 && z >= -201 && z <= 0) {
positions[i] = Math.random() * (maxXNeg - minXNeg) + minXNeg;
positions[i + 2] = Math.random() * (maxXPos - minXPos) + minXPos;
}
}
particleGeometry.attributes.position.needsUpdate = true;
particles.rotation.y += 0.003;
objectGroup.rotation.y -= 0.002;
renderer.render(scene, camera);
requestAnimationFrame(animate);
};
animate();
//# Window Resize
const handleResize = () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
};
window.addEventListener("resize", handleResize);
// const mountain = mountRef.current;
//# Cleanup
return () => {
window.removeEventListener("resize", handleResize);
if (mountain) mountain.removeChild(renderer.domElement);
};
// console.log(renderer.domElement);
}, []);
return <div ref={mountRef} />;
};
export default Axis;
