Spaces:
Running
Running
File size: 3,095 Bytes
aad8791 9f757ed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<!DOCTYPE html>
<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>
// 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 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);
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');
</script>
</body>
</html> |