What’s on our mind?

Collection of articles, design, site, and resources made by designers and publisher @Menu View

** index9.html
//화면 생성
const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x3d0764, 20, 25);

//카메라 설정
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 25;

//렌더링 설정
renderer = new THREE.WebGLRenderer({antialias:true, alpha: true});
renderer.setClearColor(0x3d0764);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

//조명 설정
const light = new THREE.HemisphereLight(0xffffbb, 0x151515, 1);
scene.add(light);

const plight = new THREE.PointLight(0xffffff, 1, 40);
plight.position.z = 30;

let lGroup = new THREE.Group();
lGroup.add(plight);
scene.add(lGroup);

const colours = chroma.scale(['#A947F2', '#FF29BD', '#FF5286', '#FF905C', '#FFC84F', '#F9F871']);

let geometry = new THREE.IcosahedronGeometry(4, 40);
let material = new THREE.MeshPhongMaterial({wireframe: false, vertexColors: true});

let blob = new THREE.Mesh(geometry, material);
scene.add(blob);

noise.seed(Math.random() * 100);

let v = new THREE.Vector3();
const count = geometry.attributes.position.count;
let center = new THREE.Vector3(1,-1,1);
geometry.setAttribute('color', new THREE.BufferAttribute(new Float32Array(count * 3), 3) );
for (let i = 0; i < geometry.attributes.position.count * 3; i += 3) {
    v.x = geometry.attributes.position.array[i];
    v.y = geometry.attributes.position.array[i + 1];
    v.z = geometry.attributes.position.array[i + 2];
    let angle = center.angleTo(v) / Math.PI;
        geometry.attributes.color.array[i] = colours(angle).rgb()[0] / 255;
        geometry.attributes.color.array[i + 1] = colours(angle).rgb()[1] / 255;
        geometry.attributes.color.array[i + 2] = colours(angle).rgb()[2] / 255;
    }
    let origin = geometry.attributes.position.clone();
    function updateGeom (seed) {
    for (let i = 0; i < geometry.attributes.position.count * 3; i += 3) {
        v.x = origin.array[i];
        v.y = origin.array[i + 1];
        v.z = origin.array[i + 2];
        let n = 2;
        n += noise.simplex3(v.x * 0.2, v.y * 0.2, v.z * 0.2 + seed);
        v.multiplyScalar(n);
        geometry.attributes.position.array[i] = v.x;
        geometry.attributes.position.array[i + 1] = v.y;
        geometry.attributes.position.array[i + 2] = v.z;
    }
    geometry.attributes.position.needsUpdate = true;
}
updateGeom(0);

//애니메이션 설정
function animate(a) {
    requestAnimationFrame(animate);

    updateGeom(a * 0.0001);
    lGroup.rotation.x = a * 0.001;
    lGroup.rotation.y = a * 0.001;
    lGroup.rotation.z = -a * 0.001;

    renderer.render(scene, camera);
}
animate();

//화면 사이즈 설정
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize);