3D wave
import * as THREE from 'three';
let scene, camera, renderer, molecule;
const container = document.getElementById('molecule_container');
const init = () => {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
const geometry = new THREE.SphereGeometry(0.2, 32, 32);
const material = new THREE.MeshStandardMaterial({ color: 0x6f7d94, emissive: 0x435d74, roughness: 0.5 });
molecule = new THREE.Group();
const atoms = [];
for (let i = 0; i < 6; i++) {
const atom = new THREE.Mesh(geometry, material);
atom.position.set(Math.sin(i) * 1.5, Math.cos(i) * 1.5, Math.sin(i * 2) * 1.5);
atoms.push(atom);
molecule.add(atom);
}
const bondMaterial = new THREE.MeshStandardMaterial({ color: 0x6f7d94, emissive: 0x435d74, roughness: 0.7 });
for (let i = 0; i < atoms.length; i++) {
for (let j = i + 1; j < atoms.length; j++) {
const bondGeometry = new THREE.CylinderGeometry(0.05, 0.05, atoms[i].position.distanceTo(atoms[j].position), 8, 1);
const bond = new THREE.Mesh(bondGeometry, bondMaterial);
bond.position.lerpVectors(atoms[i].position, atoms[j].position, 0.5);
bond.lookAt(atoms[j].position);
molecule.add(bond);
}
}
scene.add(molecule);
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(5, 5, 5);
scene.add(light);
window.addEventListener('resize', onWindowResize);
}
const onWindowResize = () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
};
const animate = () => {
requestAnimationFrame(animate);
molecule.rotation.y += 0.01;
molecule.rotation.x += 0.005;
renderer.render(scene, camera);
};
init();
animate();
3D wave
