u/Happy_Weekend_6355

<!DOCTYPE html>

<head>

<title>Wizualizacja 3D: CAD & Tensor - StrefaDK</title>

<style>

body { margin: 0; overflow: hidden; background-color: #030303; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #fff; }

/* Znak wodny StrefaDK - efekt Waters */

#watermark {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-size: 12vw;

color: rgba(0, 255, 255, 0.03);

font-weight: 900;

z-index: 1;

pointer-events: none;

text-transform: uppercase;

letter-spacing: 10px;

filter: blur(3px) drop-shadow(0 0 15px rgba(0,255,255,0.1));

animation: waters 8s infinite ease-in-out;

}

@keyframes waters {

0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.03; filter: blur(3px); }

50% { transform: translate(-50%, -52%) scale(1.02); opacity: 0.06; filter: blur(5px); }

}

#ui {

position: absolute;

top: 30px;

left: 30px;

z-index: 100;

background: rgba(5, 5, 5, 0.8);

padding: 25px;

border-radius: 4px;

border: 1px solid rgba(0, 255, 255, 0.2);

box-shadow: 0 0 20px rgba(0, 255, 255, 0.05);

backdrop-filter: blur(10px);

}

h2 { margin-top: 0; font-weight: 300; letter-spacing: 2px; font-size: 18px; color: #0ff; text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); }

button {

background: transparent;

color: #0ff;

border: 1px solid rgba(0, 255, 255, 0.5);

padding: 12px 20px;

margin-right: 15px;

border-radius: 2px;

cursor: pointer;

transition: all 0.3s;

text-transform: uppercase;

letter-spacing: 1px;

font-size: 12px;

}

button:hover, .active {

background: rgba(0, 255, 255, 0.15) !important;

border-color: #0ff;

box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);

text-shadow: 0 0 5px #0ff;

}

.description { font-size: 13px; margin-top: 15px; color: #888; font-weight: 300; letter-spacing: 1px; }

</style>

</head>

<body>

<div id="watermark">StrefaDK</div>

<h2>C8DN8RN8E // INTERFEJS</h2>

<button id="btnCad" class="active">ARCHITEKTURA CAD</button>

<button id="btnTensor">KINETYKA TENSORA</button>

<div id="desc" class="description">Widok CAD: Zmaterializowana geometria modułów z siatką dystansową.</div>

</div>

let scene, camera, renderer, controls, composer;

let cadGroup, tensorGroup;

let currentMode = 'cad';

let arrows = [];

function init() {

scene = new THREE.Scene();

// Ciemniejsze tło dla lepszego kontrastu neonów

scene.background = new THREE.Color(0x020202);

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.set(12, 10, 12);

renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });

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

renderer.toneMapping = THREE.ReinhardToneMapping;

document.body.appendChild(renderer.domElement);

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

controls.enableDamping = true;

controls.dampingFactor = 0.05;

// Oświetlenie

const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);

scene.add(ambientLight);

const pointLight = new THREE.PointLight(0x00ffff, 1.5, 50);

pointLight.position.set(10, 20, 10);

scene.add(pointLight);

// Inicjalizacja Post-processingu (Neon Bloom)

const renderScene = new THREE.RenderPass(scene, camera);

const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);

bloomPass.threshold = 0.1;

bloomPass.strength = 1.8; // Intensywność neonu

bloomPass.radius = 0.5;

composer = new THREE.EffectComposer(renderer);

composer.addPass(renderScene);

composer.addPass(bloomPass);

cadGroup = new THREE.Group();

tensorGroup = new THREE.Group();

createCadModel();

createTensorModel();

scene.add(cadGroup);

tensorGroup.visible = false;

scene.add(tensorGroup);

window.addEventListener('resize', onWindowResize, false);

animate();

}

