Digital Art Archive VDK Digital Art Archive
Владивосток
0%
:root{
--background:#070707;
--panel:#111111;
--text:#ffffff;
--accent:#7ea9ff;
--border:#2d2d2d;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,
body{
width:100%;
height:100%;
overflow:hidden;
background:var(--background);
color:var(--text);
font-family:Inter,Arial,sans-serif;
}
#app{
position:fixed;
inset:0;
}
canvas{
width:100%;
height:100%;
display:block;
}
#loader{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:18px;
z-index:20;
background:#050505;
}
#loader h1{
font-size:34px;
font-weight:600;
letter-spacing:1px;
}
#loader p{
opacity:.7;
}
.progress{
width:min(420px,80vw);
height:6px;
border-radius:999px;
overflow:hidden;
background:#1d1d1d;
}
#progress-bar{
width:0%;
height:100%;
background:var(--accent);
transition:width .25s ease;
}
#progress-text{
font-size:14px;
opacity:.8;
}
export const CONFIG = {
BACKGROUND:0x070707,
FOG_COLOR:0x070707,
FOG_NEAR:35,
FOG_FAR:140,
CAMERA_DISTANCE:60,
MAX_PIXEL_RATIO:2,
AUTO_ROTATE_SPEED:0.18,
};
import * as THREE from "https://unpkg.com/three@0.160.0/build/three.module.js";
import { OrbitControls } from "https://unpkg.com/three@0.160.0/examples/jsm/controls/OrbitControls.js";
import { CONFIG } from "./config.js";
export class SceneManager{
constructor(){
this.canvas=document.getElementById("scene");
this.scene=new THREE.Scene();
this.scene.background=new THREE.Color(CONFIG.BACKGROUND);
this.scene.fog=new THREE.Fog(
CONFIG.FOG_COLOR,
CONFIG.FOG_NEAR,
CONFIG.FOG_FAR
);
this.camera=new THREE.PerspectiveCamera(
50,
window.innerWidth/window.innerHeight,
0.1,
1000
);
this.camera.position.set(0,0,CONFIG.CAMERA_DISTANCE);
this.renderer=new THREE.WebGLRenderer({
canvas:this.canvas,
antialias:true,
alpha:false
});
this.renderer.setPixelRatio(
Math.min(window.devicePixelRatio,
CONFIG.MAX_PIXEL_RATIO)
);
this.renderer.setSize(
window.innerWidth,
window.innerHeight
);
this.controls=new OrbitControls(
this.camera,
this.renderer.domElement
);
this.controls.enableDamping=true;
this.controls.autoRotate=true;
this.controls.autoRotateSpeed=
CONFIG.AUTO_ROTATE_SPEED;
this.addLights();
window.addEventListener(
"resize",
()=>this.resize()
);
}
addLights(){
const ambient=new THREE.AmbientLight(
0xffffff,
2.2
);
this.scene.add(ambient);
const directional=new THREE.DirectionalLight(
0xffffff,
1.4
);
directional.position.set(
10,
20,
10
);
this.scene.add(directional);
}
resize(){
this.camera.aspect=
window.innerWidth/window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(
window.innerWidth,
window.innerHeight
);
}
start(){
const animate=()=>{
requestAnimationFrame(animate);
this.controls.update();
this.renderer.render(
this.scene,
this.camera
);
};
animate();
}
}
import { SceneManager } from "./scene.js";
const scene=new SceneManager();
scene.start();
setTimeout(()=>{
document.getElementById("loader").style.display="none";
},1200);