Fractalboxen. terug naar de inleiding
ga naar de animatie in fullscreen
de afbeeldingen
De afbeeldingen op fractalbox_1 zijn fractals gemaakt met de fractalformules ABoxModKali en _Conj
De afbeeldingen op fractalbox_2 zijn fractals gemaakt met de fractalformule RandCubesIFS
De GUI ( Graphische User Interface)
Met de string "guiControls" (regel 27 en 28) worden de beginwaarden van de X, Y en Z rotaties ingesteld.
Deze waarden worden in de functie createGui (regel 111 t/m 114) ingelezen waarna de rotaties in de animate functie (regel 128 t/m130) worden uitgevoerd.
In de functie createGui() worden, in regel 106 en 107, met de functies createBoxMesh1 (regel 62 t/m 75) en createBoxMesh2 (regel 76 t/m 89) de boxen geselecteerd
In deze regels worden ook CreateBackground1 (regel 52) en createBackground2 (regel 55 t/m 60) als achtergrond geselecteerd
Zie ook de A-Frame schets "Fractalbox" waar fractalbox als box component is geregistreerd.
<html>
<head>
<title>fractalboxen</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
<style> body { margin: 0;} </style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "../jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
let camera, scene, renderer;
let guiControls = {X_rotatie: 0.01, Y_rotatie: 0.01, Z_rotatie: 0.01,
start_stop_rotatie: true}; //true is aangevinkt
init();
animate();
function init(){
scene = new THREE.Scene();
window.addEventListener( 'resize', onWindowResize, false );
createCamera();
createBackground1();
createBoxMesh1();
createRenderen();
createControls();
createGui();
}
function createCamera() {
//camera creeren en initialiseren
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 500 );
camera.position.set(2,1,2);
camera.lookAt( 0, 0, 0 );
}
function createBackground1() {
scene.background = new THREE.Color( 0xe6fbff ); //Is een blauwe achtergrondkleur
}
function createBackground2() {
let loader = new THREE.TextureLoader();
let bgTexture = loader.load('../textures/randcubes.jpg');
bgTexture.colorSpace= THREE.SRGBColorSpace;
scene.background = bgTexture;
}
function createBoxMesh1() {
let vorm = new THREE.BoxGeometry( 2, 2, 2 );
let kubusafbeelding =
[
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../textures/back.png' ), side: THREE.DoubleSide } ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../textures/bottom.png' ), side: THREE.DoubleSide } ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../textures/front.png' ), side: THREE.DoubleSide } ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../textures/left.png' ), side: THREE.DoubleSide } ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../textures/right.png' ), side: THREE.DoubleSide } ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../textures/top.png' ), side: THREE.DoubleSide } ),
];
let mesh = new THREE.Mesh( vorm, kubusafbeelding );
scene.add( mesh );
}
function createBoxMesh2() {
let vorm = new THREE.BoxGeometry( 2, 2, 2 );
let kubusafbeelding =
[
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../textures/cube1.jpg' ), side: THREE.DoubleSide } ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../textures/cube2.jpg' ), side: THREE.DoubleSide } ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../textures/cube3.jpg' ), side: THREE.DoubleSide } ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../textures/cube4.jpg' ), side: THREE.DoubleSide } ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../textures/cube5.jpg' ), side: THREE.DoubleSide } ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../textures/cube6.jpg' ), side: THREE.DoubleSide } ),
];
let mesh = new THREE.Mesh( vorm, kubusafbeelding );
scene.add( mesh );
}
function createRenderen() {
renderer = new THREE.WebGLRenderer( { antialias: true} );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputEncoding = THREE.SRGBColorSpace;
document.body.appendChild( renderer.domElement );
}
//de functie voor de muis en pijltjestoetsen controls
function createControls() {
const controls = new OrbitControls( camera , renderer.domElement);
controls.listenToKeyEvents( window );
}
function createGui() {
let params = {
fractalbox_1: function() {createBoxMesh1(); createBackground1();},
fractalbox_2: function() {createBoxMesh2(); createBackground2();}};
let gui = new GUI({width: 200});
gui.add( params, 'fractalbox_1');
gui.add( params, 'fractalbox_2');
gui.add(guiControls, 'X_rotatie', -0.2, 0.2);
gui.add(guiControls, 'Y_rotatie', -0.2, 0.2);
gui.add(guiControls, 'Z_rotatie', -0.2, 0.2);
gui.add(guiControls, 'start_stop_rotatie');
gui.open();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
if (guiControls.start_stop_rotatie) {
scene.rotation.z += guiControls.Z_rotatie;
scene.rotation.x += guiControls.X_rotatie;
scene.rotation.y += guiControls.Y_rotatie;
}
}
</script>
</body>
</html>