function createCadModel() {

const material = new THREE.MeshPhongMaterial({

color: 0x111111,

transparent: true,

opacity: 0.8,

shininess: 150,

emissive: 0x002222

});

const wireMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff, wireframe: true, transparent: true, opacity: 0.3 });

const base = new THREE.Mesh(new THREE.BoxGeometry(4, 2, 4), material);

cadGroup.add(base);

const parts = [

{ pos: [0, 4, 0], size: [3, 0.5, 3] },

{ pos: [0, -4, 0], size: [3, 0.5, 3] },

{ pos: [5, 0, 0], size: [1, 1, 1] },

{ pos: [-5, 0, 0], size: [1, 1, 1] }

];

parts.forEach(p => {

const mesh = new THREE.Mesh(new THREE.BoxGeometry(...p.size), material);

mesh.position.set(...p.pos);

cadGroup.add(mesh);

const points = [new THREE.Vector3(0, 0, 0), new THREE.Vector3(...p.pos)];

const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);

const lineMaterial = new THREE.LineDashedMaterial({

color: 0x00ffff,

dashSize: 0.2,

gapSize: 0.1,

transparent: true,

opacity: 0.6

});

const line = new THREE.Line(lineGeometry, lineMaterial);

line.computeLineDistances();

cadGroup.add(line);

const wire = new THREE.Mesh(new THREE.BoxGeometry(...p.size.map(s => s * 0.8)), wireMaterial);

wire.position.set(...p.pos);

cadGroup.add(wire);

});

}

function createTensorModel() {

const gridSize = 6;

const spacing = 1.5;

for (let x = -gridSize; x <= gridSize; x += spacing) {

for (let y = -gridSize; y <= gridSize; y += spacing) {

for (let z = -gridSize; z <= gridSize; z += spacing) {

const dir = new THREE.Vector3(1, 0, 0);

const origin = new THREE.Vector3(x, y, z);

const hex = 0x00ffff; // Zmieniono na cyan

const arrowHelper = new THREE.ArrowHelper(dir, origin, 0.8, hex, 0.2, 0.1);

tensorGroup.add(arrowHelper);

arrows.push({ helper: arrowHelper, x, y, z });

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

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

composer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {

requestAnimationFrame(animate);

const time = Date.now() * 0.0015;

if (currentMode === 'tensor') {

arrows.forEach(a => {

const dx = Math.sin(a.x * 0.5 + time);

const dy = Math.cos(a.y * 0.5 + time);

const dz = Math.sin(a.z * 0.5 + time);

const newDir = new THREE.Vector3(dx, dy, dz).normalize();

a.helper.setDirection(newDir);

const intensity = (dx + dy + dz + 3) / 6;

// Płynne przejścia od ciemnoniebieskiego do jaskrawego cyjanu

a.helper.line.material.color.setHSL(0.5 + (intensity * 0.1), 1, 0.2 + (intensity * 0.6));

a.helper.cone.material.color.copy(a.helper.line.material.color);

});

} else {

cadGroup.rotation.y += 0.002;

cadGroup.rotation.x = Math.sin(time * 0.5) * 0.1;

}

controls.update();

// Używamy composera zamiast standardowego renderera dla efektu bloom

composer.render();

}

document.getElementById('btnCad').onclick = function() {

currentMode = 'cad';

this.classList.add('active');

document.getElementById('btnTensor').classList.remove('active');

cadGroup.visible = true;

tensorGroup.visible = false;

document.getElementById('desc').innerText = "Widok CAD: Zmaterializowana geometria modułów z siatką dystansową.";

};

document.getElementById('btnTensor').onclick = function() {

currentMode = 'tensor';

this.classList.add('active');

document.getElementById('btnCad').classList.remove('active');

cadGroup.visible = false;

tensorGroup.visible = true;

document.getElementById('desc').innerText = "Kinetyka Tensora: Kwantowa oscylacja nieliniowego pola wektorowego.";

};

window.onload = init;

</script>

</body>

</html>

Author sysia48 new geometry of tensor