radius and camera

src/index.js

@@ -13,10 +13,9 @@ scene.background = new THREE.Color(0xf44f04);
 
 
 const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 500 );
-camera.position.z = 15;
+camera.position.z = 12;
-camera.position.x = 20;
+camera.position.x = 10;
-camera.position.y = 6;
+camera.position.y = 4;
-
 
 
 const renderer = new THREE.WebGLRenderer();
@@ -33,6 +32,8 @@ renderer.physicallyCorrectLights
 document.body.appendChild( renderer.domElement );
 
 const controls = new OrbitControls( camera, renderer.domElement );
+controls.target.set( -4, 0, 0 );
+
 
 // const geometry_torus = new THREE.TorusGeometry( 2.5, 2.5, 32, 128 );
 // const material_torus = new THREE.MeshBasicMaterial( { color: 0x049ef4, wireframe: true, wireframeLinewidth: 1} );
@@ -185,26 +186,27 @@ function rotate(px, py, pz, pitch, roll, yaw) {
 
 const params = {
     xangle: 45,
-    yangle: 125.3,
+    yangle: 0,
-    zangle: 0,
+    zangle: 54.72972973,
-    size: 3
+    size: 3,
+    radius: 1
 };
 
 let sphere, circleCircum;
 let spheres = [];
 let spheresLines = [];
 
-let renderFlower = (size = 3) => {
+let renderFlower = (size = 3, radius = 1) => {
     let z_count = 0
     spheres = [];
     spheresLines = [];
 
-    for (let x of Array.from(Array(size), (_, i) => i * 0.612)) {
+    for (let x of Array.from(Array(size), (_, i) => i * 0.612 * (radius * 2))) {
-        x = x - ((size - 1) * 0.612) / 2
+        x = x - ((size - 1) * (0.612 * (radius * 2))) / 2
-        for (let y of Array.from(Array(size), (_, i) => i * 0.612)) {
+        for (let y of Array.from(Array(size), (_, i) => i * 0.612 * (radius * 2))) {
-            y = y - ((size - 1) * 0.612) / 2
+            y = y - ((size - 1) * (0.612 * (radius * 2))) / 2
-            for (let z of Array.from(Array(size), (_, i) => i * 0.612)) {
+            for (let z of Array.from(Array(size), (_, i) => i * 0.612 * (radius * 2))) {
-                z = z - ((size - 1) * 0.612) / 2
+                z = z - ((size - 1) * (0.612 * (radius * 2))) / 2
     
                 
                 let xtemp, ytemp, ztemp;
@@ -216,7 +218,7 @@ let renderFlower = (size = 3) => {
     
                 [xtemp2, ytemp2, ztemp2] = rotate(x, y, z, params['yangle'], params['xangle'], params['zangle'])
         
-                let sphereGeometry = new THREE.SphereGeometry( 0.5, 64, 64 );
+                let sphereGeometry = new THREE.SphereGeometry( radius, 64, 64 );
                 let sphereMaterial = new THREE.MeshStandardMaterial( { 
                     color: 0x0063e4,
                     metalness: 0.7,
@@ -230,7 +232,7 @@ let renderFlower = (size = 3) => {
                 sphere.position.z = ztemp2;
                 scene.add( sphere );
     
-                let circleGeometry = new THREE.TorusGeometry( 0.5, 0.02, 64, 64 );
+                let circleGeometry = new THREE.TorusGeometry( radius, 0.015, 64, 64 );
                 let circleMaterial = new THREE.MeshBasicMaterial( { 
                     color: 0x000000,
                     opacity: 0.1,
@@ -257,6 +259,18 @@ let renderFlower = (size = 3) => {
             z_count += 1;
         }
     }
+
+    // Big circle
+    let circleGeometry = new THREE.TorusGeometry( 5 * radius, 0.02, 64, 64);
+    let circleMaterial = new THREE.MeshBasicMaterial( { 
+        color: 0x000000,
+        opacity: 0,
+        transparent: true
+    } );
+    circleCircum = new THREE.Mesh( circleGeometry, circleMaterial );
+    circleCircum.rotation.y = Math.PI / 2;
+    circleCircum.castShadow = true;
+    scene.add( circleCircum );
 }
 
 renderFlower()
@@ -418,26 +432,20 @@ renderFlower()
 //     }
 // }
 
-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, 1 );
+const spotLight = new THREE.DirectionalLight( 0xeaa7a7, 1.5);
 spotLight.position.set( 10, 0, 0 );
 spotLight.castShadow = true;
 // spotLight.shadow.mapSize.width = 8182;
 // spotLight.shadow.mapSize.height = 8182;
 spotLight.shadow.mapSize.width = 4096;
 spotLight.shadow.mapSize.height = 4096;
-spotLight.shadow.camera.far = 20;
+spotLight.shadow.camera.far = 21;
+spotLight.shadow.camera.left = -10;
+spotLight.shadow.camera.right = 10;
+spotLight.shadow.camera.top = 10;
+spotLight.shadow.camera.bottom = -10;
+
 // spotLight.shadow.camera.fov = 35;
 scene.add( spotLight );
 
@@ -447,7 +455,7 @@ 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 = -5
+plane.position.x = -10
 plane.receiveShadow = true;
 scene.add( plane );
 
@@ -463,7 +471,7 @@ scene.add( axesHelper );
 
 const gui = new GUI();
 
-gui.add( params, 'xangle', 0, 360 ).onChange( (value) => {
+gui.add( params, 'xangle', 0, 360 ).step(0.1).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'])
     }
@@ -472,7 +480,7 @@ gui.add( params, 'xangle', 0, 360 ).onChange( (value) => {
         [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) => {
+gui.add( params, 'yangle', 0, 360 ).step(0.1).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'])
     }
@@ -481,7 +489,7 @@ gui.add( params, 'yangle', 0, 360 ).onChange( (value) => {
         [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) => {
+gui.add( params, 'zangle', 0, 360 ).step(0.1).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)
     }
@@ -497,7 +505,18 @@ gui.add( params, 'size', 2, 5).step(1).onChange( (value) => {
     for (let sphereLine of spheresLines) {
         scene.remove(sphereLine)
     }
-    renderFlower (value)
+    scene.remove(circleCircum)
+    renderFlower (value, params['radius'])
+});
+gui.add( params, 'radius', 0.5, 3).onChange( (value) => {
+    for (let sphere of spheres) {
+        scene.remove(sphere)
+    }
+    for (let sphereLine of spheresLines) {
+        scene.remove(sphereLine)
+    }
+    scene.remove(circleCircum)
+    renderFlower (params['size'], value)
 });
 gui.open();