Try a minimal threejs boilerplate just to see how it works.
https://github.com/Sean-Bradley/Threejs-Boilerplate
Open a command prompt somewhere.
git clone https://github.com/Sean-Bradley/Threejs-Boilerplate.git
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 127.0.0.1:3000 in your browser
You can also get this through vite
It makes it very easier and fast to work with libraries.
-
npm create [email protected]
-
follow the instructions like giving name of project and package name etc.
-
cd project_name
-
npm install
-
npm run dev
Now you will see a localhost running vite app
-
delete the unnecessary files
-
npm install three
-
Starting making the scene and that’s it.
Hope it works
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:
test.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>test</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="three.js"></script>
<script src="OrbitControls.js"></script>
<script src="test.js"></script>
</body>
</html>
(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
scene = new THREE.Scene();
//camera
camera = new THREE.PerspectiveCamera(
30,
aspect,
1,
2000
);
camera.position.z = 2000;
//renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xf3affa);
document.body.appendChild(renderer.domElement);
//lights
light = new THREE.PointLight(0xffffff, 1);
light.position.set(50, -100, 300);
scene.add(light);
light2 = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light2);
//controls
controls = new OrbitControls(camera, renderer.domElement);
controls.update();
controls.autoRotate = true;
//plane
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);
scene.add(plane);
//cube
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);
scene.add(cube);
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
cube.rotation.x += .01;
}
render();
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.
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?
