돌아라~

* index17
//변수 설정
const fullCircle = 2 * Math.PI;
const timing = 10;

let materialFirstCylinder, 
    materialSecondCylinder, 
    materialThirdCylinder, 
    materialFourthCylinder;

//화면 생성
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);

//카메라 설정
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 350;
camera.position.y = 0;

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

//조명 설정
const pointLight = new THREE.PointLight(0xffffff, 0);
pointLight.position.set(-300, 50, 100);
pointLight.castShadow = true;
scene.add(pointLight);

new TweenMax.to(pointLight, 1, {
    intensity: 2,
    delay: 1
})

//3D 모델 설정
let cylinderContainer = new THREE.Object3D();
const geometry = new THREE.CylinderBufferGeometry(150, 150, 50, 32, 1, true);
materialFirstCylinder =  new THREE.MeshStandardMaterial({
    color: "#fff",
    transparent: true,
    side: THREE.DoubleSide,
    alphaTest: 0.5
});

materialSecondCylinder = new THREE.MeshStandardMaterial({
    color: "#fff",
    transparent: true,
    side: THREE.DoubleSide,
    alphaTest: 0.5
});

materialThirdCylinder = new THREE.MeshStandardMaterial({
    color: "#fff",
    transparent: true,
    side: THREE.DoubleSide,
    alphaTest: 0.5
});

materialFourthCylinder = new THREE.MeshStandardMaterial({
    color: "#fff",
    transparent: true,
    side: THREE.DoubleSide,
    alphaTest: 0.5
});

// 텍스트 설정
let firstTex = document.createElement("canvas");
let firstContext = firstTex.getContext("2d");
let secondTex = document.createElement("canvas");
let secondContext = secondTex.getContext("2d");
let thirdTex = document.createElement("canvas");
let thirdContext = thirdTex.getContext("2d");
let fourthTex = document.createElement("canvas");
let fourthContext = fourthTex.getContext("2d");

firstTex.width = 
    secondTex.width = 
    thirdTex.width = 
    fourthTex.width = 4096;

firstTex.height = 
    secondTex.height = 
    thirdTex.height = 
    fourthTex.height = 256;

firstContext.font = 
    secondContext.font =
    thirdContext.font = 
    fourthContext.font = "900 300px Poppins";
    
firstContext.fillStyle = 
    secondContext.fillStyle = 
    thirdContext.fillStyle = 
    fourthContext.fillStyle = "white";

firstContext.fillText("WEBSTORYBOY WEBSTORYBOY", 0, 240, 4096);
secondContext.fillText("WEBSTORYBOY WEBSTORYBOY", 0, 240, 4096);
thirdContext.fillText("WEBSTORYBOY WEBSTORYBOY", 0, 240, 4096);
fourthContext.fillText("WEBSTORYBOY WEBSTORYBOY", 0, 240, 4096);

var firstTexture = new THREE.Texture(firstTex);
var secondTexture = new THREE.Texture(secondTex);
var thirdTexture = new THREE.Texture(thirdTex);
var fourthTexture = new THREE.Texture(fourthTex);

firstTexture.needsUpdate = 
    secondTexture.needsUpdate =
    thirdTexture.needsUpdate = 
    fourthTexture.needsUpdate = true;

materialFirstCylinder.alphaMap = firstTexture;
materialSecondCylinder.alphaMap = secondTexture;
materialThirdCylinder.alphaMap = thirdTexture;
materialFourthCylinder.alphaMap = fourthTexture;

materialFirstCylinder.alphaMap.magFilter = 
    materialSecondCylinder.alphaMap.magFilter = 
    materialThirdCylinder.alphaMap.magFilter = 
    materialFourthCylinder.alphaMap.magFilter = THREE.NearestFilter;

materialFirstCylinder.alphaMap.wrapT =
    materialSecondCylinder.alphaMap.wrapT = 
    materialThirdCylinder.alphaMap.wrapT = 
    materialFourthCylinder.alphaMap.wrapT = THREE.RepeatWrapping;

materialFirstCylinder.alphaMap.repeat.y = 
    materialSecondCylinder.alphaMap.repeat.y =
    materialThirdCylinder.alphaMap.repeat.y = 
    materialFourthCylinder.alphaMap.repeat.y = 1;

// 메쉬 서정
cylinder1 = new THREE.Mesh(geometry, materialFirstCylinder);
cylinder2 = new THREE.Mesh(geometry, materialSecondCylinder);
cylinder3 = new THREE.Mesh(geometry, materialThirdCylinder);
cylinder4 = new THREE.Mesh(geometry, materialFourthCylinder);

cylinderContainer.add(cylinder1);
cylinderContainer.add(cylinder2);
cylinderContainer.add(cylinder3);
cylinderContainer.add(cylinder4);

cylinder1.position.y = -75;
cylinder2.position.y = -25;
cylinder3.position.y = 25;
cylinder4.position.y = 75;

cylinderContainer.position.z = -300;
cylinderContainer.position.x = 0;
cylinderContainer.rotation.x = - Math.PI / 4;
cylinderContainer.rotation.z = Math.PI / 6;

scene.add(cylinderContainer);

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

    cylinder1.rotation.y += 0.001
    cylinder2.rotation.y -= 0.002
    cylinder3.rotation.y += 0.001
    cylinder4.rotation.y -= 0.002

    // cylinderContainer.rotation.x += 0.01
    // cylinderContainer.rotation.y += 0.01
    // cylinderContainer.rotation.z += 0.01

    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);