first commit

2026-08-13 19:03:52 +07:00
commit 4cbc25dcae
8 changed files with 106 additions and 0 deletions
@@ -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"
  }
 }
@@ -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
 ```
@@ -0,0 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First Three.js Project</title>
    <link rel="stylesheet" href="./style.css">
 </head>
 <body>
    <canvas class="webgl"></canvas>
    <script type="module" src="./script.js"></script>
 </body>
 </html>
@@ -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)
@@ -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
    ],
 }