Solution 1 :

Try a minimal threejs boilerplate just to see how it works.

Open a command prompt somewhere.

git clone
cd Threejs-Boilerplate
code .

The code . should open vscode at the current folder if you installed it on windows with defaults.

Open the integrated terminal in VSCode, or continue using the existing cmd prompt you already have open from before

npm install
npm start

Visit in your browser

Solution 2 :

You can also get this through vite
It makes it very easier and fast to work with libraries.

  1. npm create [email protected]

  2. follow the instructions like giving name of project and package name etc.

  3. cd project_name

  4. npm install

  5. npm run dev
    Now you will see a localhost running vite app

  6. delete the unnecessary files

  7. npm install three

  8. Starting making the scene and that’s it.
    Hope it works

Problem :

I am struggling to figure out how to get my js code to work in VSCode. I am trying to transition away from using CodePen for everything and start using an actual code editor.

I thought this would be pretty straight forward but I can’t seem to figure out how to get it to work. Here are the files I am using:


<!DOCTYPE html>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        body {
            margin: 0;

        canvas {
            width: 100%;
            height: 100%;

    <script src="three.js"></script>
    <script src="OrbitControls.js"></script>
    <script src="test.js"></script>


(I have also tried it other way, like having the scripts in the head.)

and test.js

let scene, renderer, camera, plane, cube, sphere, cone, light, light2, controls;
let aspect = window.innerWidth / window.innerHeight;

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(
camera.position.z = 2000;

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

light = new THREE.PointLight(0xffffff, 1);
light.position.set(50, -100, 300);

light2 = new THREE.AmbientLight(0xffffff, 0.5);

controls = new OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;

let shape = new THREE.PlaneGeometry(500, 500, 500);
let mat = new THREE.MeshStandardMaterial({ color: 0xaaaaaa });
plane = new THREE.Mesh(shape, mat);
plane.rotation.y -= .5;
plane.position.set(0, 0, -20);

let shape1 = new THREE.BoxGeometry(200, 200, 200);
let mat1 = new THREE.MeshStandardMaterial({ color: 0x111134 });
cube = new THREE.Mesh(shape1, mat1);
cube.position.set(0, 0, 100);

function render() {
    renderer.render(scene, camera);
    cube.rotation.x += .01;

I have both files in the same folder along with OrbitControls.js and three.js which I downloaded from the main THREE.js package.

This code works on CodePen but when I drag and drop the html file into a web browser it only loads to a black screen. I’ve been at this for a day now and have ran through several tutorials but can’t figure out why I am getting nothing to render.

Thanks in advance.


Comment posted by Justin

Ok I followed those directions and see a green wireframe cube

Comment posted by Justin

Ok I was able to look through your files and figure out how it worked. I am very new to this stuff as I’ve been using CodePen since I started. I created folders in yoiur public folder with two of my projects and edited the app.js too look at them. I do have to restart npm whenever I switch projects though. Is there a way to have all of the project directories in the app.js and not have to restart npm each time I switch? Not too big of a deal though since I’ll normaly be working on one poroject at a time anyways. Also if I continue using this boilerplate is there anything I need to be aware of?