aller erster Versuch Team Faabs Roboter 23 auf Webseite 3D

content/posts/_index.md

@@ -13,5 +13,6 @@ lang = "en"
     <li class="page-item"><a class="page-link" href="#">3</a></li>
     <li class="page-item"><a class="page-link" href="#">Next</a></li>
   </ul>
+
 </nav>
 

themes/spectral/assets/js/main.js

@@ -3,9 +3,91 @@
 	html5up.net | @ajlkn
 	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 */
+import * as THREE from "https://cdn.skypack.dev/[email protected]/build/three.module.js";
+// To allow for the camera to move around the scene
+import { OrbitControls } from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";
+// To allow for importing the .gltf file
+import { GLTFLoader } from "https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/GLTFLoader.js";
 
-(function($) {
+//Create a Three.JS Scene
+const scene = new THREE.Scene();
+//create a new camera with positions and angles
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+
+//Keep the 3D object on a global variable so we can access it later
+let object;
+
+//OrbitControls allow the camera to move around the scene
+let controls;
+
+//Set which object to render
+let objToRender = 'TeamFaabs23';
+
+//Instantiate a loader for the .gltf file
+const loader = new GLTFLoader();
+
+//Load the file
+loader.load(
+  `models/${objToRender}/scene.gltf`,
+  function (gltf) {
+    //If the file is loaded, add it to the scene
+    object = gltf.scene;
+    scene.add(object);
+  },
+  function (xhr) {
+    //While it is loading, log the progress
+    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+  },
+  function (error) {
+    //If there is an error, log it
+    console.error(error);
+  }
+);
+
+//Instantiate a new renderer and set its size
+const renderer = new THREE.WebGLRenderer({ alpha: true }); //Alpha: true allows for the transparent background
+renderer.setSize(window.innerWidth, window.innerHeight);
+
+//Add the renderer to the DOM
+document.getElementById("container3D").appendChild(renderer.domElement);
+
+//Set how far the camera will be from the 3D model
+camera.position.z = objToRender === "dino" ? 25 : 500;
+
+//Add lights to the scene, so we can actually see the 3D model
+const topLight = new THREE.DirectionalLight(0xffffff, 1); // (color, intensity)
+topLight.position.set(500, 500, 500) //top-left-ish
+topLight.castShadow = true;
+scene.add(topLight);
 
+const ambientLight = new THREE.AmbientLight(0x333333, objToRender === "dino" ? 5 : 1);
+scene.add(ambientLight);
+
+//This adds controls to the camera, so we can rotate / zoom it with the mouse
+if (objToRender === "TeamFaabs23") {
+  controls = new OrbitControls(camera, renderer.domElement);
+}
+
+//Render the scene
+function animate() {
+  requestAnimationFrame(animate);
+  //Here we could add some code to update the scene, adding some automatic movement
+
+  renderer.render(scene, camera);
+}
+
+//Add a listener to the window, so we can resize the window and the camera
+window.addEventListener("resize", function () {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+});
+
+//Start the 3D rendering
+animate();
+
+(function($) {
+
 	var	$window = $(window),
 		$body = $('body'),
 		$wrapper = $('#page-wrapper'),
@@ -86,4 +168,5 @@ window.onbeforeunload = () => {
   for(const form of document.getElementsByTagName('form')) {
     form.reset();
   }
+
 }

themes/spectral/layouts/partials/header.html

@@ -50,3 +50,8 @@ <h1><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
 							</ul>
 						</nav>
 					</header>
+			</div>
+		<main>
+			<div id="container3D"></div>
+		</main>
+	</body>