Hi, I´m new in the threejs world.
I’ve been looking for a solution since 3 days and
I can´t find any help on Google or in this forum 
I try to create an interactive part designer.
For this, I want to generate plane and ring geometries, but how can I connect them easy as possible together.
In my example, I translate the geometries by hand manually… And that is the problem.
The my “part-parameters” are changing constantly.
function main() {
// https://threejs.org/docs/#api/en/geometries/ExtrudeGeometry
// https://threejs.org/docs/#api/en/geometries/RingGeometry
// https://threejs.org/docs/#api/en/geometries/PlaneGeometry
// https://threejs.org/docs/#api/en/core/Raycaster
// https://threejs.org/docs/#api/en/extras/core/Path
// https://threejs.org/docs/#api/en/extras/core/Shape
// https://threejs.org/docs/#api/en/extras/core/ShapePath
// https://threejs.org/docs/#api/en/math/interpolants/QuaternionLinearInterpolant
// https://threejs.org/docs/#api/en/math/Quaternion
// https://threejs.org/docs/#api/en/math/MathUtils
// Hilfs-Koordinatensystem
let scene = new THREE.Scene();
scene.add(new THREE.AxesHelper(10)); //X=red, Y=green, Z=blue
// Part Parameters
const biegelaenge = 500; // for extrude, later
const dicke = 2; // Thickness from my part
const radius = 2; // radius inside
const B0_schenkel = 10;
const B0_winkel = 90; // B = Bug
const B1_schenkel = 5;
const B1_winkel = 45;
const B2_schenkel = 6;
const B2_winkel = 0; // do not exist!
//const B3_schenkel = 0;
//const B3_winkel = 0;
//const B4_....
// Length Bug0
B0 = schenkel(B0_schenkel, dicke);
B0.translateX(-5);
scene.add(B0);
// Radius Bug0, must write a function, but later
const geometry = new THREE.RingGeometry(
radius,
radius + dicke,
32,
4,
deg2rad(-90),
deg2rad(B0_winkel)
);
const material = new THREE.MeshPhongMaterial({
color: "rgb(80,80,20)",
side: THREE.DoubleSide,
});
const mesh = new THREE.Mesh(geometry, material);
mesh.translateY(3);
scene.add(mesh);
// Length Bug1
B1 = schenkel(B1_schenkel, dicke);
B1.rotateZ(deg2rad(90));
B1.translateY(-3);
B1.translateX(5.5);
scene.add(B1);
// Radius Bug1
const geometry2 = new THREE.RingGeometry(
radius,
radius + dicke,
32,
4,
deg2rad(0),
deg2rad(B1_winkel)
);
const material2 = new THREE.MeshPhongMaterial({
color: "rgb(80,80,20)",
side: THREE.DoubleSide,
});
const mesh2 = new THREE.Mesh(geometry2, material2);
mesh2.translateY(8);
scene.add(mesh2);
// Length Bug2
B2 = schenkel(B2_schenkel, dicke);
B2.rotateZ(deg2rad(-45));
B2.translateY(8.65);
B2.translateX(-8.65);
scene.add(B2);
// Radius Bug2
// do not exist!
// Extrude geometry here, later
//Grid XZ
let grid = new THREE.GridHelper(100, 100, 0xffffff, 0x333333);
grid.rotateX(deg2rad(90));
scene.add(grid);
// Random light sources
let pL0 = generatePointLight(0xffffff, 1, false, 5, 5, 5);
let pL1 = generatePointLight(0xffffff, 1, false, -5, 5, 5);
let pL2 = generatePointLight(0xffffff, 1, false, 5, 5, -5);
let pL3 = generatePointLight(0xffffff, 1, false, -5, 5, -5);
scene.add(pL0);
scene.add(pL1);
scene.add(pL2);
scene.add(pL3);
//Camera
let PersCam = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.1,
500
);
console.log(window.innerWidth / window.innerHeight);
// Cameraposition
PersCam.position.x = 0; // red
PersCam.position.y = 0; // green
PersCam.position.z = 50; // blue
// Blickrichtung von Kamera, irgendwie keine funktion
PersCam.lookAt(new THREE.Vector3(0, 0, 0));
// Camerahelper, for orthogonal camera, later
// let camhelper = new THREE.CameraHelper( PersCam );
// scene.add( camhelper );
// Renderer
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMap.enabled = false; // Schatten an/aus
renderer.setSize(window.innerWidth, window.innerHeight); // Fenstergröße
renderer.setClearColor("rgb(80,80,80)"); // Background olor
document.getElementById("webgl").appendChild(renderer.domElement); // Wo im HTML Code
let controls = new THREE.OrbitControls(PersCam, renderer.domElement); // Orbit controls
// Update animation
update(renderer, scene, PersCam, controls);
}
//////////////////////////////////////////////////////////
////////////// FUNKTIONEN ////////////////////////////////
function schenkel(l, b) {
let geo = new THREE.PlaneGeometry(l, b);
let mat = new THREE.MeshPhongMaterial({
color: "rgb(80,60,60)",
side: THREE.DoubleSide,
});
let mesh = new THREE.Mesh(geo, mat);
//mesh.receiveShadow = true;
return mesh;
}
/////////////////////////////////////////////
/*function generateBox(w, h, d) {
let geo = new THREE.BoxGeometry(w, h, d);
let mat = new THREE.MeshPhongMaterial({
color: "rgb(100,10,10)",
});
let mesh = new THREE.Mesh(geo, mat);
mesh.castShadow = true;
return mesh;
}*/
/////////////////////////////////////////////
function generatePointLight(color, intensity, shadowTgl, x, y, z) {
let light = new THREE.PointLight(color, intensity);
light.castShadow = shadowTgl; // Schatten an/aus
light.position.x = x;
light.position.y = y;
light.position.z = z;
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;
return light;
}
/////////////////////////////////////////////
function deg2rad(deg) {
rad = deg * (Math.PI / 180.00);
return rad;
}
/////////////////////////////////////////////
function update(renderer, scene, camera, controls) {
renderer.render(scene, camera);
controls.update();
requestAnimationFrame(function () {
update(renderer, scene, camera, controls);
}); // funktion vom Browser!
}
//////////////////////////////////////////////
//////////////////////////////////////////////
main();
/// Backyard //
//setInterval, use later // ist für Updates von Werten gut, z.B. bei der Tabelle
//console.log(scene);
thanks.
