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

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>