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>
<html lang="en">
<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>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script type="module" src="/main.js"></script>
<canvas id="canvas"></canvas>
<script type="module" src="/src/main.js"></script>
</body>
</html>

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

@@ -1,12 +1,14 @@
import './style.css';
import * as THREE from 'three';
import WebGL from 'three/addons/capabilities/WebGL.js';
const scene = new THREE.Scene();
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);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);
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;
}