diff --git a/package.json b/package.json index 4f2275a..c0b9022 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,9 @@ "author": "Bert Peters ", "license": "GPLv3", "private": true, - "dependencies": {}, + "dependencies": { + "three": "^0.102.1" + }, "devDependencies": { "autoprefixer": "^9.4.9", "css-loader": "^2.1.0", diff --git a/src/index.js b/src/index.js index 057dec6..eb3d212 100644 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,9 @@ import {startClosedAnimation} from "./closed"; -import "./open" +import {startOpenAnimation} from "./open"; window.addEventListener('load', function () { if (document.body.classList.contains('open')) { - // TODO: leave it in HTML/CSS for now. + startOpenAnimation(); } else { startClosedAnimation(); } diff --git a/src/open.js b/src/open.js index d4d87c5..0302ab7 100644 --- a/src/open.js +++ b/src/open.js @@ -1 +1,38 @@ +import * as THREE from "three"; + import './open.scss'; + +let scene, camera, renderer; +let cube; + +function startOpenAnimation() { + scene = new THREE.Scene(); + camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); + camera.position.z = 5; + + renderer = new THREE.WebGLRenderer(); + renderer.setSize(window.innerWidth, window.innerHeight); + document.body.appendChild(renderer.domElement); + + + // Initialize sample cube. + let geometry = new THREE.BoxGeometry(1, 1, 1); + console.log(geometry); + let material = new THREE.MeshBasicMaterial({color: 0x00ff00}); + cube = new THREE.Mesh(geometry, material); + scene.add(cube); + + requestAnimationFrame(animate) +} + +function animate() { + requestAnimationFrame(animate); + + cube.rotation.x += 0.01; + cube.rotation.y += 0.01; + + renderer.render(scene, camera); +} + + +export {startOpenAnimation}; diff --git a/src/open.scss b/src/open.scss index f926e21..787a9f2 100644 --- a/src/open.scss +++ b/src/open.scss @@ -13,20 +13,12 @@ } body.open { - height: 100%; background-color: #a3d165; - text-align: center; + margin: 0; + overflow: hidden; } -#wrapper { - margin: auto; - width: 999px; - height: 999px; - padding-top: 400px; - margin-top: -200px; - background-image: url(star.png); - background-repeat: no-repeat; - animation: starrotation 10s; - animation-iteration-count: infinite; - animation-timing-function: linear; +canvas { + width: 100%; + height: 100%; } diff --git a/templates/open.html b/templates/open.html index e6c0078..b541ad0 100644 --- a/templates/open.html +++ b/templates/open.html @@ -7,12 +7,5 @@ -
-

JA! De FooBar is open.

-

Nu kun je weer rustig ademhalen.

- Kom gezellig even langs. - -