flower of life
This commit is contained in:
Vincent van der Wal
+453
-52
@@ -1,6 +1,10 @@
|
||||
|
||||
import * as THREE from 'three';
|
||||
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
|
||||
|
||||
import Stats from 'three/addons/libs/stats.module.js';
|
||||
|
||||
import './css/styles.scss';
|
||||
|
||||
@@ -9,9 +13,9 @@ scene.background = new THREE.Color(0xf44f04);
|
||||
|
||||
|
||||
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 500 );
|
||||
camera.position.z = 20;
|
||||
camera.position.x = 30;
|
||||
camera.position.y = 8;
|
||||
camera.position.z = 15;
|
||||
camera.position.x = 20;
|
||||
camera.position.y = 6;
|
||||
|
||||
|
||||
|
||||
@@ -37,91 +41,488 @@ const controls = new OrbitControls( camera, renderer.domElement );
|
||||
// torus.castShadow = true;
|
||||
// scene.add( torus );
|
||||
|
||||
const tetraGeometry = new THREE.TetrahedronGeometry( 2 );
|
||||
const tetraMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00 } );
|
||||
const tetra = new THREE.Mesh( tetraGeometry, tetraMaterial );
|
||||
tetra.rotation.x = Math.PI / 4 ;
|
||||
|
||||
scene.add( tetra );
|
||||
|
||||
const tetraEdges = new THREE.EdgesGeometry( tetraGeometry );
|
||||
const tetraEdgesLine = new THREE.LineSegments( tetraEdges, new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 15 } ) );
|
||||
tetraEdgesLine.rotation.x = Math.PI / 4 ;
|
||||
tetraEdgesLine.rotation.z = Math.PI / 4 ;
|
||||
tetraEdgesLine.castShadow = true;
|
||||
scene.add( tetraEdgesLine );
|
||||
|
||||
const tetraGeometry2 = new THREE.TetrahedronGeometry( 2 );
|
||||
const tetraMaterial2 = new THREE.MeshBasicMaterial( {color: 0xffff00 } );
|
||||
const tetra2 = new THREE.Mesh( tetraGeometry2, tetraMaterial2 );
|
||||
tetra2.rotation.z = Math.PI / 2 ;
|
||||
tetra2.rotation.y = Math.PI / 4 ;
|
||||
// scene.add( tetra2 );
|
||||
|
||||
const tetraEdges2 = new THREE.EdgesGeometry( tetraGeometry );
|
||||
const tetraEdgesLine2 = new THREE.LineSegments( tetraEdges, new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 15 } ) );
|
||||
tetraEdgesLine2.castShadow = true;
|
||||
tetraEdgesLine2.rotation.z = Math.PI / 2 ;
|
||||
tetraEdgesLine2.rotation.y = Math.PI / 4 ;
|
||||
// scene.add( tetraEdgesLine2 );
|
||||
|
||||
|
||||
// const icoGeometry = new THREE.IcosahedronGeometry( 5 );
|
||||
// const icoMaterial= new THREE.MeshBasicMaterial( {color: 0x049ef4, wireframe: true, wireframeLinewidth: 8 } );
|
||||
// const iso = new THREE.Mesh( icoGeometry, icoMaterial );
|
||||
// iso.castShadow = true;
|
||||
// scene.add( iso );
|
||||
|
||||
// const circleGeometry = new THREE.CircleGeometry( 5, 64 );
|
||||
// --------- Mekaraba ---------- //
|
||||
// const tetraGeometry = new THREE.TetrahedronGeometry( 2 );
|
||||
// const tetraMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00 } );
|
||||
// const tetra = new THREE.Mesh( tetraGeometry, tetraMaterial );
|
||||
// // tetra.position.y = - 0.81
|
||||
|
||||
// // tetra.rotation.x = Math.PI / 4 ;
|
||||
// tetra.rotation.z = Math.PI / 6 ;
|
||||
// // scene.add( tetra );
|
||||
|
||||
// const tetraEdges = new THREE.EdgesGeometry( tetraGeometry );
|
||||
// const tetraEdgesLine = new THREE.LineSegments( tetraEdges, new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 3 } ) );
|
||||
// // tetraEdgesLine.position.y = -0.81
|
||||
|
||||
// tetraEdgesLine.rotation.x = Math.PI / 4;
|
||||
// // tetraEdgesLine.rotation.y = Math.PI ;
|
||||
// // tetraEdgesLine.rotation.y = Math.PI / 6;
|
||||
|
||||
// tetraEdgesLine.castShadow = true;
|
||||
// scene.add( tetraEdgesLine );
|
||||
|
||||
// const tetraGeometry2 = new THREE.TetrahedronGeometry( 2 );
|
||||
// const tetraMaterial2 = new THREE.MeshBasicMaterial( {color: 0xffff00 } );
|
||||
// const tetra2 = new THREE.Mesh( tetraGeometry2, tetraMaterial2 );
|
||||
// tetra2.position.y = 0.81
|
||||
// tetra2.rotation.x = Math.PI / 4 ;
|
||||
// // tetra2.rotation.y = Math.PI / 4 ;
|
||||
// tetra2.rotation.z = Math.PI / 4 ;
|
||||
// // scene.add( tetra2 );
|
||||
|
||||
// const tetraEdges2 = new THREE.EdgesGeometry( tetraGeometry2 );
|
||||
// const tetraEdgesLine2 = new THREE.LineSegments( tetraEdges2, new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 3 } ) );
|
||||
// tetraEdgesLine2.castShadow = true;
|
||||
// tetraEdgesLine2.position.y = 0.81
|
||||
// tetraEdgesLine2.rotation.x = Math.PI / 4 ;
|
||||
// // tetraEdgesLine2.rotation.y = Math.PI / 4 ;
|
||||
// tetraEdgesLine2.rotation.z = Math.PI / 4 ;
|
||||
// scene.add( tetraEdgesLine2 );
|
||||
|
||||
|
||||
// ---------- David ------------ //
|
||||
// const tetraGeometry = new THREE.ConeGeometry( 2, 3, 3 );
|
||||
// const tetraMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00 } );
|
||||
// const tetra = new THREE.Mesh( tetraGeometry, tetraMaterial );
|
||||
// tetra.rotation.y = Math.PI / 6 ;
|
||||
// tetra.position.y = 1 / 2
|
||||
// scene.add( tetra );
|
||||
|
||||
// const tetraEdges = new THREE.EdgesGeometry( tetraGeometry );
|
||||
// const tetraEdgesLine = new THREE.LineSegments( tetraEdges, new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 15 } ) );
|
||||
// tetraEdgesLine.rotation.y = Math.PI / 6 ;
|
||||
// tetraEdgesLine.position.y = 1 / 2
|
||||
// tetraEdgesLine.castShadow = true;
|
||||
// scene.add( tetraEdgesLine );
|
||||
|
||||
// const tetraGeometry2 = new THREE.ConeGeometry( 2, 3, 3 );
|
||||
// const tetraMaterial2 = new THREE.MeshBasicMaterial( {color: 0xffff00 } );
|
||||
// const tetra2 = new THREE.Mesh( tetraGeometry2, tetraMaterial2 );
|
||||
// tetra2.rotation.y = Math.PI + Math.PI / 6 ;
|
||||
// tetra2.rotation.z = Math.PI;
|
||||
// tetra2.position.y = - 1 / 2
|
||||
// scene.add( tetra2 );
|
||||
|
||||
// const tetraEdges2 = new THREE.EdgesGeometry( tetraGeometry2 );
|
||||
// const tetraEdgesLine2 = new THREE.LineSegments( tetraEdges2, new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 15 } ) );
|
||||
// tetraEdgesLine2.castShadow = true;
|
||||
// tetraEdgesLine2.rotation.y = Math.PI + Math.PI / 6 ;
|
||||
// tetraEdgesLine2.rotation.z = Math.PI;
|
||||
// tetraEdgesLine2.position.y = - 1 / 2
|
||||
// scene.add( tetraEdgesLine2 );
|
||||
|
||||
// ---------- Flower of life ------------ //
|
||||
|
||||
// const circleGeometry = new THREE.CircleGeometry( 3, 64 );
|
||||
// const circleMaterial = new THREE.MeshBasicMaterial( { color: 0x049ef4, side: THREE.DoubleSide } );
|
||||
// const circle = new THREE.Mesh( circleGeometry, circleMaterial );
|
||||
// circle.castShadow = true;
|
||||
// scene.add( circle );
|
||||
|
||||
// const circleLine = new THREE.LineSegments( circleGeometry, new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 3 } ) );
|
||||
// circleLine.castShadow = true;
|
||||
// scene.add( circleLine );
|
||||
|
||||
let rotatePoint = (cx, cy, angle, px, py) => {
|
||||
angle = - angle * (Math.PI / 180)
|
||||
let s = Math.sin(angle);
|
||||
let c = Math.cos(angle);
|
||||
|
||||
// translate point back to origin:
|
||||
px -= cx;
|
||||
py -= cy;
|
||||
|
||||
// rotate point
|
||||
let xnew = px * c + py * s;
|
||||
let ynew = px * s - py * c;
|
||||
|
||||
// translate point back:
|
||||
px = xnew + cx;
|
||||
py = ynew + cy;
|
||||
return [px, py];
|
||||
}
|
||||
|
||||
function rotate(px, py, pz, pitch, roll, yaw) {
|
||||
pitch = - pitch * (Math.PI / 180)
|
||||
roll = - roll * (Math.PI / 180)
|
||||
yaw = - yaw * (Math.PI / 180)
|
||||
|
||||
var cosa = Math.cos(yaw);
|
||||
var sina = Math.sin(yaw);
|
||||
|
||||
var cosb = Math.cos(pitch);
|
||||
var sinb = Math.sin(pitch);
|
||||
|
||||
var cosc = Math.cos(roll);
|
||||
var sinc = Math.sin(roll);
|
||||
|
||||
var Axx = cosa*cosb;
|
||||
var Axy = cosa*sinb*sinc - sina*cosc;
|
||||
var Axz = cosa*sinb*cosc + sina*sinc;
|
||||
|
||||
var Ayx = sina*cosb;
|
||||
var Ayy = sina*sinb*sinc + cosa*cosc;
|
||||
var Ayz = sina*sinb*cosc - cosa*sinc;
|
||||
|
||||
var Azx = -sinb;
|
||||
var Azy = cosb*sinc;
|
||||
var Azz = cosb*cosc;
|
||||
|
||||
let x = Axx*px + Axy*py + Axz*pz;
|
||||
let y = Ayx*px + Ayy*py + Ayz*pz;
|
||||
let z = Azx*px + Azy*py + Azz*pz;
|
||||
|
||||
return [x, y, z]
|
||||
}
|
||||
|
||||
|
||||
const params = {
|
||||
xangle: 45,
|
||||
yangle: 125.3,
|
||||
zangle: 0,
|
||||
size: 3
|
||||
};
|
||||
|
||||
let sphere, circleCircum;
|
||||
let spheres = [];
|
||||
let spheresLines = [];
|
||||
|
||||
let renderFlower = (size = 3) => {
|
||||
let z_count = 0
|
||||
spheres = [];
|
||||
spheresLines = [];
|
||||
|
||||
for (let x of Array.from(Array(size), (_, i) => i * 0.612)) {
|
||||
x = x - ((size - 1) * 0.612) / 2
|
||||
for (let y of Array.from(Array(size), (_, i) => i * 0.612)) {
|
||||
y = y - ((size - 1) * 0.612) / 2
|
||||
for (let z of Array.from(Array(size), (_, i) => i * 0.612)) {
|
||||
z = z - ((size - 1) * 0.612) / 2
|
||||
|
||||
|
||||
let xtemp, ytemp, ztemp;
|
||||
let xtemp2, ytemp2, ztemp2;
|
||||
|
||||
// [xtemp, ytemp, ztemp] = rotate(x, y, z, 0, 45, 0)
|
||||
|
||||
// console.log(xtemp, ytemp, ztemp);
|
||||
|
||||
[xtemp2, ytemp2, ztemp2] = rotate(x, y, z, params['yangle'], params['xangle'], params['zangle'])
|
||||
|
||||
let sphereGeometry = new THREE.SphereGeometry( 0.5, 64, 64 );
|
||||
let sphereMaterial = new THREE.MeshStandardMaterial( {
|
||||
color: 0x0063e4,
|
||||
metalness: 0.7,
|
||||
roughness: 0.3,
|
||||
opacity: 0.8,
|
||||
transparent: true
|
||||
} );
|
||||
sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
|
||||
sphere.position.x = xtemp2;
|
||||
sphere.position.y = ytemp2;
|
||||
sphere.position.z = ztemp2;
|
||||
scene.add( sphere );
|
||||
|
||||
let circleGeometry = new THREE.TorusGeometry( 0.5, 0.02, 64, 64 );
|
||||
let circleMaterial = new THREE.MeshBasicMaterial( {
|
||||
color: 0x000000,
|
||||
opacity: 0.1,
|
||||
transparent: true
|
||||
} );
|
||||
circleCircum = new THREE.Mesh( circleGeometry, circleMaterial );
|
||||
circleCircum.castShadow = true;
|
||||
circleCircum.rotation.y = Math.PI / 2;
|
||||
circleCircum.position.x = xtemp2;
|
||||
circleCircum.position.y = ytemp2;
|
||||
circleCircum.position.z = ztemp2;
|
||||
scene.add( circleCircum );
|
||||
|
||||
sphere.start_x = x;
|
||||
sphere.start_y = y;
|
||||
sphere.start_z = z;
|
||||
circleCircum.start_x = x;
|
||||
circleCircum.start_y = y;
|
||||
circleCircum.start_z = z;
|
||||
|
||||
spheres.push(sphere)
|
||||
spheresLines.push(circleCircum)
|
||||
}
|
||||
z_count += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
renderFlower()
|
||||
|
||||
// z_count = 0
|
||||
// for (let z_angle of Array.from(Array(6), (_, i) => 360 / 6 * i)) {
|
||||
// for (let i of Array.from(Array(4), (_, i) => i * 0.5)) {
|
||||
// let x, y, z;
|
||||
|
||||
// z = rotatePoint(0, 0, z_angle, i, 0)[1]
|
||||
// y = rotatePoint(0, 0, z_angle, i, 0)[0]
|
||||
// x = 0;
|
||||
|
||||
// // [x, y ,z] = rotate(x, y, z, x_angle, 0, 0)
|
||||
|
||||
// console.log(z_angle, x, y, z)
|
||||
|
||||
// let sphereGeometry = new THREE.SphereGeometry( 0.5, 64, 64 );
|
||||
// let sphereMaterial = new THREE.MeshBasicMaterial( {
|
||||
// color: 0x0063e4,
|
||||
// metalness: 1,
|
||||
// roughness: 1,
|
||||
// opacity: 0.5,
|
||||
// transparent: true
|
||||
// } );
|
||||
// sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
|
||||
// sphere.position.x = x;
|
||||
// sphere.position.y = y;
|
||||
// sphere.position.z = z;
|
||||
// scene.add( sphere );
|
||||
|
||||
// let circleGeometry = new THREE.TorusGeometry( 0.5, 0.02, 64, 64 );
|
||||
// let circleMaterial = new THREE.MeshBasicMaterial( {
|
||||
// color: 0x000000,
|
||||
// opacity: 0.1,
|
||||
// transparent: true
|
||||
// } );
|
||||
// circleCircum = new THREE.Mesh( circleGeometry, circleMaterial );
|
||||
// circleCircum.castShadow = true;
|
||||
// circleCircum.rotation.y = Math.PI / 2;
|
||||
// circleCircum.position.x = x;
|
||||
// circleCircum.position.y = y;
|
||||
// circleCircum.position.z = z;
|
||||
// scene.add( circleCircum );
|
||||
|
||||
// sphere.start_x = x;
|
||||
// sphere.start_z = z;
|
||||
// circleCircum.start_x = x;
|
||||
// circleCircum.start_z = z;
|
||||
|
||||
// spheres.push(sphere)
|
||||
// spheresLines.push(circleCircum)
|
||||
// }
|
||||
// z_count += 1;
|
||||
// }
|
||||
|
||||
// z_count = 0
|
||||
// for (let z_angle of Array.from(Array(13), (_, i) => 360 / 12 * i)) {
|
||||
// for (let i of Array.from(Array(3), (_, i) => i * 0.87)) {
|
||||
// let x, y, z;
|
||||
|
||||
// if (i === 0 || z_count % 2 === 0) {
|
||||
// continue;
|
||||
// }
|
||||
// z = rotatePoint(0, 0, z_angle, i, 0)[1]
|
||||
// y = rotatePoint(0, 0, z_angle, i, 0)[0]
|
||||
// x = 0;
|
||||
|
||||
// // [x, y ,z] = rotate(x, y, z, x_angle, 0, 0)
|
||||
|
||||
// console.log(z_angle, x, y, z)
|
||||
|
||||
// let sphereGeometry = new THREE.SphereGeometry( 0.5, 64, 64 );
|
||||
// let sphereMaterial = new THREE.MeshBasicMaterial( {
|
||||
// color: 0x0063e4,
|
||||
// metalness: 1,
|
||||
// roughness: 1,
|
||||
// opacity: 0.5,
|
||||
// transparent: true
|
||||
// } );
|
||||
// sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
|
||||
// sphere.position.x = x;
|
||||
// sphere.position.y = y;
|
||||
// sphere.position.z = z;
|
||||
// scene.add( sphere );
|
||||
|
||||
// let circleGeometry = new THREE.TorusGeometry( 0.5, 0.02, 16, 40 );
|
||||
// let circleMaterial = new THREE.MeshBasicMaterial( {
|
||||
// color: 0x000000,
|
||||
// opacity: 0.1,
|
||||
// transparent: true
|
||||
// } );
|
||||
// circleCircum = new THREE.Mesh( circleGeometry, circleMaterial );
|
||||
// circleCircum.castShadow = true;
|
||||
// circleCircum.rotation.y = Math.PI / 2;
|
||||
// circleCircum.position.x = x;
|
||||
// circleCircum.position.y = y;
|
||||
// circleCircum.position.z = z;
|
||||
// scene.add( circleCircum );
|
||||
|
||||
// sphere.start_x = x;
|
||||
// sphere.start_z = z;
|
||||
// circleCircum.start_x = x;
|
||||
// circleCircum.start_z = z;
|
||||
|
||||
// spheres.push(sphere)
|
||||
// spheresLines.push(circleCircum)
|
||||
// }
|
||||
// z_count += 1;
|
||||
// }
|
||||
|
||||
// ---------- Seed of Life ------------ //
|
||||
|
||||
// for (let x_angle of Array.from(Array(4), (_, i) => 360 / 4 * i)) {
|
||||
// for (let z_angle of Array.from(Array(6), (_, i) => 360 / 6 * i)) {
|
||||
// for (let i of Array.from(Array(2), (_, i) => i* 0.5)) {
|
||||
// if (z_count > 0 && i === 0) {
|
||||
// continue;
|
||||
// }
|
||||
// let x, y, z;
|
||||
|
||||
// z = rotatePoint(0, 0, z_angle, i, 0)[1]
|
||||
// y = rotatePoint(0, 0, z_angle, i, 0)[0]
|
||||
// x = 0;
|
||||
|
||||
// [x, y ,z] = rotate(x, y, z, 0, x_angle, 0)
|
||||
|
||||
// console.log(x_angle, z_angle, x, y, z)
|
||||
|
||||
// let sphereGeometry = new THREE.SphereGeometry( 0.5, 64, 64 );
|
||||
// let sphereMaterial = new THREE.MeshBasicMaterial( {
|
||||
// color: 0x0063e4,
|
||||
// metalness: 1,
|
||||
// roughness: 1,
|
||||
// opacity: 0.5,
|
||||
// transparent: true
|
||||
// } );
|
||||
// let sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
|
||||
// sphere.position.x = x;
|
||||
// sphere.position.y = y;
|
||||
// sphere.position.z = z;
|
||||
// scene.add( sphere );
|
||||
|
||||
// let circleGeometry = new THREE.TorusGeometry( 0.5, 0.01, 64, 64);
|
||||
// let circleMaterial = new THREE.MeshBasicMaterial( {
|
||||
// color: 0x000000,
|
||||
// opacity: 0.1,
|
||||
// transparent: true
|
||||
// } );
|
||||
// let circleCircum = new THREE.Mesh( circleGeometry, circleMaterial );
|
||||
// circleCircum.castShadow = true;
|
||||
// circleCircum.rotation.y = Math.PI / 2;
|
||||
// circleCircum.position.x = x;
|
||||
// circleCircum.position.y = y;
|
||||
// circleCircum.position.z = z;
|
||||
// scene.add( circleCircum );
|
||||
// }
|
||||
// z_count += 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
let circleGeometry = new THREE.TorusGeometry( 2.5, 0.02, 64, 64);
|
||||
let circleMaterial = new THREE.MeshBasicMaterial( {
|
||||
color: 0x000000,
|
||||
opacity: 0.1,
|
||||
transparent: true
|
||||
} );
|
||||
circleCircum = new THREE.Mesh( circleGeometry, circleMaterial );
|
||||
circleCircum.rotation.y = Math.PI / 2;
|
||||
circleCircum.castShadow = true;
|
||||
scene.add( circleCircum );
|
||||
|
||||
// const spotLight = new THREE.SpotLight( 0xffffff );
|
||||
const spotLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
|
||||
const spotLight = new THREE.DirectionalLight( 0xffffff, 1 );
|
||||
spotLight.position.set( 10, 0, 0 );
|
||||
spotLight.castShadow = true;
|
||||
// spotLight.shadow.mapSize.width = 8182;
|
||||
// spotLight.shadow.mapSize.height = 8182;
|
||||
spotLight.shadow.mapSize.width = 1024;
|
||||
spotLight.shadow.mapSize.height = 1024;
|
||||
spotLight.shadow.camera.far = 45;
|
||||
spotLight.shadow.camera.fov = 35;
|
||||
spotLight.shadow.mapSize.width = 4096;
|
||||
spotLight.shadow.mapSize.height = 4096;
|
||||
spotLight.shadow.camera.far = 20;
|
||||
// spotLight.shadow.camera.fov = 35;
|
||||
scene.add( spotLight );
|
||||
|
||||
|
||||
//Create a plane that receives shadows (but does not cast them)
|
||||
const planeGeometry = new THREE.PlaneGeometry( 10, 10, 10, 10 );
|
||||
const planeGeometry = new THREE.PlaneGeometry( 20, 20, 10, 10 );
|
||||
const planeMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff } )
|
||||
const plane = new THREE.Mesh( planeGeometry, planeMaterial );
|
||||
planeMaterial.side = THREE.DoubleSide;
|
||||
plane.rotation.y = Math.PI / 2;
|
||||
plane.position.x = -10
|
||||
plane.position.x = -5
|
||||
plane.receiveShadow = true;
|
||||
scene.add( plane );
|
||||
|
||||
//Create a helper for the shadow camera (optional)
|
||||
const helper = new THREE.CameraHelper( spotLight.shadow.camera );
|
||||
scene.add( helper );
|
||||
// scene.add( helper );
|
||||
|
||||
const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 0.2 );
|
||||
scene.add( light );
|
||||
const axesHelper = new THREE.AxesHelper( 40 );
|
||||
scene.add( axesHelper );
|
||||
|
||||
// const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 0.2 );
|
||||
// scene.add( light );
|
||||
|
||||
function animate() {
|
||||
const gui = new GUI();
|
||||
|
||||
gui.add( params, 'xangle', 0, 360 ).onChange( (value) => {
|
||||
for (let sphere of spheres) {
|
||||
[sphere.position.x, sphere.position.y, sphere.position.z] = rotate(sphere.start_x, sphere.start_y, sphere.start_z, params['yangle'], value, params['zangle'])
|
||||
}
|
||||
|
||||
for (let sphereLine of spheresLines) {
|
||||
[sphereLine.position.x, sphereLine.position.y, sphereLine.position.z] = rotate(sphereLine.start_x, sphereLine.start_y, sphereLine.start_z, params['yangle'], value, params['zangle'])
|
||||
}
|
||||
});
|
||||
gui.add( params, 'yangle', 0, 360 ).onChange( (value) => {
|
||||
for (let sphere of spheres) {
|
||||
[sphere.position.x, sphere.position.y, sphere.position.z] = rotate(sphere.start_x, sphere.start_y, sphere.start_z, value, params['xangle'], params['zangle'])
|
||||
}
|
||||
|
||||
for (let sphereLine of spheresLines) {
|
||||
[sphereLine.position.x, sphereLine.position.y, sphereLine.position.z] = rotate(sphereLine.start_x, sphereLine.start_y, sphereLine.start_z, value, params['xangle'], params['zangle'])
|
||||
}
|
||||
});
|
||||
gui.add( params, 'zangle', 0, 360 ).onChange( (value) => {
|
||||
for (let sphere of spheres) {
|
||||
[sphere.position.x, sphere.position.y, sphere.position.z] = rotate(sphere.start_x, sphere.start_y, sphere.start_z, params['yangle'], params['xangle'], value)
|
||||
}
|
||||
|
||||
for (let sphereLine of spheresLines) {
|
||||
[sphereLine.position.x, sphereLine.position.y, sphereLine.position.z] = rotate(sphereLine.start_x, sphereLine.start_y, sphereLine.start_z, params['yangle'], params['xangle'], value)
|
||||
}
|
||||
});
|
||||
gui.add( params, 'size', 2, 5).step(1).onChange( (value) => {
|
||||
for (let sphere of spheres) {
|
||||
scene.remove(sphere)
|
||||
}
|
||||
for (let sphereLine of spheresLines) {
|
||||
scene.remove(sphereLine)
|
||||
}
|
||||
renderFlower (value)
|
||||
});
|
||||
gui.open();
|
||||
|
||||
let stats = new Stats();
|
||||
document.body.appendChild( stats.dom );
|
||||
|
||||
// var axis = new THREE.Vector3(0, 1, 0);
|
||||
|
||||
function animate () {
|
||||
requestAnimationFrame( animate );
|
||||
|
||||
const time = performance.now() / 1000;
|
||||
|
||||
// for (let sphere of spheres) {
|
||||
// sphere.position.x = Math.cos( time ) * sphere.start_x;
|
||||
// sphere.position.z = - Math.sin( time ) * sphere.start_z;
|
||||
// }
|
||||
|
||||
// for (let sphereLine of spheresLines) {
|
||||
// sphereLine.position.x = Math.cos( time ) * sphereLine.start_x;
|
||||
// sphereLine.position.z = - Math.sin( time ) * sphereLine.start_z;
|
||||
// }
|
||||
|
||||
// tetra.rotation.x += 0.005;
|
||||
// tetraEdgesLine.rotation.x += 0.005;
|
||||
|
||||
// const time = performance.now() / 1000;
|
||||
// spotLight.position.x = Math.cos( time ) * 20;
|
||||
// spotLight.position.z = Math.sin( time ) * 20;
|
||||
|
||||
controls.update();
|
||||
stats.update();
|
||||
|
||||
renderer.render( scene, camera );
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user