From 6a16badf8261deeab1bdcd5ef184b245f0a696a5 Mon Sep 17 00:00:00 2001 From: KeinerTTV Date: Tue, 19 Mar 2024 10:45:21 +0100 Subject: [PATCH] Better three.js setup --- index.html | 12 +++++------- main.js => src/main.js | 6 ++++-- src/style.css | 14 ++++++++++++++ 3 files changed, 23 insertions(+), 9 deletions(-) rename main.js => src/main.js (87%) create mode 100644 src/style.css 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; +}