diff --git a/src/index.js b/src/index.js index 7deca2d..b514ce7 100644 --- a/src/index.js +++ b/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.x = 20; -camera.position.y = 6; - +camera.position.z = 12; +camera.position.x = 10; +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, - zangle: 0, - size: 3 + yangle: 0, + zangle: 54.72972973, + 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)) { - 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 + for (let x of Array.from(Array(size), (_, i) => i * 0.612 * (radius * 2))) { + x = x - ((size - 1) * (0.612 * (radius * 2))) / 2 + for (let y of Array.from(Array(size), (_, i) => i * 0.612 * (radius * 2))) { + y = y - ((size - 1) * (0.612 * (radius * 2))) / 2 + for (let z of Array.from(Array(size), (_, i) => i * 0.612 * (radius * 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();