Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Three.js 3D Scene with Fractal Object</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://threejs.org/build/three.min.js"></script> | |
| <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> | |
| <script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script> | |
| <script src="https://threejs.org/examples/js/curves/NURBSCurve.js"></script> | |
| <script> | |
| function init() { | |
| // Set up the scene | |
| const scene = new THREE.Scene(); | |
| // Set up the camera | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| camera.position.z = 5; | |
| // Set up the renderer | |
| const renderer = new THREE.WebGLRenderer(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| document.body.appendChild(renderer.domElement); | |
| // Set up the skybox | |
| const loader = new THREE.CubeTextureLoader(); | |
| const texture = loader.load([ | |
| 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/pz.jpg', | |
| 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nz.jpg', | |
| 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/py.jpg', | |
| 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/ny.jpg', | |
| 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/px.jpg', | |
| 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nx.jpg' | |
| ]); | |
| scene.background = texture; | |
| // Set up the lighting | |
| const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); | |
| scene.add(ambientLight); | |
| const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); | |
| directionalLight.position.set(0, 1, 0); | |
| scene.add(directionalLight); | |
| // Set up the geometry | |
| const fractal = generateFractal(); | |
| scene.add(fractal); | |
| // Set up the controls | |
| const controls = new THREE.OrbitControls(camera, renderer.domElement); | |
| // Set up the animation | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| fractal.rotation.x += 0.01; | |
| fractal.rotation.y += 0.01; | |
| controls.update(); | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // Set up the GUI | |
| const gui = new dat.GUI(); | |
| gui.add(fractal.material, 'linewidth', 0.1, 10); | |
| gui.add(fractal.material, 'opacity', 0.1, 1); | |
| gui.add(fractal.material, 'transparent'); | |
| } | |
| function generateFractal() { | |
| const lsystem = new LSystem(); | |
| lsystem.addRule('F', 'F+F-F-F+F'); | |
| lsystem.setAxiom('F+F+F+F'); | |
| lsystem.iterate(3); | |
| const lines = lsystem.getLines(); | |
| const material = new THREE.LineBasicMaterial({ color: 0xffffff }); | |
| const geometry = new THREE.BufferGeometry().setFromPoints(lines); | |
| const fractal = new THREE.LineSegments(geometry, material); | |
| return fractal; | |
| } | |
| window.onload = init; | |
| </script> | |
| </body> | |
| </html> | |