Build a Mindblowing 3D Portfolio Website // Three.js Beginner’s Tutorial

Fireship · 3.1M views · 2021 · 15:38

Open on YouTube

Web developmentComputer graphics & renderingCreative coding & generative arttutorialdated

Why Stack Overflow recommends it

Stack Overflow users mention it as the tutorial they were following when they ran into JavaScript, Vite and npm setup problems.

Recommended by 1 people across 1 different months, 2021 to 2022.

What it is

A 15-minute Fireship tutorial that introduces Three.js by building an animated 3D scrolling portfolio page. It walks through scene, camera, renderer, geometry, materials, lighting, textures and scroll-driven camera movement, with the finished code on GitHub.

What people said

Recommends RowSalmon · 2021-07 · Stack Overflow · on “When to call function with and without parenthesis brackets ()?”

I am working through a tutorial here [this video] and have encountered some syntax that I don't fully understand. I want it to be that every time I scroll, console.log logs "hello". function moveCamera() { console.log("hello"); } document.body.onscroll = moveCamera() function moveCamera() { console.log("hello"); } document.body.onscroll = moveCamera In the first example, console.log("hello") runs once, but then never again, regardless of my scrolling. In the second example, the code runs and logs "hello" every time there is a scroll. I understand that for the second example, moveCamera passes a copy of the function, making a function that looks somewhat like this: document.body.onscroll = functio

Cites Omar Farag · 2021-05 · Stack Overflow · on “How do I serve my javascript app locally on Linux Mint”

I'm currently following a tutorial, and I've made sure to follow each and every step. I'm trying to locally host my javascript app at localhost:3000. However, I'm unable to do so, and whenever I try to run npm run dev I get the following error log: 0 info it worked if it ends with ok 1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'dev' ] 2 info using npm@6.14.4 3 info using node@v10.19.0 4 verbose run-script [ 'predev', 'dev', 'postdev' ] 5 info lifecycle personalwebsite@0.0.0~predev: personalwebsite@0.0.0 6 info lifecycle personalwebsite@0.0.0~dev: personalwebsite@0.0.0 7 verbose lifecycle personalwebsite@0.0.0~dev: unsafe-perm in lifecycle true 8 verbose lifecycle personalwebsite@

Cites GLARKI · 2022-11 · Stack Overflow · on “Error received when initializing a ViteJS app”

Worked for me. I follow a website tutorial online ( [this video] ). I got stuck at step 1. vscode/app> npm init @vitejs/app I used vscode/app>npm create vite@latest Now I can continue, don't know if I will be able to complete the entire tutorial, but for now, it fixes the problem. If you recommend another way to make an website with 3D content, let me know.