3d Website with Three.js + CDN example

3d website with Three.js CDN

Hey Coders!

This tutorial will level up your development skill by teaching you How to build a 3d Website with Three.js. This tutorial will also cover How you could add Three.js CDN to your HTML project. By learning 3d objects, you are ready to add these objects to your future projects. You can create stunning projects like portfolios with its help of it. It is beginner friendly article as it teaches you from scratch.

Let's see what we covered in the tutorial.

Let's get started.

Technology used

Let's take a look at the technologies used in this web application. This application uses basic HTML, CSS, and javascript. Apart from these, we will use the following technologies:-

Three.js
GSAP

It is time to understand the technologies used in this project.

About Three.js?

Three.js is a cross-browser open-source JavaScript library used to render used to display 3d and 2d objects and graphics in the web browser with the help of WebGL. It uses your GPU (Graphical User Interface) to render 3d objects, graphics, and animation. Most of the games use three.js to create their 3d and 2d models. It is also a famous library to create 3d websites. Some popular websites like Roblox, prime video, etc.

What is GSAP?

GSAP means GreenSock Animation Platform. It is a JavaScript library that enables developers and designers to build high-performance animation. It is supported on almost every browser. Developers can create robust timeline-based animations that make developers designer heroes. Using GSAP, you can control frames to make smooth animations. Some of the most popular websites like HubSpot, Wix, code sandbox, etc.

We understood these technologies. Now, it's time to create the project.

Creating a Three.js project with NPM

First, we will create our app and then install three.js with the help of npm. Follow the step to create a basic HTML, CSS, and JavaScript app. We use vite to construct our app because it is easy to set up.

Creating HTML, CSS, and JavaScript apps using Vite js

Open your cmd and run the following commands to make the Vite app with vanilla JavaScript.

Create Vite App

Create the vite app by running the given command in your cmd.
```
npm create vite@latest
```
Enter Project Name

It asks for your project name by showing ? Project name: it in your terminal. You need to enter your project name.
Select Vanilla

Now, It asks You to select a framework by showing ? Select a framework: it in your terminal. Select Vanilla from the framework works.
Select JavaScript

It asks you to select a variant by showing ? Select a variant: it in your terminal. You can choose between JavaScript and TypeScript. You have to select JavaScript.

Your project Scaffolding is ready. Go to your project and install the node modules.

Go to project

Go to your project by running this command in your terminal. Here instead of project-name write your project created recently.
```
cd project-name
```
Install app

Install node_modules and other dependencies by running the given command.
```
npm install
```
Run app

Your app is created. Try to run your app.
```
npm run dev
```

We assembled our app. Let's install Three.js and GSAP.

Installing Three.js to our app with NPM

Run the given command in the cmd to install Three.js in our project.

npm install three

Installing GSAP with the help of NPM

npm install gsap

We created ours with NPM. It's time to build a Three.js project with CDN.

Building project with Three.js CDN

It is effortless to set up with CDN. First, create three files like index.html, style.css, index.js . Also, connect these files. Now, follow the given steps frequently.

Make HTML Boilerplate

Go to your index.html file and make an HTML Boilerplate. You can also paste the given boilerplate code into your HTML file.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3d website</title>
</head>
<body>
  
</body>
</html>

Connect CSS and JavaScript Files

Connect both JavaScript and CSS Files with HTML files. Connect as shown in highlighted part. Or you can replace the previous HTML Boilerplate with the given code.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> 
  <title>3d website</title>
</head>
<body>
  
  
  <script type="module" src="./index.js"></script>
</body>
</html>

Add Three js CDN link.

Now, add the Three js CDN links before the main JavaScript file.

Three.js CDN Example

<script type="importmap">
                {
                  "imports": {
                    "three": "https://unpkg.com/three@0.139.2/build/three.module.js",
                    "OrbitControls": "https://unpkg.com/three@0.139.2/examples/jsm/controls/OrbitControls.js"
                  }
                }
              </script>

GSAP CDN Example

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

Now, you are ready to go.

How to import Three.js and Orbit control from the given CDN Example

With CDN like you can also import Three.js and OrbitControl. Here is the code to import them.

import * as THREE from "three"

// Work with the given CDN only!!!

import { OrbitControls } from "OrbitControls"

// No need to import Scene. If you are4 work with cdn

Building a 3d website with Three.js

We build this website with both methods, NPM and CDN. First, we make this website by using a CDN link. Then we will use NPM.

Building a 3d website with Three.js CDN example

Create an HTML, CSS, and JavaScript file. You can see the detailed steps above. Now, copy the given code and paste it into your HTML file.

