add 3D Room

1 year ago · 3063dcc11c
5 changed files with 136 additions and 8 deletions
--- a/content/index.blade.php
+++ b/content/index.blade.php
@ -1 +1,136 @@
-This is the Index Page
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title></title>
+</head>
+<body>
+  <div id="root"></div>
+  <div id="container"></div>
+  <script type="module">
+    import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js';
+    import {
+      OrbitControls
+    } from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/controls/OrbitControls.js';
+    import {
+      GLTFLoader
+    } from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/loaders/GLTFLoader.js';
+    import {
+      RGBELoader
+    } from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/loaders/RGBELoader.js';
+
+    let container;
+    let camera, scene, renderer;
+    let controls;
+    const clock = new THREE.Clock();
+    var envMap;
+
+    init();
+    animate();
+
+    function init() {
+
+      container = document.getElementById('container');
+
+      //
+      scene = new THREE.Scene();
+      console.log(scene)
+
+      //
+      renderer = new THREE.WebGLRenderer({
+        alpha: true,
+        antialias: true
+      });
+      renderer.setPixelRatio(window.devicePixelRatio);
+      renderer.setSize(window.innerWidth, window.innerHeight);
+      renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      renderer.xr.enabled = true;
+      renderer.localClippingEnabled = true;
+      renderer.physicallyCorrectLights = true;
+      renderer.outputEncoding = THREE.sRGBEncoding;
+      renderer.toneMappingExposure = 0.7;
+      container.appendChild(renderer.domElement);
+
+      var pmremGenerator = new THREE.PMREMGenerator(renderer);
+      pmremGenerator.compileEquirectangularShader();
+
+      camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.01, 20000);
+      camera.position.set(0, 0, 10);
+
+      //
+      new RGBELoader()
+        .setDataType(THREE.UnsignedByteType)
+        .setPath('../')
+        .load("resources/views/template/minimal-theme/files/photo_studio_01_1k.hdr", function (texture2) {
+          envMap = pmremGenerator.fromEquirectangular(texture2).texture;
+          scene.environment = envMap;
+          texture2.dispose();
+          pmremGenerator.dispose();
+        });
+
+      //
+      const loader = new GLTFLoader();
+      loader.setPath('../');
+      loader.load('resources/views/template/minimal-theme/files/room5.glb', function (gltf) {
+
+        gltf.scene.traverse(function (child) {
+          if (child.material) {
+            if (child.name == "Object_6") {
+              child.material.map.wrapS = THREE.RepeatWrapping;
+              child.material.map.wrapT = THREE.RepeatWrapping;
+              child.material.map.repeat.x = 10;
+              child.material.map.repeat.y = 10;
+            }
+          }
+        });
+
+        scene.add(gltf.scene);
+      });
+
+      //
+      const loader2 = new GLTFLoader();
+      loader2.setPath('../');
+      loader2.load('resources/views/template/minimal-theme/files/car.glb', function (gltf) {
+
+        gltf.scene.scale.set(30, 30, 30);
+        gltf.scene.position.set(10, 0, 12);
+
+        var bb = new THREE.Box3()
+        bb.setFromObject(gltf.scene);
+        bb.center(controls.target);
+
+        scene.add(gltf.scene);
+      });
+
+      //
+      controls = new OrbitControls(camera, renderer.domElement);
+      controls.maxPolarAngle = Math.PI * 0.495;
+      controls.target.set(11, 5, 12);
+      controls.minDistance = 0.5;
+      controls.maxDistance = 14;
+      controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
+      controls.dampingFactor = 0.05;
+      controls.update();
+
+      //
+      window.addEventListener('resize', onWindowResize);
+    }
+
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+
+    function animate() {
+      renderer.setAnimationLoop(render);
+    }
+
+    function render(timestamp, frame) {
+      renderer.render(scene, camera);
+      controls.update();
+    }
+  </script>
+</body>
+</html>
--- a/content/master.blade.php
+++ b/content/master.blade.php
@ -4,20 +4,13 @@
    @include('template.'.config('settings.template').'.content.includes.meta')
    @include('template.'.config('settings.template').'.content.includes.css')
    @include('template.'.config('settings.template').'.content.includes.integrations')
-
    @yield('head')
 </head>
 <body>
-   
-
    @yield('content')
-
    @include('template.'.config('settings.template').'.content.includes.footer')
-
    @include('template.'.config('settings.template').'.content.includes.scripts')
-
    @yield('scripts')
    @yield('end_scripts')
-    
 </body>
 </html>
--- a/files/car.glb
+++ b/files/car.glb
--- a/files/photo_studio_01_1k.hdr
+++ b/files/photo_studio_01_1k.hdr
--- a/files/room5.glb
+++ b/files/room5.glb