bert/isdefoobaropen
1
0
Fork 0
Code Pull Requests Releases Activity

Implement basic 3d rendering.

Browse Source
This commit is contained in:
Bert Peters
2019-03-08 16:40:22 +01:00
parent 12daff1f7d
commit f5344f3197
5 changed files with 47 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -7,7 +7,9 @@
"author": "Bert Peters <bert@bertptrs.nl>", "author": "Bert Peters <bert@bertptrs.nl>",
"license": "GPLv3", "license": "GPLv3",
"private": true, "private": true,
"dependencies": {}, "dependencies": {
"three": "^0.102.1"
},
"devDependencies": { "devDependencies": {
"autoprefixer": "^9.4.9", "autoprefixer": "^9.4.9",
"css-loader": "^2.1.0", "css-loader": "^2.1.0",

4
src/index.js
View File

@@ -1,9 +1,9 @@
import {startClosedAnimation} from "./closed"; import {startClosedAnimation} from "./closed";
import "./open" import {startOpenAnimation} from "./open";
window.addEventListener('load', function () { window.addEventListener('load', function () {
if (document.body.classList.contains('open')) { if (document.body.classList.contains('open')) {
// TODO: leave it in HTML/CSS for now. startOpenAnimation();
} else { } else {
startClosedAnimation(); startClosedAnimation();
} }

37
src/open.js
View File

@@ -1 +1,38 @@
import * as THREE from "three";
import './open.scss'; 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};

18
src/open.scss
View File

@@ -13,20 +13,12 @@
} }
body.open { body.open {
height: 100%;
background-color: #a3d165; background-color: #a3d165;
text-align: center; margin: 0;
overflow: hidden;
} }
#wrapper { canvas {
margin: auto; width: 100%;
width: 999px; height: 100%;
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;
} }

7
templates/open.html
View File

@@ -7,12 +7,5 @@
<script src="bundle.js"></script> <script src="bundle.js"></script>
</head> </head>
<body class="open"> <body class="open">
<div id="wrapper">
<h1>JA! De FooBar is open.</h1>
<h2>Nu kun je weer rustig ademhalen.</h2>
<strong id="greatest">Kom gezellig even langs.</strong>
<!-- This is not the greatest strong in the world, no no.
This is just attribute. -->
</div>
</body> </body>
</html> </html>