diff --git a/index.html b/index.html
index 4eae2f3..850d541 100644
--- a/index.html
+++ b/index.html
@@ -1,15 +1,13 @@
-
+
+
+
My first three.js app
-
-
+
+
diff --git a/main.js b/src/main.js
similarity index 87%
rename from main.js
rename to src/main.js
index e45e8b9..7a42e0a 100644
--- a/main.js
+++ b/src/main.js
@@ -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 });
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..4694615
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,14 @@
+html,
+body,
+#canvas {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background: #000;
+}
+
+#canvas {
+ outline: none;
+}