HTML structure (For CDN only)

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>3D website with three js</title>
</head>
<body>
  <header class="navbar itemPosition container">
    <div class="logo">Globe</div>
    <div class="menu">
      <a href="#" class="menuBtn">Home</a>
      <a href="#" class="menuBtn">About</a>
      <a href="#" class="menuBtn">Contact</a>
    </div>
  </header>
  <section class="heroSection container">
    <div>
      <span class="smallText">Revolutionize <div class="bottomLine"></div></span>
      <p class="paragraph">Welcome to AI-powered <br /> solutions, your one-stop shop for all things artificial
        intelligence.
        We're dedicated to bringing
        you the latest and greatest in AI technology, from machine learning algorithms to natural language processing.
      </p>
    </div>
  
    <h1 class="heading">Give it a spin!</h1>
  </section>
  
  <canvas id="canvas"></canvas>
  
  <script type="importmap">
                {
                  "imports": {
                    "three": "https://unpkg.com/three@0.139.2/build/three.module.js",
                    "OrbitControls": "https://unpkg.com/three@0.139.2/examples/jsm/controls/OrbitControls.js"
                  }
                }
              </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
  <script type="module" src="./index.js"></script>
</body>
</html>

This HTML file contains a Navbar, Hero section, Canvas, and CDN links.

The Navbar section has a logo and a menu. A website incomplete without a navbar. So, it is essential to add it. The hero section has a Heading. And a paragraph text that tells about the website.

Canvas is used to show 3d objects on the website. All the work of creating this 3d object is done in Javascript.

Let's all style properties to the website.

CSS Styles (For both CDN and NPM)

/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Orbitron:wght@500;600;700;800;900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* font-family: 'Open Sans', sans-serif; */
  /* font-family: 'Orbitron', sans-serif; */
}

:root {
  --primaryTextColor: #DACEF4;
  --secondaryTextColor: #f56b4c;

}

body,
html {
  overflow: hidden;
}

body {
  font-family: 'Cutive Mono', monospace;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
  background: #000;
  user-select: none;
}

/* Universal classes starts */
.container {
  width: 100%;
}

.itemPosition {
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
}

/* Universal classes ends */

/* Header starts*/


#canvas {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1;

}

.navbar {
  font-family: 'Orbitron', sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
}

.logo {
  font-weight: 700;
  color: var(--secondaryTextColor);
}

.menu {
  text-decoration: none;

}

.menuBtn {
  text-decoration: none;
  color: var(--primaryTextColor);
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

.menuBtn:hover {
  color: var(--secondaryTextColor);
}

/* Header ends*/

/* Website Body section starts */
.heroSection {
  z-index: 2;
  position: absolute;
  bottom: 1rem;
  color: var(--primaryTextColor);
  margin-top: 5rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column-reverse;
  opacity: 1;
}



.smallText {
  font-family: 'Orbitron', sans-serif;
  color: var(--secondaryTextColor);
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem;
}

.bottomLine {
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  width: 5rem;
  height: 1px;
  border-radius: 1rem;
  background: var(--secondaryTextColor);

}

.paragraph {
  width: 15rem;

  line-height: 1.2rem;
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
}

.heading {
  font-family: 'Orbitron', sans-serif;
  color: var(--secondaryTextColor);
  font-size: 2rem;
  width: 15.3rem;
}

/* Website Body section ends */


/* Making it responsive */


@media (min-width: 640px) {
  .container {
    max-width: 640px;

  }

  .navbar {
    padding: 0.5rem 0rem;
  }

  .heroSection {
    flex-direction: row;
  }

  .paragraph {
    line-height: 1.5rem;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }


}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

Basic style properties are used in this website. You are the hero of styling websites. That's why I am not telling you about the style properties.

JavaScript Logics (For CDN only)

import * as THREE from "three"

/* If you are using Three.JS cdn, use this line to import orbitalControls*/

import { OrbitControls } from "OrbitControls"



// Scene
const scene = new THREE.Scene();

// Create a sphere

const geometry = new THREE.SphereGeometry(6, 64, 64)
const material = new THREE.MeshStandardMaterial({ color: "#6E49B3" }
)
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// Size
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight
}

// Light
const light = new THREE.PointLight(0xffffff, 1, 100)
light.position.set(0, 9, 10)
light.intensity = 1.25
scene.add(light)

// Camera
const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height, 0.1, 100)
camera.position.z = 20
scene.add(camera)

// Scene Rendering
const canvas = document.getElementById('canvas')
const renderer = new THREE.WebGLRenderer({ canvas })
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(2)
renderer.render(scene, camera)
// renderer.setClearColor(0x0C0526)

// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true
controls.enablePan = false
controls.enableZoom = false
controls.autoRotate = true
controls.autoRotateSpeed = 2

// Resize
window.addEventListener('resize', () => {
  // Update sizes
  sizes.width = window.innerWidth
  sizes.height = window.innerHeight

  // Update camera
  camera.aspect = sizes.width / sizes.height
  camera.updateProjectionMatrix()
  renderer.setSize(sizes.width, sizes.height)

})

const loop = () => {
  controls.update()
  renderer.render(scene, camera)
  window.requestAnimationFrame(loop)
}
loop()

// Creating animation with the help of GSAP. IF it is tough for you, you can skip bottom part.

// Timeline 

const tl = gsap.timeline({ defaults: { duration: 1 } })
tl.fromTo(mesh.scale, { z: 0, x: 0, y: 0 }, { z: 1, x: 1, y: 1 })

// Animating texts

gsap.from(".heroSection", { bottom: -500, opacity: 0, duration: 1.5 })

In JavaScript, code is written in a readable form. You can understand code by reading it. But I am explaining the steps:-

Importing Three js and Orbit controls. Orbit controls are used to add movement to the 3d object.
Creating scenes to display 3d objects with the help of canvas.
Creating a sphere for our website.
Adding sizes of the sphere in an object.
Adding light to show the sphere.
Creating a camera to view the 3d sphere.
Rendering sphere in the canvas element.
Adding controls to change the movement of the sphere.
Creating a function to update the size and camera of the sphere.
Creating a loop to update controls.
Finally, adding extra animation and timelines using GSAP.

You did it!

Building a 3d website with Three.js NPM

We change HTML and JavaScript code to make this 3d website with Three.js NPM. Our CSS code is the same for CDN and NPM. You can copy the CSS code from above. But for you, I add the CSS code again.

HTML structure (For NPM only)

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>3d website with three js</title>
  </head>

  <body>
    <header class="navbar itemPosition container">
      <div class="logo">Globe</div>
      <div class="menu">
        <a href="#" class="menuBtn">Home</a>
        <a href="#" class="menuBtn">About</a>
        <a href="#" class="menuBtn">Contact</a>
      </div>
    </header>
    <section class="heroSection container">
      <div>
        <span class="smallText">Revolutionize <div class="bottomLine"></div></span>
        <p class="paragraph">Welcome to AI-powered <br /> solutions, your one-stop shop for all things artificial
          intelligence.
          We're dedicated to bringing
          you the latest and greatest in AI technology, from machine learning algorithms to natural language processing.
        </p>
      </div>

      <h1 class="heading">Give it a spin!</h1>
    </section>

    <canvas id="canvas"></canvas>
    

    <script type="module" src="/main.js"></script>
  </body>

</html>

CSS Styles (Same for CDN and NPM)

/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Orbitron:wght@500;600;700;800;900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* font-family: 'Open Sans', sans-serif; */
  /* font-family: 'Orbitron', sans-serif; */
}

:root {
  --primaryTextColor: #DACEF4;
  --secondaryTextColor: #f56b4c;

}

body,
html {
  overflow: hidden;
}

body {
  font-family: 'Cutive Mono', monospace;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
  background: #000;
  user-select: none;
}

/* Universal classes starts */
.container {
  width: 100%;
}

.itemPosition {
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
}

/* Universal classes ends */

/* Header starts*/


#canvas {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1;

}

.navbar {
  font-family: 'Orbitron', sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
}

.logo {
  font-weight: 700;
  color: var(--secondaryTextColor);
}

.menu {
  text-decoration: none;

}

.menuBtn {
  text-decoration: none;
  color: var(--primaryTextColor);
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

.menuBtn:hover {
  color: var(--secondaryTextColor);
}

/* Header ends*/

/* Website Body section starts */
.heroSection {
  z-index: 2;
  position: absolute;
  bottom: 1rem;
  color: var(--primaryTextColor);
  margin-top: 5rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column-reverse;
  opacity: 1;
}



.smallText {
  font-family: 'Orbitron', sans-serif;
  color: var(--secondaryTextColor);
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem;
}

.bottomLine {
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  width: 5rem;
  height: 1px;
  border-radius: 1rem;
  background: var(--secondaryTextColor);

}

.paragraph {
  width: 15rem;

  line-height: 1.2rem;
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
}

.heading {
  font-family: 'Orbitron', sans-serif;
  color: var(--secondaryTextColor);
  font-size: 2rem;
  width: 15.3rem;
}

/* Website Body section ends */


/* Making it responsive */


@media (min-width: 640px) {
  .container {
    max-width: 640px;

  }

  .navbar {
    padding: 0.5rem 0rem;
  }

  .heroSection {
    flex-direction: row;
  }

  .paragraph {
    line-height: 1.5rem;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }


}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

JavaScript Logic (For NPM only)

import * as THREE from "three"
import './style.css'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import gsap from "gsap";
import { Scene } from "three";

// Scene
const scene = new THREE.Scene();

// Create a sphere

const geometry = new THREE.SphereGeometry(6, 64, 64)
const material = new THREE.MeshStandardMaterial({ color: "#6E49B3" }
)
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// Size
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight
}

