“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100vh;
overflow: hidden;
background: rgb(237,150,188);
background: radial-gradient(circle, rgba(237,150,188,1) 0%, rgba(96,219,236,1) 100%);
}
</style>
</head>
<body>
<div id="canvas"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>
<script>
let renderer, scene, camera, composer, circle, skelet, particle;
window.onload = function(){
init();
animate();
}
function init(){
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.autoClear = false;
renderer.setClearColor(0x000000, 0.0);
document.getElementById('canvas').appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 400;
scene.add(camera);
// 원
circle = new THREE.Object3D();
skelet = new THREE.Object3D();
particle = new THREE.Object3D();
// 화면 추가
scene.add(circle);
scene.add(skelet);
scene.add(particle);
let geom = new THREE.IcosahedronGeometry(7, 1);
let mat = new THREE.MeshPhongMaterial({
color: 0xffffff,
shading: THREE.FlatShading
});
let planet = new THREE.Mesh(geom, mat);
planet.scale.x = planet.scale.y = planet.scale.z = 16;
circle.add(planet);
let goem2 = new THREE.IcosahedronGeometry(15, 1);
let mat2 = new THREE.MeshPhongMaterial({
color: 0xffffff,
wireframe: true,
side: THREE.DoubleSide
});
//원 추가
let planet2 = new THREE.Mesh(goem2, mat2);
planet2.scale.x = planet2.scale.y = planet2.scale.z = 10;
skelet.add(planet2);
let geometry = new THREE.TetrahedronGeometry(2, 0);
let material = new THREE.MeshPhongMaterial({
color: 0xffffff,
shading: THREE.Flatshading
})
for(let i=0; i<1000; i++){
let mesh = new THREE.Mesh(geometry, material);
mesh.position.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize();
mesh.position.multiplyScalar(90 + (Math.random() * 700));
mesh.rotation.set(Math.random()*2, Math.random()*2, Math.random()*2);
particle.add(mesh);
}
//조명
let lights = [];
lights[0] = new THREE.DirectionalLight(0xffffff,1);
lights[0].position.set(1,0,0);
lights[1] = new THREE.DirectionalLight(0xe7e994,1);
lights[1].position.set(0.75,1,0.75);
lights[2] = new THREE.DirectionalLight(0xc6e994,1);
lights[2].position.set(-0.75,-1,0.5);
scene.add(lights[0]);
scene.add(lights[1]);
scene.add(lights[2]);
//조명
let ambientLight = new THREE.AmbientLight(0xebec60);
scene.add(ambientLight);
window.addEventListener("resize", onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate(){
requestAnimationFrame(animate);
circle.rotation.x -= 0.003;
circle.rotation.y -= 0.004;
skelet.rotation.x -= 0.003;
skelet.rotation.y -= 0.004;
particle.rotation.x += 0.001;
particle.rotation.y += 0.004;
renderer.clear();
renderer.render(scene, camera);
}
</script>
</body>
</html>완성본 입니다.
'css' 카테고리의 다른 글
| 문자 관련 스타일 완벽정리 (11) | 2023.03.02 |
|---|---|
| 레이아웃 - grid 유형 (12) | 2023.03.02 |
| 레이아웃 - flex 유형 완전 정복 (10) | 2023.03.01 |
| 레이아웃 - float 유형 - 반응형 한 번에 이해하기 (10) | 2023.03.01 |
| CSS 선택자 한 번에 완벽 정리 (13) | 2023.02.26 |