Skip to content

Commit

Permalink
ohne three.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@strassbcarla
strassbcarla committed May 17, 2024
1 parent c0c686b commit fd83164
Show file tree
Hide file tree
Showing 2 changed files with 0 additions and 170 deletions.
167 changes: 0 additions & 167 deletions themes/spectral/assets/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,170 +3,3 @@
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";

//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 = 'Open2023 Bordeaux';

//Instantiate a loader for the .gltf file
const loader = new GLTFLoader();

//Load the file
loader.load(
`models/${objToRender}/Open2023 Bordeaux.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 === "Open2023 Bordeaux" ? 25 : 500;

//Add lights to the scene, so we can actually see the 3D model
const topLight = new THREE.DirectionalLight(0xffffff, 5); // (color, intensity)
topLight.position.set(500, 500, 500) //top-left-ish
topLight.castShadow = true;
scene.add(topLight);

const ambientLight = new THREE.AmbientLight(0x333333, objToRender === "Open2023 Bordeaux" ? 5 : 1);
scene.add(ambientLight);

//This adds controls to the camera, so we can rotate / zoom it with the mouse
if (objToRender === "Open2023 Bordeaux") {
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'),
$banner = $('#banner'),
$header = $('#header');

// Breakpoints.
breakpoints({
xlarge: [ '1281px', '1680px' ],
large: [ '981px', '1280px' ],
medium: [ '737px', '980px' ],
small: [ '481px', '736px' ],
xsmall: [ null, '480px' ]
});

// Play initial animations on page load.
$window.on('load', function() {
window.setTimeout(function() {
$body.removeClass('is-preload');
}, 100);
});

// Mobile?
if (browser.mobile)
$body.addClass('is-mobile');
else {

breakpoints.on('>medium', function() {
$body.removeClass('is-mobile');
});

breakpoints.on('<=medium', function() {
$body.addClass('is-mobile');
});

}

// Scrolly.
$('.scrolly')
.scrolly({
speed: 1500,
offset: $header.outerHeight()
});

// Menu.
$('#menu')
.append('<a href="#menu" class="close"></a>')
.appendTo($body)
.panel({
delay: 500,
hideOnClick: true,
hideOnSwipe: true,
resetScroll: true,
resetForms: true,
side: 'right',
target: $body,
visibleClass: 'is-menu-visible'
});

// Header.
if ($banner.length > 0
&& $header.hasClass('alt')) {

$window.on('resize', function() { $window.trigger('scroll'); });

$banner.scrollex({
bottom: $header.outerHeight() + 1,
terminate: function() { $header.removeClass('alt'); },
enter: function() { $header.addClass('alt'); },
leave: function() { $header.removeClass('alt'); }
});

}
})(jQuery);

// clear form to avoid it still being filled after submission
window.onbeforeunload = () => {
for(const form of document.getElementsByTagName('form')) {
form.reset();
}

}
3 changes: 0 additions & 3 deletions themes/spectral/layouts/partials/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,4 @@ <h1><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
</nav>
</header>
</div>
<main>
<div id="container3D"></div>
</main>
</body>

0 comments on commit fd83164

Please sign in to comment.