yanis/rate
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new services + new scripts

Browse Source
This commit is contained in:
Yanis Rigaudeau
2022-10-14 18:49:09 +02:00
parent 8866784d49
commit 5538a042df
23 changed files with 200 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
www/package-lock.json generated
View File

@ -19,6 +19,7 @@
"@tsconfig/svelte": "^2.0.0",
"@types/three": "^0.144.0",
"prettier": "^2.7.1",
"prettier-plugin-svelte": "^2.8.0",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0",
@ -1027,6 +1028,16 @@
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/prettier-plugin-svelte": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.8.0.tgz",
"integrity": "sha512-QlXv/U3bUszks3XYDPsk1fsaQC+fo2lshwKbcbO+lrSVdJ+40mB1BfL8OCAk1W9y4pJxpqO/4gqm6NtF3zNGCw==",
"dev": true,
"peerDependencies": {
"prettier": "^1.16.4 || ^2.0.0",
"svelte": "^3.2.0"
}
},
"node_modules/queue-microtask": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@ -2381,6 +2392,13 @@
"integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
"dev": true
},
"prettier-plugin-svelte": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.8.0.tgz",
"integrity": "sha512-QlXv/U3bUszks3XYDPsk1fsaQC+fo2lshwKbcbO+lrSVdJ+40mB1BfL8OCAk1W9y4pJxpqO/4gqm6NtF3zNGCw==",
"dev": true,
"requires": {}
},
"queue-microtask": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",

1
www/package.json
View File

@ -18,6 +18,7 @@
"@tsconfig/svelte": "^2.0.0",
"@types/three": "^0.144.0",
"prettier": "^2.7.1",
"prettier-plugin-svelte": "^2.8.0",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0",

40
www/src/App.svelte
View File

@ -1,30 +1,30 @@
<script lang="ts">
// export let name: string;
import Test3D from "./components/test3D.svelte";
// export let name: string;
import Test3D from './components/test3D.svelte';
</script>
<main>
<Test3D></Test3D>
<Test3D />
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>

73
www/src/components/test3D.svelte
View File

@ -1,51 +1,68 @@
<script lang="ts">
//import { onMount } from "lifecycle";
import { beforeUpdate, afterUpdate } from 'svelte';
import * as Three from 'three';
//import { onMount } from "lifecycle";
import { beforeUpdate, afterUpdate } from 'svelte';
import * as Three from 'three';
let innerWidth: number = 0;
let innerHeight: number = 0;
let scene: Three.Scene = new Three.Scene();
let camera: Three.PerspectiveCamera = new Three.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);
let camera: Three.PerspectiveCamera = new Three.PerspectiveCamera(
75,
innerWidth / innerHeight,
0.1,
1000,
);
let renderer: Three.WebGLRenderer = new Three.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
document.body.appendChild(renderer.domElement);
let box: Three.BoxGeometry = new Three.BoxGeometry(1,1,1);
let mat: Three.MeshBasicMaterial = new Three.MeshBasicMaterial({ color: 0x00ff00 });
let box: Three.BoxGeometry = new Three.BoxGeometry(1, 1, 1);
let mat: Three.MeshBasicMaterial = new Three.MeshBasicMaterial({
color: 0x00ff00,
});
let cube = new Three.Mesh(box, mat);
scene.add(cube);
camera.position.z = 5;
camera.setViewOffset(window.innerWidth, window.innerHeight, 0, 0, window.innerWidth, window.innerHeight)
renderer.setSize(window.innerWidth, window.innerHeight);
camera.setViewOffset(
window.innerWidth,
window.innerHeight,
0,
0,
window.innerWidth,
window.innerHeight,
);
renderer.setSize(window.innerWidth, window.innerHeight);
function animate() {
requestAnimationFrame(animate);
requestAnimationFrame(animate);
cube.rotation.x += 0.02;
cube.rotation.y += 0.02;
cube.rotation.x += 0.02;
cube.rotation.y += 0.02;
renderer.render(scene, camera);
};
animate();
renderer.render(scene, camera);
}
animate();
beforeUpdate(() => {
})
beforeUpdate(() => {});
afterUpdate(() => {
camera.setViewOffset(window.innerWidth, window.innerHeight, 0, 0, window.innerWidth, window.innerHeight)
renderer.setSize(window.innerWidth, window.innerHeight);
})
camera.setViewOffset(
window.innerWidth,
window.innerHeight,
0,
0,
window.innerWidth,
window.innerHeight,
);
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
<svelte:window bind:innerWidth bind:innerHeight/>
<svelte:window bind:innerWidth bind:innerHeight />
<style>
html,
@ -58,8 +75,8 @@
body {
position: relative;
margin: 0;
width: 100%;
height: 100%;
}
</style>
</style>