// Light
const light = new THREE.PointLight(0xffffff, 1, 100)
light.position.set(0, 9, 10)
light.intensity = 1.25
scene.add(light)

// Camera
const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height, 0.1, 100)
camera.position.z = 20
scene.add(camera)

// Scene Rendering
const canvas = document.getElementById('canvas')
const renderer = new THREE.WebGLRenderer({ canvas })
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(2)
renderer.render(scene, camera)
// renderer.setClearColor(0x0C0526)

// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true
controls.enablePan = false
controls.enableZoom = false
controls.autoRotate = true
controls.autoRotateSpeed = 2

// Resize
window.addEventListener('resize', () => {
  // Update sizes
  sizes.width = window.innerWidth
  sizes.height = window.innerHeight

  // Update camera
  camera.aspect = sizes.width / sizes.height
  camera.updateProjectionMatrix()
  renderer.setSize(sizes.width, sizes.height)

})

const loop = () => {
  controls.update()
  renderer.render(scene, camera)
  window.requestAnimationFrame(loop)
}
loop()

// Timeline

const tl = gsap.timeline({ defaults: { duration: 1 } })
tl.fromTo(mesh.scale, { z: 0, x: 0, y: 0 }, { z: 1, x: 1, y: 1 })

// Animating texts

gsap.from(".heroSection", { bottom: -500, opacity: 0, duration: 1.5 })

Conclusion

Most websites teach about three js npm. But this article covered the Three js CDN example and NPM installation. We explore a lot. Finally, we created this 3d website with three js CDN links. Now, this project is finished. You can learn from this project and make a great project in the future. Use GSAP to make your website more interactive. That's all.

Tell us in the comment section if you gain something from this tutorial. Share this article with your friends. Surprise them with this project.

Happy Coding!!!

Code Armor

3d Website with Three.js + CDN example

Technology used

About Three.js?

What is GSAP?

Creating a Three.js project with NPM

Creating HTML, CSS, and JavaScript apps using Vite js

Create Vite App

Enter Project Name

Select `Vanilla`

Select `JavaScript`

Go to project

Install app

Run app

Installing Three.js to our app with NPM

Installing GSAP with the help of NPM

Building project with Three.js CDN

Make HTML Boilerplate

Connect CSS and JavaScript Files

Add Three js CDN link.

How to import Three.js and Orbit control from the given CDN Example

Building a 3d website with Three.js

Building a 3d website with Three.js CDN example

HTML structure (For CDN only)

CSS Styles (For both CDN and NPM)

JavaScript Logics (For CDN only)

Building a 3d website with Three.js NPM

HTML structure (For NPM only)

CSS Styles (Same for CDN and NPM)

JavaScript Logic (For NPM only)

Conclusion

About the Author

إرسال تعليق

Dynamic React image gallery with tailwind

How to create a react app using Vite js and tailwind CSS

Deploy vite app to GitHub pages for Free

Captcha Generator using HTML, CSS, JavaScript

Code Armor

3d Website with Three.js + CDN example

Technology used

About Three.js?

What is GSAP?

Creating a Three.js project with NPM

Creating HTML, CSS, and JavaScript apps using Vite js

Create Vite App

Enter Project Name

Select Vanilla

Select JavaScript

Go to project

Install app

Run app

Installing Three.js to our app with NPM

Installing GSAP with the help of NPM

Building project with Three.js CDN

Make HTML Boilerplate

Connect CSS and JavaScript Files

Add Three js CDN link.

How to import Three.js and Orbit control from the given CDN Example

Building a 3d website with Three.js

Building a 3d website with Three.js CDN example

HTML structure (For CDN only)

CSS Styles (For both CDN and NPM)

JavaScript Logics (For CDN only)

Building a 3d website with Three.js NPM

HTML structure (For NPM only)

CSS Styles (Same for CDN and NPM)

JavaScript Logic (For NPM only)

Conclusion

About the Author

إرسال تعليق

Select `Vanilla`

Select `JavaScript`