KeinerTTV/me
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Better three.js setup

Browse Source
This commit is contained in:
Yan-Luca L.
2024-03-19 10:45:21 +01:00
parent ec4eaf3869
commit 6a16badf82
3 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@@ -1,15 +1,13 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="UTF-8" />
<link rel="icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My first three.js app</title> <title>My first three.js app</title>
<style>
body {
margin: 0;
}
</style>
</head> </head>
<body> <body>
<script type="module" src="/main.js"></script> <canvas id="canvas"></canvas>
<script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

6
main.js → src/main.js
View File

@@ -1,12 +1,14 @@
import './style.css';
import * as THREE from 'three'; import * as THREE from 'three';
import WebGL from 'three/addons/capabilities/WebGL.js'; import WebGL from 'three/addons/capabilities/WebGL.js';
const scene = new THREE.Scene(); const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer(); const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#canvas'),
});
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1); const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

14
src/style.css Normal file
View File

@@ -0,0 +1,14 @@
html,
body,
#canvas {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
}
#canvas {
outline: none;
}