My Three.js

Go to the Base-Code folder to start with this https://threejs-basic-setup.netlify.app/

OR

Follow these steps to create the most basic Three.js project

step 1

  npm init vite

  // choose a project & package name
  // choose Vanilla
  // choose JavaScript

step 2

  cd Base-Code
  npm install
  npm run dev

  // keep node_modules, package.json & package-lock.json

  // delete everything

  // create these three files --> 
  // index.html 
  // style.css 
  // script.js

step 3

HTML

  // add a canvas element

  <canvas></canvas>

  // connect Javascript with HTML & set the type = module

  <script type="module" src="/main.js"></script>

step 4

CSS

  /* add simple CSS & connect it with HTML */

  * {
    margin: 0;
    padding: 0;
  }
  
  html,
  body {
    overflow: hidden;
  }
  
  canvas {
    position: fixed;
    top: 0;
    left: 0;
    outline: none;
  }

step 5

  ctrl c

  npm i three

  npm run dev

step 6

Three.js

import * as THREE from 'three'



// ----------------------------------------
// Base Setup = Scene + Camera + Renderer


// Scene
const room = new THREE.Scene()


// Camera
const camera = new THREE.PerspectiveCamera()

camera.position.z = 5

room.add(camera)


// Renderer
const renderer = new THREE.WebGLRenderer({canvas:document.querySelector('canvas')})

renderer.setSize(720,720)




// ----------------------------------------
// Create & Add some objects, Lights in the Room


// A Box
const box = new THREE.BoxGeometry()


// This is a 'Glow in Dark' paint
const paint = new THREE.MeshBasicMaterial({ color: 'red' })


// Apply the paint to the box
const coloredBox = new THREE.Mesh(box, paint)


// Bring the box inside the Room
room.add(coloredBox)





// ----------------------------------------
// Final Line

renderer.render(room, camera)