From 76028e9de31b40bf1fc64f804fc22528d9da6960 Mon Sep 17 00:00:00 2001 From: Mylloon Date: Tue, 8 Nov 2022 09:43:37 +0100 Subject: [PATCH] add same scene but with threeJS --- index.html | 6 ------ js/main.js | 35 ++++++++++++++++++++++++----------- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 472b29c..6cc0b0b 100644 --- a/index.html +++ b/index.html @@ -9,16 +9,10 @@ body { margin: 0px; } - - canvas { - border: 1px solid black; - } - - diff --git a/js/main.js b/js/main.js index 4aab878..4e3e25e 100644 --- a/js/main.js +++ b/js/main.js @@ -1,16 +1,29 @@ window.addEventListener("load", () => main()); const main = () => { - const cnv = document.getElementById("canvas"); - const ctx = cnv.getContext("2d"); - - const size = 100; - - ctx.fillStyle = "blue"; - ctx.fillRect( - cnv.width / 2 - size / 2, - cnv.height / 2 - size / 2, - size, - size + const scene = new THREE.Scene(); + const camera = new THREE.PerspectiveCamera( + 75, + window.innerWidth / window.innerHeight, + 0.1, + 1000 ); + + const renderer = new THREE.WebGLRenderer(); + 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 }); + const cube = new THREE.Mesh(geometry, material); + scene.add(cube); + + camera.position.z = 5; + + const animate = () => { + requestAnimationFrame(animate); + renderer.render(scene, camera); + } + + animate(); };