radius and camera
This commit is contained in:
Vincent van der Wal
+53
-34
@@ -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();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user