Three JS construction line

Questions
,
1

I want to get that 3D effect when I zoom in or out or rotate the camera the line keeps its gap dash sizes visually the same size. I am a student I want to get the basic functions of solid works


here is my code

code
code1694×4130 294 KB

import * as THREE from “three”;
import { OrbitControls } from “three/addons/controls/OrbitControls.js”;

let lineVertShader = `
attribute float lineDistance;
varying float vLineDistance;

void main() {
vLineDistance = lineDistance;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
`;

let lineFragShader = `
uniform vec3 diffuse;
uniform float opacity;
uniform float time; // added time uniform

uniform float dashSize;
uniform float gapSize;
uniform float dotSize;
varying float vLineDistance;

void main() {
float totalSize = dashSize + gapSize;
float modulo = mod( vLineDistance + time, totalSize ); // time added to vLineDistance
float dotDistance = dashSize + (gapSize * .5) - (dotSize * .5);

if ( modulo > dashSize && mod(modulo, dotDistance) > dotSize ) {
  discard;
}

gl_FragColor = vec4( diffuse, opacity );

}
`;

let scene = new THREE.Scene();
scene.background = new THREE.Color(0xeeeeee);
let camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
0.01,
1000
);

camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer({
antialias: true,
});

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener(“resize”, (event) => {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
});

let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

let points = ;
for (let i = 0; i < 10; i++) {
points.push(
new THREE.Vector3(
THREE.MathUtils.randInt(-5, 5),
THREE.MathUtils.randInt(-5, 5),
THREE.MathUtils.randInt(-5, 5)
)
);
}

let lineGeom = new THREE.BufferGeometry().setFromPoints(points);
let lineMat = new THREE.ShaderMaterial({
uniforms: {
diffuse: { value: new THREE.Color(“#8800ff”) },
dashSize: { value: 0.3 },
gapSize: { value: 0.1 },
dotSize: { value: 0.05 },
opacity: { value: 2.0 },
},
vertexShader: lineVertShader,
fragmentShader: lineFragShader,
transparent: true,
});

let line = new THREE.Line(lineGeom, lineMat);
line.material.uniforms.diffuse.value.set(0xff0000);
line.computeLineDistances();
scene.add(line);

render();

function render() {
requestAnimationFrame(render);
controls.update();
renderer.render(scene, camera);
}