fix 3d Mock

cmahnke · Jul 9, 2024 · d362d61 · d362d61
1 parent fb2659e
commit d362d61
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 15 deletions.
diff --git a/Source Files/Mocks/README.md b/Source Files/Mocks/README.md
@@ -1,7 +1,4 @@
 # TODO
 
-* Fix SCSS integration
-* Fix Photoswipe shortcode
 * 3D Model
-  * Fix distortion on 3D Model
   * Try to remove top level await
diff --git a/Source Files/Mocks/package.json b/Source Files/Mocks/package.json
@@ -3,7 +3,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "eslint": "eslint . -c eslint.config.mjs --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . -c eslint.config.mjs --report-unused-disable-directives --max-warnings 0",
     "stylelint": "stylelint '**/*.scss'",
     "model": "obj2gltf -i webgpu/public/model/3DModel.obj -o webgpu/public/model/uranium.glb"
   },

diff --git a/Source Files/Mocks/webgpu/assets/scss/base.scss b/Source Files/Mocks/webgpu/assets/scss/base.scss
@@ -1,5 +1,7 @@
-.canvas {
-  #renderer {
+.renderer-canvas {
+  min-height: 50vh;
+
+  canvas {
     background: black;
   }
 

diff --git a/Source Files/Mocks/webgpu/index.html b/Source Files/Mocks/webgpu/index.html
@@ -18,7 +18,7 @@ <h1>HDR webGPU</h1>
     </div>
     <div id="status"></div>
     <div class="hdr-content">
-      <div class="canvas">
+      <div class="renderer-canvas">
         <canvas id="renderer"></canvas>
       </div>
     </div>

diff --git a/assets/js/hdr-model.js b/assets/js/hdr-model.js
@@ -16,7 +16,7 @@ function render() {
   camera.lookAt(model.position);
   controls.update();
 
-  camera.aspect = canvas.parentNode.clientWidth / canvas.parentNode.clientHeight;
+  camera.aspect = renderer.domElement.parentNode.clientWidth / renderer.domElement.parentNode.clientHeight;
   camera.updateProjectionMatrix();
 
   renderer.renderAsync(scene, camera);
@@ -67,19 +67,26 @@ export function initModel(canvas, modelUrl, replacements) {
   	}
   );
 
-  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20);
-	camera.position.set(0, 0, 5);
+
 
   // Add alpha: true for transparency
   renderer = new HDRWebGPURenderer({canvas: canvas, antialias: true});
-  const ratio = window.devicePixelRatio || 1;
-	renderer.setPixelRatio(ratio);
   const parentWidth = renderer.domElement.parentNode.clientWidth;
   const parentHeight = renderer.domElement.parentNode.clientHeight;
+
+  //camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20);
+  camera = new THREE.PerspectiveCamera(45, parentWidth / parentHeight, 0.25, 20);
+	camera.position.set(0, 0, 5);
+
+  const ratio = window.devicePixelRatio || 1;
+	renderer.setPixelRatio(ratio);
+
   renderer.setSize(parentWidth, parentHeight);
-  renderer.setAnimationLoop( animate );
+  renderer.setAnimationLoop(animate);
   renderer.setClearColor(0x000000, 0);
-  controls = new OrbitControls( camera, renderer.domElement );
+  controls = new OrbitControls(camera, renderer.domElement);
+  controls.minPolarAngle = 0;
+	controls.maxPolarAngle =  Math.PI * 0.5;
 
   window.addEventListener("resize", () => {
     camera.aspect = canvas.parentNode.clientWidth / canvas.parentNode.clientHeight;
@@ -98,14 +105,15 @@ function animate() {
 	renderer.render(scene, camera);
 }
 
+/*
 function getImageDataFromImg(img) {
   const colorSpace = 'rec2100-hlg';
   const offscreen = new OffscreenCanvas(img.width, img.height);
-//  offscreen.configureHighDynamicRange({mode:'extended'});
   const loadCtx = offscreen.getContext("2d", {colorSpace: colorSpace, pixelFormat:'float16'});
   loadCtx.drawImage(img, 0, 0);
   const imData = loadCtx.getImageData(0, 0, img.width, img.height);
   return imData;
 }
+*/
 
 window.initModel = initModel;