{"id":8588,"date":"2025-05-28T13:29:38","date_gmt":"2025-05-28T13:29:38","guid":{"rendered":"https:\/\/fitoutsport.nl\/?page_id=8588"},"modified":"2025-05-28T13:36:16","modified_gmt":"2025-05-28T13:36:16","slug":"3d-animatie","status":"publish","type":"page","link":"https:\/\/fitoutsport.nl\/en\/3d-animatie\/","title":{"rendered":"3D animatie"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"8588\" class=\"elementor elementor-8588\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ae44c9f e-flex e-con-boxed e-con e-parent\" data-id=\"ae44c9f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-032492a elementor-widget elementor-widget-html\" data-id=\"032492a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- BEGIN SNIPPET FOR ELEMENTOR -->\r\n<div id=\"container3D\"><\/div>\r\n\r\n<style>\r\n  \/* Basisstijl en full-screen canvas *\/\r\n  body {\r\n    margin: 0;\r\n    font-family: \"Montserrat\", sans-serif;\r\n    background-color: #000;\r\n  }\r\n\r\n  \/* Optioneel: header als je die in Elementor zelf toevoegt, kun je deze weglaten *\/\r\n  header {\r\n    margin-top: 3em;\r\n    text-align: center;\r\n    color: white;\r\n  }\r\n  header h1 {\r\n    font-size: 2em;\r\n    font-weight: 900;\r\n  }\r\n\r\n  \/* Zorg dat de three.js canvas de hele viewport vult *\/\r\n  #container3D canvas {\r\n    width: 100vw !important;\r\n    height: 100vh !important;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n  }\r\n<\/style>\r\n\r\n<script type=\"module\">\r\n  \/\/ Imports van Three.js en helpers\r\n  import * as THREE from \"https:\/\/cdn.skypack.dev\/three@0.129.0\/build\/three.module.js\";\r\n  import { OrbitControls } from \"https:\/\/cdn.skypack.dev\/three@0.129.0\/examples\/jsm\/controls\/OrbitControls.js\";\r\n  import { GLTFLoader } from \"https:\/\/cdn.skypack.dev\/three@0.129.0\/examples\/jsm\/loaders\/GLTFLoader.js\";\r\n\r\n  \/\/ Scene en camera\r\n  const scene = new THREE.Scene();\r\n  const camera = new THREE.PerspectiveCamera(\r\n    75,\r\n    window.innerWidth \/ window.innerHeight,\r\n    0.1,\r\n    1000\r\n  );\r\n\r\n  \/\/ Mouse-tracking voor \u201ceye\u201d-rotatie\r\n  let mouseX = window.innerWidth \/ 2;\r\n  let mouseY = window.innerHeight \/ 2;\r\n\r\n  \/\/ Globale variabelen\r\n  let object;\r\n  let controls;\r\n  const objToRender = 'eye'; \/\/ of 'dino' als je een dino-model hebt\r\n\r\n  \/\/ GLTF loader\r\n  const loader = new GLTFLoader();\r\n  loader.load(\r\n    \"https:\/\/fitoutsport.nl\/wp-content\/uploads\/2025\/05\/Fitout-Sport-Station.glb\",\r\n    (gltf) => {\r\n      object = gltf.scene;\r\n      scene.add(object);\r\n    },\r\n    (xhr) => {\r\n      console.log((xhr.loaded \/ xhr.total) * 100 + \"% loaded\");\r\n    },\r\n    (err) => {\r\n      console.error(\"Error loading GLTF:\", err);\r\n    }\r\n  );\r\n\r\n  \/\/ Renderer\r\n  const renderer = new THREE.WebGLRenderer({ alpha: true });\r\n  renderer.setSize(window.innerWidth, window.innerHeight);\r\n  document.getElementById(\"container3D\").appendChild(renderer.domElement);\r\n\r\n  \/\/ Camera-positie\r\n  camera.position.z = objToRender === \"dino\" ? 25 : 500;\r\n\r\n  \/\/ Verlichting\r\n  const topLight = new THREE.DirectionalLight(0xffffff, 1);\r\n  topLight.position.set(500, 500, 500);\r\n  topLight.castShadow = true;\r\n  scene.add(topLight);\r\n\r\n  const ambientLight = new THREE.AmbientLight(\r\n    0x333333,\r\n    objToRender === \"dino\" ? 5 : 1\r\n  );\r\n  scene.add(ambientLight);\r\n\r\n  \/\/ OrbitControls alleen voor \u201cdino\u201d\r\n  if (objToRender === \"dino\") {\r\n    controls = new OrbitControls(camera, renderer.domElement);\r\n  }\r\n\r\n  \/\/ Animatieloop\r\n  function animate() {\r\n    requestAnimationFrame(animate);\r\n\r\n    if (object && objToRender === \"eye\") {\r\n      object.rotation.y = -3 + (mouseX \/ window.innerWidth) * 3;\r\n      object.rotation.x = -1.2 + (mouseY * 2.5) \/ window.innerHeight;\r\n    }\r\n\r\n    renderer.render(scene, camera);\r\n  }\r\n  animate();\r\n\r\n  \/\/ Responsief schalen\r\n  window.addEventListener(\"resize\", () => {\r\n    camera.aspect = window.innerWidth \/ window.innerHeight;\r\n    camera.updateProjectionMatrix();\r\n    renderer.setSize(window.innerWidth, window.innerHeight);\r\n  });\r\n\r\n  \/\/ Mouse-move listener\r\n  document.addEventListener(\"mousemove\", (e) => {\r\n    mouseX = e.clientX;\r\n    mouseY = e.clientY;\r\n  });\r\n<\/script>\r\n<!-- END SNIPPET FOR ELEMENTOR -->\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"\/* Basisstijl en full-screen canvas *\/ body { margin: 0; font-family: \"Montserrat\", sans-serif; background-color: #000; } \/* Optioneel: header als je die in Elementor zelf toevoegt, kun je deze weglaten...","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"spay_email":"","footnotes":""},"class_list":["post-8588","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/fitoutsport.nl\/en\/wp-json\/wp\/v2\/pages\/8588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fitoutsport.nl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fitoutsport.nl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fitoutsport.nl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fitoutsport.nl\/en\/wp-json\/wp\/v2\/comments?post=8588"}],"version-history":[{"count":7,"href":"https:\/\/fitoutsport.nl\/en\/wp-json\/wp\/v2\/pages\/8588\/revisions"}],"predecessor-version":[{"id":8598,"href":"https:\/\/fitoutsport.nl\/en\/wp-json\/wp\/v2\/pages\/8588\/revisions\/8598"}],"wp:attachment":[{"href":"https:\/\/fitoutsport.nl\/en\/wp-json\/wp\/v2\/media?parent=8588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}