//변수 설정
const colors = [0x37BE95, 0xF3F3F3, 0x6549C0];
//화면 설정
var scene = new THREE.Scene();
//카메라 설정
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000);
camera.lookAt(scene.position);
camera.position.z = 500;
scene.add(camera);
//렌더링 설정
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x0E2255);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
//조명 설정
const ambientLight = new THREE.AmbientLight();
scene.add(ambientLight);
const light = new THREE.DirectionalLight();
light.position.set(200, 100, 200);
light.castShadow = true;
light.shadow.camera.left = -100;
light.shadow.camera.right = 100;
light.shadow.camera.top = 100;
light.shadow.camera.bottom = -100;
scene.add(light);
//파티클 설정
function drawParticles() {
particles = new THREE.Group();
scene.add(particles);
const geometry = new THREE.TetrahedronGeometry(5, 0);
for (let i = 0; i < 500; i ++) {
const material = new THREE.MeshPhongMaterial({
color: colors[Math.floor(Math.random() * colors.length)],
shading: THREE.FlatShading
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set((Math.random() - 0.5) * 1000, (Math.random() - 0.5) * 1000, (Math.random() - 0.5) * 1000);
mesh.updateMatrix();
mesh.matrixAutoUpdate = false;
particles.add(mesh);
}
}
drawParticles();
//토성 설정
function drawSaturn() {
saturn = new THREE.Group();
saturn.rotation.set(0.4, 0.3, 0);
scene.add(saturn);
const planetGeometry = new THREE.IcosahedronGeometry(100, 1);
const planetMaterial = new THREE.MeshPhongMaterial({
color: 0x37BE95,
shading: THREE.FlatShading
});
const planet = new THREE.Mesh(planetGeometry, planetMaterial);
planet.castShadow = true;
planet.receiveShadow = true;
planet.position.set(0, 40, 0);
saturn.add(planet);
const ringGeometry = new THREE.TorusGeometry(140, 12, 6, 15);
const ringMeterial = new THREE.MeshStandardMaterial({
color: 0x6549C0,
shading: THREE.FlatShading
});
const ring = new THREE.Mesh(ringGeometry, ringMeterial);
ring.position.set(0, 40, 0)
ring.rotateX(80);
ring.castShadow = true;
ring.receiveShadow = true;
saturn.add(ring);
}
drawSaturn();
//애니메이션 설정
function animate() {
requestAnimationFrame(animate);
particles.rotation.x += 0.001;
particles.rotation.y -= 0.004;
saturn.rotation.y += 0.003;
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);
What’s on our mind?
Collection of articles, design, site, and resources made by designers and publisher
@Menu View
ad