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

Construct a Mindblowing 3D Portfolio Web site // Three.js Newbie’s Tutorial

by



Be taught the fundamentals of Three.js – a software for constructing superb 3D graphics with JavaScript. On this tutorial, we create an animated 3D scrolling animation for a portfolio web site https://github.com/fireship-io/threejs-scroll-animation-demo

#3D #webdev #js

🔗 Sources

Three.js Docs https://threejs.org/
WebGL Overview https://youtu.be/f-9LEoYYvE4
Inspiration https://atelier.internet/virtual-economy/
Scrolling Animation with Three.js

📚 Chapters

00:00 Mindblowing 3D Web sites
00:42 What we’re constructing
01:19 What’s Three.js
02:12 Venture Setup
03:35 Scene
03:52 Digital camera
04:28 Renderer
05:07 Geometry
05:28 Materials
06:02 Mesh
06:16 Animation Loop
07:13 Lighting
08:45 Three.js Helpers
09:17 Orbit Controls
09:56 Random Technology
11:05 Scene Background
11:37 Texture Mapping
12:57 Scroll Animation
14:36 CSS Grid

🤓 Set up the quiz app

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/retailer/apps/particulars?id=io.fireship.quizapp

🔥 Watch extra with Fireship PRO

Improve to Fireship PRO at https://fireship.io/professional
Use code lORhwXd2 for 25% off your first cost.

🎨 My Editor Settings

– Atom One Darkish
– vscode-icons
– Fira Code Font

source

31 thoughts on “Construct a Mindblowing 3D Portfolio Web site // Three.js Newbie’s Tutorial”

  6. C:UsersmayorDesktopapps>npm init @vitejs/app

    npx: instaló 7 en 8.259s

    @vitejs/create-app is deprecated, use npm init vite instead

    √ Project name: … myproject

    ? Select a framework: » – Use arrow-keys. Return to submit.

    ? Select a framework: » – Use arrow-keys. Return to submit.

    ? Select a framework: » – Use arrow-keys. Return to submit.

    ? Select a framework: » – Use arrow-keys. Return to submit.

    ? Select a framework: » – Use arrow-keys. Return to submit.

    ? Select a framework: » – Use arrow-keys. Return to submit.

    ? Select a framework: » – Use arrow-keys. Return to submit.

    √ Select a framework: » vanilla

    √ Select a variant: » vanilla

    Scaffolding project in C:UsersmayorDesktopappsmyproject…

    Done. Now run:

    cd myproject

    npm install

    npm run dev

    C:UsersmayorDesktopapps>cd myproject

    C:UsersmayorDesktopappsmyproject>npm install three

    npm notice created a lockfile as package-lock.json. You should commit this file.

    npm WARN myproject@0.0.0 No description

    npm WARN myproject@0.0.0 No repository field.

    npm WARN myproject@0.0.0 No license field.

    + three@0.135.0

    added 1 package from 1 contributor and audited 1 package in 19.447s

    found 0 vulnerabilities

    C:UsersmayorDesktopappsmyproject>npm run dev

    > myproject@0.0.0 dev C:UsersmayorDesktopappsmyproject

    > vite

    "vite" no se reconoce como un comando interno o externo,

    programa o archivo por lotes ejecutable.

    npm ERR! code ELIFECYCLE

    npm ERR! errno 1

    npm ERR! myproject@0.0.0 dev: `vite`

    npm ERR! Exit status 1

    npm ERR!

    npm ERR! Failed at the myproject@0.0.0 dev script.

    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:

    npm ERR! C:UsersmayorAppDataRoamingnpm-cache_logs2021-12-20T13_59_35_273Z-debug.log

    C:UsersmayorDesktopappsmyproject>

    Reply

  9. Absolutely amazing this actually looks like a lot of fun!

    What are some performance issues to watch out for? Might too much rotation or too many objects slow it all down?

    Thank you for the video!

    Reply

  18. Aye, can anyone help me out? my window is stuck as just a white blank page. – code looking like:

    import './style.css';

    import * as THREE from 'three';

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(75, Window.innerWidth/Window.innerHeight, 0.1, 1000);

    const renderer = new THREE.WebGLRenderer({

    });

    renderer.setPixelRatio(Window.devicePixelRatio);

    renderer.setSize(Window.innerWidth, Window.innerHeight);

    camera.position.setZ(30);

    renderer.render(scene, camera);

    const geometry = new THREE.TorusGeometry(10, 3, 16, 100);

    const material = new THREE.MeshBasicMaterial( { color: 0xFF6347, wireframe: true});

    const torus = new THREE.Mesh(geometry, material);

    scene.add(torus)

    function animate() {

    requestAnimationFrame(animate);

    renderer.render(scene, camera);

    }

    animate()

    Reply

  24. FIXES:

    1. Vite fix:
    – go to myproject
    – write in terminal: npm install and then – npm dev run

    2. threejs:
    – Check console in browser for errors

    3. Check if css is correct

    4. check if everything is linked in html

    Reply

  28. Can someone help me please. I stuck when run 'npm run dev' .

    sh: 1: vite: not found

    npm ERR! code ELIFECYCLE

    npm ERR! syscall spawn

    npm ERR! file sh

    npm ERR! errno ENOENT

    npm ERR! websiteaf3d@0.0.0 dev: `vite`

    npm ERR! spawn ENOENT

    npm ERR!

    npm ERR! Failed at the websiteaf3d@0.0.0 dev script.

    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    Reply

Leave a Comment