wallpaper/desktopHouse.html at main · kumacoolgo/wallpaper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>desktopHouse</title>
    <style>
      *,*::after,*::before{margin:0;padding:0;box-sizing:border-box;outline:none;font-family:monospace;}body{overflow:hidden;background-color:#d2cfc8;cursor:grab;}.webgl,#loader{position:fixed;top:0;left:0;}#loader{display:grid;place-content:center;width:100%;height:100%;background-color:#faedcd;}</style>
  </head>
  <body>
    <canvas class="webgl"></canvas>
    <div id="loader">
      <h1>Loading</h1>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.min.js"></script>
    <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://unpkg.com/three@0.126.0/examples/js/controls/OrbitControls.js"></script>
    <script>const loading=document.querySelector('#loader');const canvas=document.querySelector('.webgl');const scene=new THREE.Scene();const textureLoader=new THREE.TextureLoader();const sizes={width:window.innerWidth,height:window.innerHeight,};const camera=new THREE.PerspectiveCamera(10,sizes.width/sizes.height,0.1,100);camera.position.x=8;camera.position.y=4;camera.position.z=15;scene.add(camera);const controls=new THREE.OrbitControls(camera,canvas);controls.enableDamping=true;controls.enableZoom=true;controls.enablePan=true;controls.minDistance=21;controls.maxDistance=50;controls.minPolarAngle=Math.PI/5;controls.maxPolarAngle=Math.PI/2;const renderer=new THREE.WebGLRenderer({canvas:canvas,antialias:true,alpha:true,});renderer.setSize(sizes.width,sizes.height);renderer.setPixelRatio(Math.min(window.devicePixelRatio,2));renderer.outputEncoding=THREE.sRGBEncoding;const bakedTexture=textureLoader.load('https://rawcdn.githack.com/ricardoolivaalonso/ThreeJS-Room13/47b05e2db4e49eec33d63729e920894a906cb693/static/baked.jpg');bakedTexture.flipY=false;bakedTexture.encoding=THREE.sRGBEncoding;const bakedMaterial=new THREE.MeshBasicMaterial({map:bakedTexture});const loader=new THREE.GLTFLoader();loader.load('https://rawcdn.githack.com/ricardoolivaalonso/ThreeJS-Room13/47b05e2db4e49eec33d63729e920894a906cb693/static/model.glb',(gltf)=>{const model=gltf.scene;model.traverse((child)=>(child.material=bakedMaterial));scene.add(model);scene.position.set(0,0.2,0);loading.style.display='none'},(xhr)=>{console.log((xhr.loaded/xhr.total)*100+'% loaded')});window.addEventListener('resize',()=>{sizes.width=window.innerWidth;sizes.height=window.innerHeight;camera.aspect=sizes.width/sizes.height;camera.updateProjectionMatrix();renderer.setSize(sizes.width,sizes.height);renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))});var minPan=new THREE.Vector3(-2,-0.5,-2);var maxPan=new THREE.Vector3(2,0.5,2);const tick=()=>{controls.update();controls.target.clamp(minPan,maxPan);renderer.render(scene,camera);window.requestAnimationFrame(tick)};tick();</script>
  </body>
</html>