html,
body {
margin: 0;
padding: 0;
}
html {
overflow: hidden;
}
import * as THREE from 'https://cdn.skypack.dev/three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
25, // FOV (field of view) in Grad
window.innerWidth / window.innerHeight, // Verhältnis des render context
0.1, // near - Objekte mit einer kleineren Distanz als dieser Wert werden nicht angezeigt
1000 // far - Objekte mit einer größeren Distanz als dieser Wert werden nicht angezeigt
);
const renderer = new THREE.WebGLRenderer(); // ein von THREE.js erzeugtes <canvas> Element
renderer.setSize(window.innerWidth, window.innerHeight); // Größe des Canvas
document.body.appendChild(renderer.domElement);
scene.background = new THREE.Color( 0x20252f ); //Setting the canvas background-color
const geometry = new THREE.TorusKnotGeometry(6, 2, 250, 32);
const material = new THREE.MeshBasicMaterial({ color: 0x66D9EF });
const torus = new THREE.Mesh(geometry, material);
scene.add(torus); // Der Torus wird zur Szene hinzugefügt
// Damit das noch etwas besser aussieht wird ein wireframe auf den Torus gelegt
const wireframe = new THREE.WireframeGeometry(geometry);
const line = new THREE.LineSegments(wireframe);
line.material.depthTest = true;
line.material.opacity = 0.25;
line.material.color = new THREE.Color("#000");
line.material.transparent = true;
scene.add(line);
camera.position.z = 70; // Die Position der Kamera muss angepasst werden, damit die Objekte zu sehen sind
const meshes = [torus, line];
function draw() {
requestAnimationFrame(draw);
meshes.forEach((element) => {
element.rotation.x += 0.001;
element.rotation.y += 0.011;
});
renderer.render(scene, camera);
}
draw();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.