- Watch the full tutorial on YouTube
- Scrollable Three.js Animation Snippet
git clone <this-repo>
npm install
npm run dev
3D Scrolling Portfolio Website with Three.js
git clone <this-repo>
npm install
npm run dev
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?
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
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
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;
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 ๐).
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!
Stars arent glowing but are grey.
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.
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.