Luna  Mosciski

Luna Mosciski

1603688820

#kinetictypography with ThreeJS

Hallo Leute! Today we will do some interesting stuff with ThreeJS and typography — we will make Kinetic Typography.

There are plenty of cool shots over the internet tagged as #kinetictypography. Here are some of them ↘

Image for post

Image for post

Image for post

Image for post

Image for post

Image for post

To be more specific and make this article shorter we will use only one method — **a text texture on a mesh. **A simple, but wide in its functionality method.

Also, before we start I recommend this article. It’s about the same topic but with a different approach ↘

Kinetic Typography with Three.js | Codrops

Kinetic Typography may sound complicated but it’s just the elegant way to say “moving text” and, more specifically, to…

tympanus.net

Set up Environment

React

We will use ThreeJS + React. So, first, create your app using create-react-app. Open a folder where you want to have your new project, then ↘

npx create-react-app my-app

Then drop the project folder into your IDE app. I’m using VS Code.

facebook/create-react-app

Create React apps with no build configuration. Create React App works on macOS, Windows, and Linux. If something…

github.com

Three JS

Then install Three JS ↘

npm i three

Now we are ready to go.

#typography #3d #react #threejs #kinetic

What is GEEK

Buddha Community

#kinetictypography with ThreeJS
Luna  Mosciski

Luna Mosciski

1603688820

#kinetictypography with ThreeJS

Hallo Leute! Today we will do some interesting stuff with ThreeJS and typography — we will make Kinetic Typography.

There are plenty of cool shots over the internet tagged as #kinetictypography. Here are some of them ↘

Image for post

Image for post

Image for post

Image for post

Image for post

Image for post

To be more specific and make this article shorter we will use only one method — **a text texture on a mesh. **A simple, but wide in its functionality method.

Also, before we start I recommend this article. It’s about the same topic but with a different approach ↘

Kinetic Typography with Three.js | Codrops

Kinetic Typography may sound complicated but it’s just the elegant way to say “moving text” and, more specifically, to…

tympanus.net

Set up Environment

React

We will use ThreeJS + React. So, first, create your app using create-react-app. Open a folder where you want to have your new project, then ↘

npx create-react-app my-app

Then drop the project folder into your IDE app. I’m using VS Code.

facebook/create-react-app

Create React apps with no build configuration. Create React App works on macOS, Windows, and Linux. If something…

github.com

Three JS

Then install Three JS ↘

npm i three

Now we are ready to go.

#typography #3d #react #threejs #kinetic

Learning Three.js: #1 How to Create a Bouncing Ball

This is the first tutorial of the “Learning Three.js” series! This series is about learning Three.js, together with you. Although Three.js has been around for some time now, I’m an absolute beginner in this field. The reason why I wanted to learn this is because I really want to make cool 3D animations for my websites, just like those cool websites on  awwwards.com.

As always, the full code for this demonstration will be on Github at  this link.

Setting up Webpack

The most important package we’ll need is of course the Three.js package. Install it from npm:

npm install --save three

Take a look at my package.json file to see what development dependencies we’ll also need for building this project.

  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "autoprefixer": "^10.2.6",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "html-webpack-plugin": "^5.3.1",
    "postcss": "^8.3.0",
    "postcss-loader": "^5.3.0",
    "postcss-preset-env": "^6.7.0",
    "sass": "^1.34.0",
    "sass-loader": "^11.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }

Although we will not have much SCSS to define for this simple example, but it’s just a boilerplate setup that I use for websites. The HtmlWebpackPlugin will help us take in a html template and insert our main script into it. With the webpack-dev-server, we can let Webpack re-bundle the project every time we add changes and save the files.

#threejs-tutorial #threejs #javascript

Basil  Rasool

Basil Rasool

1617164100

Creating Smooth Scroll & Raytracing with ThreeJS

Today, we’re stepping right back into Three.js to learn some new techniques that are quite popular. These techniques are learning how to create a smooth scroll within Three.js, along with being able to interact with objects, such as hovers/clicks, etc… with the Three.js raytracer.

Threejs starter:

https://github.com/designcourse/three…

Subscribe: https://www.youtube.com/channel/UCVyRiMvfUNMA1UPlDPzG5Ow

#threejs #javascript

Basil  Rasool

Basil Rasool

1616560637

ThreeJS Displacement & AlphaMaps - Create a 3D Terrain!

Today, we’re stepping back into the world of Three.js basics to create a very cool, interactive 3D terrain. This is achieved by using displacement maps and alpha maps.

0:00​ - Introduction
0:56​ - An Awesome Offer
01:26​ - Installing ThreeJS Starter
03:18​ - Adding the Plane Geometry
08:57​ - Plane Material
26:58​ - Mouse Interactivity
30:12​ - User Interface HTML/CSS
33:46​ - Closing

Threejs starter:

https://github.com/designcourse/three…

Mountain texture used:

https://unsplash.com/photos/TfBJbT9MrFc

Subscribe: https://www.youtube.com/channel/UCVyRiMvfUNMA1UPlDPzG5Ow

#threejs #javascript

How to Develop a Web AR Facefilter with React & ThreeJS in 2021

Mobile web browsing is advancing fast. We are able to get data from the NFC reader, Storage and also camera. Luckily, lots of smart people build neural networks that can recognize faces from 2D screens.
WebAR allows you to utilize computer or data visualization without the need of downloading an app, besides your default web browser. This opens up loads of opportunities on the web.
Augmented reality will be a valuable addition to a lot of existing web pages.

#react #react-native #threejs