commit 4cbc25dcae96be86bad3491e194471f3bcd0314f Author: sayudhalw Date: Thu Aug 13 19:03:52 2026 +0700 first commit diff --git a/package.json b/package.json new file mode 100644 index 0000000..94964ab --- /dev/null +++ b/package.json @@ -0,0 +1,17 @@ +{ + "name": "threejs-journey-exercise", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build" + }, + "devDependencies": { + "vite": "^6.2.2", + "vite-plugin-restart": "^0.4.2" + }, + "dependencies": { + "three": "^0.174.0" + } +} \ No newline at end of file diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..ee3ee84 --- /dev/null +++ b/readme.md @@ -0,0 +1,16 @@ +# Three.js Journey + +## Setup +Download [Node.js](https://nodejs.org/en/download/). +Run this followed commands: + +``` bash +# Install dependencies (only the first time) +npm install + +# Run the local server at localhost:8080 +npm run dev + +# Build for production in the dist/ directory +npm run build +``` diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..7ceda5a --- /dev/null +++ b/src/index.html @@ -0,0 +1,13 @@ + + + + + + First Three.js Project + + + + + + + \ No newline at end of file diff --git a/src/script.js b/src/script.js new file mode 100644 index 0000000..256717e --- /dev/null +++ b/src/script.js @@ -0,0 +1,39 @@ +import * as THREE from 'three' + +// Canvas +const canvas = document.querySelector('canvas.webgl') + +// Scene +const scene = new THREE.Scene() + +/** + * Object + */ +const geometry = new THREE.BoxGeometry(1, 1, 1) +const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }) +const mesh = new THREE.Mesh(geometry, material) +scene.add(mesh) + +/** + * Sizes + */ +const sizes = { + width: 800, + height: 600 +} + +/** + * Camera + */ +const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height) +camera.position.z = 3 +scene.add(camera) + +/** + * Renderer + */ +const renderer = new THREE.WebGLRenderer({ + canvas: canvas +}) +renderer.setSize(sizes.width, sizes.height) +renderer.render(scene, camera) \ No newline at end of file diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..e69de29 diff --git a/static/.gitkeep b/static/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/static/door.jpg b/static/door.jpg new file mode 100644 index 0000000..614d9cd Binary files /dev/null and b/static/door.jpg differ diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..23032d7 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,21 @@ +import restart from 'vite-plugin-restart' + +export default { + root: 'src/', // Sources files (typically where index.html is) + publicDir: '../static/', // Path from "root" to static assets (files that are served as they are) + server: + { + host: true, // Open to local network and display URL + open: !('SANDBOX_URL' in process.env || 'CODESANDBOX_HOST' in process.env) // Open if it's not a CodeSandbox + }, + build: + { + outDir: '../dist', // Output in the dist/ folder + emptyOutDir: true, // Empty the folder first + sourcemap: true // Add sourcemap + }, + plugins: + [ + restart({ restart: [ '../static/**', ] }) // Restart server on static file change + ], +} \ No newline at end of file