Add files via upload

Fresh4774 · Jan 19, 2024 · 549476d · 549476d
commit 549476d
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Home</title>
+  <link rel="stylesheet" href="./style.css">
+</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/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
+<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
+  <script  src="./script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,78 @@
+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,.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, -.5, -2 )
+var maxPan = new THREE.Vector3( 2, .5, 2 )
+
+const tick = () => {
+    controls.update()
+	controls.target.clamp( minPan, maxPan )
+    renderer.render(scene, camera)
+    window.requestAnimationFrame(tick)
+}
+
+tick()
diff --git a/style.css b/style.css
@@ -0,0 +1,30 @@
+*,
+*::after,
+*::before {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  outline: none;
+  font-family: monospace;
+}
+
+body {
+  overflow: hidden;
+  background-color: #0F0F0F;
+  cursor: grab;
+}
+
+.webgl,
+#loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+#loader {
+  display: grid;
+  place-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}