//변수 설정
let t = 0,
count = 0,
cameraDx = 0.05,
frame = 0;
//화면 생성
let scene = new THREE.Scene();
// scene.background = new THREE.Color("#000000");
scene.fog = new THREE.Fog("#3c1e02", 0.5, 50);
//카메라 설정
let camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.01, 1000)
camera.position.set(0, 1, 32);
//렌더링 설정
renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
//조명 설정
let pointLight1 = new THREE.PointLight("#ffffff", 1, 0);
pointLight1.position.set(0, 30, 30);
scene.add(pointLight1);
//라인 설정
let lineTotal = 1000;
let linesGeometry = new THREE.BufferGeometry();
linesGeometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array(6 * lineTotal), 3));
linesGeometry.setAttribute("velocity", new THREE.BufferAttribute(new Float32Array(2 * lineTotal), 1));
let l_positionAttr = linesGeometry.getAttribute("position");
let l_vertex_Array = linesGeometry.getAttribute("position").array;
let l_velocity_Array = linesGeometry.getAttribute("velocity").array;
//행성 설정
const loader = new THREE.TextureLoader();
const texturePlanet = loader.load('https://i.ibb.co/h94JBXy/saturn3-ljge5g.jpg');
texturePlanet.anisotropy = 16;
const planetGeometry = new THREE.SphereBufferGeometry(10, 50, 150);
const planetMaterial = new THREE.MeshLambertMaterial({map:texturePlanet, fog:false});
let planet = new THREE.Mesh(planetGeometry, planetMaterial);
planet.position.set(0, 8, -30);
scene.add(planet);
//달 설정
const textureMoon = loader.load('https://i.ibb.co/64zn361/moon-ndengb.jpg');
textureMoon.anisotropy = 16;
let moonGeometry = new THREE.SphereBufferGeometry(2, 32, 32);
let moonMaterial = new THREE.MeshPhongMaterial({map:textureMoon, fog:false});
let moon = new THREE.Mesh(moonGeometry, moonMaterial);
moon.position.set(0, 8, 0);
scene.add(moon);
//배경 라인 설정
const textureTerrain = loader.load();
textureTerrain.rotation = THREE.MathUtils.degToRad(5);
let terrainGeometry = new THREE.PlaneBufferGeometry(70, 70, 20, 20);
const terrainMaterial = new THREE.MeshBasicMaterial({
map: textureTerrain,
fog: true
});
let terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
terrain.rotation.x = -0.47 * Math.PI;
terrain.rotation.z = THREE.Math.degToRad(90);
scene.add(terrain);
let t_vertex_Array = terrainGeometry.getAttribute("position").array;
terrainGeometry.getAttribute("position").setUsage(THREE.DynamicDrawUsage);
terrainGeometry.setAttribute("myZ", new THREE.BufferAttribute(new Float32Array(t_vertex_Array.length / 3), 1));
let t_myZ_Array = terrainGeometry.getAttribute("myZ").array;
for (let i = 0; i < t_vertex_Array.length; i++) {
t_myZ_Array[i] = THREE.MathUtils.randInt(0, 5);
}
const terrain_line = new THREE.LineSegments(
terrainGeometry,
new THREE.LineBasicMaterial({
color: "#fff",
fog: false
})
);
terrain_line.rotation.x = -0.47 * Math.PI;
terrain_line.rotation.z = THREE.Math.degToRad(90);
scene.add(terrain_line);
//별 설정
for (let i = 0; i < lineTotal; i++) {
let x = THREE.MathUtils.randInt(-100, 100);
let y = THREE.MathUtils.randInt(10, 40);
if (x < 7 && x > -7 && y < 20) x += 14;
let z = THREE.MathUtils.randInt(0, -300);
l_vertex_Array[6 * i + 0] = l_vertex_Array[6 * i + 3] = x;
l_vertex_Array[6 * i + 1] = l_vertex_Array[6 * i + 4] = y;
l_vertex_Array[6 * i + 2] = l_vertex_Array[6 * i + 5] = z;
l_velocity_Array[2 * i] = l_velocity_Array[2 * i + 1] = 0;
}
let starsMaterial = new THREE.LineBasicMaterial({
color: "#ffffff",
transparent: true,
opacity: 0.5,
fog: false
});
let lines = new THREE.LineSegments(linesGeometry, starsMaterial);
linesGeometry.getAttribute("position").setUsage(THREE.DynamicDrawUsage);
scene.add(lines);
//애니메이션 설정
function animate() {
requestAnimationFrame(animate);
//행성
planet.rotation.y += 0.002;
//달
moon.rotation.y -= 0.007;
moon.rotation.x -= 0.007;
moon.position.x = 15 * Math.cos(t) + 0;
moon.position.z = 20 * Math.sin(t) - 35;
t += 0.015;
//배경 라인
let t_vertex_Array = terrainGeometry.getAttribute("position").array;
let t_myZ_Array = terrainGeometry.getAttribute("myZ").array;
for (let i = 0; i < t_vertex_Array.length; i++) {
if (i >= 210 && i <= 250) t_vertex_Array[i * 3 + 2] = 0;
else {
t_vertex_Array[i * 3 + 2] = Math.sin((i + count * 0.0003)) * (t_myZ_Array[i] - (t_myZ_Array[i] * 0.5));
count += 0.1;
}
}
//별
for (let i = 0; i < lineTotal; i++) {
l_velocity_Array[2 * i] += 0.0049;
l_velocity_Array[2 * i + 1] += 0.005;
l_vertex_Array[6 * i + 2] += l_velocity_Array[2 * i];
l_vertex_Array[6 * i + 5] += l_velocity_Array[2 * i + 1];
if (l_vertex_Array[6 * i + 2] > 50) {
l_vertex_Array[6 * i + 2] = l_vertex_Array[6 * i + 5] = THREE.MathUtils.randInt(-200, 10);
l_velocity_Array[2 * i] = 0;
l_velocity_Array[2 * i + 1] = 0;
}
}
//카메라
camera.position.x += cameraDx;
camera.position.y = -1.2 * (1 - Math.abs(frame / 2000 - 0.5) / 0.5);
camera.lookAt(0, 0, 0);
frame += 8;
if (frame > 2000) frame = 0;
if (camera.position.x > 18) cameraDx = -cameraDx;
if (camera.position.x < -18) cameraDx = Math.abs(cameraDx);
l_positionAttr.needsUpdate = true;
terrainGeometry.attributes.position.needsUpdate = true;
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