fireship-io / threejs-scroll-animation-demo

3D Scrolling Portfolio Website with Three.js

Scrollable 3D Animation with Three.js

• Watch the full tutorial on YouTube
• Scrollable Three.js Animation Snippet

Usage

git clone <this-repo>
npm install
npm run dev

threejs-scroll-animation-demo's Issues

Some code suggestions

Hi, I've been making my own version of this, and I found some improvements to your code:

You have:

canvas {
  position: fixed;
  top: 0;
  left: 0;
}

twice in your code

Your blockquote could use some "padding" (although adding padding and margin to the quote and/or paragraph doesn't work as intended, so you can add:

blockquote p {
  background-color: white;
  padding: 2rem;
  line-height: 2;

Before:

After:

Adding a red border yields this:

and adding to the blockquote itself (rather than blockquote p) just adds a line around all parts regardless of text per line of course

You also have some other wacky stuff in your css with random sections indented twice for seemingly no reason.

You also have about twenty random blank lines in a row in your html, and some other oddities like in your JS you have:

moon.position.z = 30;
moon.position.setX(-10);

And you use .position.x, .position.y, .position.z to set the position in all other nine places, but in this one area you set it with setX which I found weird. The z-index is also needlessly set and there are some other pieces of unused code here.

Awesome profile / template / website, just wanted to give my two cents for cleaning up the code base a bit since it's a little messy and seems to be intended as a template repository (unless you actually worked at McDonalds, Burger King, and Taco Bell and want to cite that as work experience on your web dev portfolio 😄).

Changes made in the source code doesn't affect the browser content. Three JS link problem.

My project directory is: /home/pranav/CodeSpace/Web/007

I followed all the instructions make in this video: https://www.youtube.com/watch?v=Q7AOvWpIVHU&t=196s

The only difference is the folder name, which is 007 in my case, and my project in your case.

I think there is a problem importing the three js libraries.
I used this line import * as THREE from 'three'; to import.

And when I ctrl-click on three, it will jump and open a file named index.d.ts with this content:

Is this normal? On the browser side, my page does load, but it's all bank and white with the website header named "Pranav". Any modifications done in main.js are not being loaded. Why?

In index.html file I have use this technique which link the file. <script type="module" src='./main.js'></script>
I wonder what's wrong.

How to make a deploy?

Problem running Vite build following YouTube video, also problem installing as in readme -- Error Node Module esbuild

I'm having a problem initializing Vite build with npm in VSCode...

When I try to install:

    npm init @vitejs/app
    Select a framework: vanilla
    Select a variant:

the options aren't (like I see in the YouTube tutorial)

    >JavaScript
    >TypesScript

they are

     >vanilla
     >vanilla-ts

If I go ahead with the 'vanilla' option (as there is no 'JavaScript' option for some reason??), am receiving error on npm install.

The problem seems to be with the esbuild?

npm ERR! path /../prjct-vite/node_modules/esbuild
npm ERR! command failed
npm ERR! command sh -c node install.js

Does anyone else have any experince with this?

I'm stuck and don't know where to go to find answers...

npm -v7.19.1
node -v14.17.3

form the debug log:

133 error code 1
134 error path /../prjct-vite/node_modules/esbuild
135 error command failed
136 error command sh -c node install.js
137 error dyld: Symbol not found: _clock_gettime
137 error   Referenced from: /../prjct-vite/node_modules/esbuild/bin/esbuild__
137 error   Expected in: flat namespace
137 error
137 error The version of the downloaded binary is incorrect: Command failed: /../prjct-vite/node_modules/esbuild/bin/esbuild__ --version
137 error dyld: Symbol not found: _clock_gettime
137 error   Referenced from: /../prjct-vitenode_modules/esbuild/bin/esbuild__
137 error   Expected in: flat namespace
137 error
137 error
137 error Install unsuccessful
138 verbose exit 1

If follow readme only:

If I try to run:

git clone 
npm install
npm run dev

also geting errors on npm install:

npm WARN old lockfile 
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile 
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile 
npm ERR! code 1
npm ERR! path /../prjct-vite/node_modules/esbuild
npm ERR! command failed
npm ERR! command sh -c node install.js
npm ERR! dyld: Symbol not found: _clock_gettime
npm ERR!   Referenced from: /../prjct-vite/node_modules/esbuild/bin/esbuild__
npm ERR!   Expected in: flat namespace
npm ERR! 
npm ERR! The version of the downloaded binary is incorrect: Command failed: /../prjct-vite/node_modules/esbuild/bin/esbuild__ --version
npm ERR! dyld: Symbol not found: _clock_gettime
npm ERR!   Referenced from: /../prjct-vite/node_modules/esbuild/bin/esbuild__
npm ERR!   Expected in: flat namespace
npm ERR! 
npm ERR! 
npm ERR! Install unsuccessful

Thanks in advace!

blank Avatar | blank Moon

npm run dev works alright
npm run build works alright
npm run serve serves alright, but the Avatar and Moon is blank

Stars arent glowing but are grey

Stars arent glowing but are grey.

Website looks good on laptop but ugly on android device

I have deployed the project using React github pages but it looks ugly when viewed on a phone
The HTML code for this is usually :
<meta name="viewport" content="width=device-width, initial-scale=1" />
but still it does not look good on phone and all heights and widths are messed up

Can not load files like gltf png

I'm using webpack as a bundler and I can load 3d objects from three's own basic shapes and change color and everything but whenever I have to load files from an external source like gltf, png files from the project's own folder It doesn't show. I'm running it on dev server btw. I'm quite new to overall web design so I don't know what more info I should give right now.
edit: I managed to get it working with npm webpack --watch and live server. Its something to do with dev server. Although I can use it with live server (extension) anyway I would be glad to use it with dev server as well

Use "Yarn"

I was trying to make this one work and was getting a lot of errors.
But after gaining a little bit of understanding, I tested with Yarn instead followed by npm run dev After that, the site was running without any problems.
I actually downloaded the files for two months ago. I noticed that you made some updates two weeks ago.

how to deploy this project ?

I am not able to deploy this project using GitHub pages as when I deploy it then it only shows the HTML content of the project. Can someone help me with this I am a newbie in deployment. If you could provide a video tutorial of similar kind of deployment that would be great

deploying the project

I am trying to deploy the same structure of the project on github, but I am not able to do so. In most cases, it's only showing the HTML file of the project. How can you deploy the same project on GitHub or any other servers?