Skip to content
pbthang

Floating 3D Objects

Create floating 3D objects using HTML, TailwindCSS and Three.js.

Demo

Lorem Ipsum Dolor

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Code

index.html
1
<div class="h-96 relative rounded">
2
  <!-- Floating 3D Object -->
3
  <canvas id="hero-bg" class="!w-full !h-full rounded absolute top-0 left-0 z-0"></canvas>
4


5
  <!-- Content -->
6
  <div class="w-full h-full relative top-0 right-0 text-right flex flex-col items-end justify-center px-8 py-10 font-mono text-white">
10 collapsed lines
7
    <h1 class="!text-white">Lorem Ipsum Dolor</h1>
8
    <p class="max-w-96">
9
      Sed do eiusmod
10
      tempor incididunt ut labore et dolore magna aliqua.
11
    </p>
12
    <button
13
      class="bg-transparent border border-white text-white px-4 py-2 mt-4 rounded flex items-center gap-2 hover:bg-white hover:text-gray-900 cursor-pointer"
14
    >
15
      Learn More →
16
    </button>
17
  </div>
18
</div>
19


20
<script>
21
  import * as THREE from 'three';
22
  import { RoomEnvironment } from 'three/examples/jsm/Addons.js';
23


24
  const canvas = document.querySelector('#hero-bg') as HTMLCanvasElement;
25
  const scene = new THREE.Scene();
26
  scene.background = new THREE.Color(0x1f2937);
27


28
  const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
29
  camera.position.z = 6;
30


31
  const renderer = new THREE.WebGLRenderer({
32
    canvas,
33
    antialias: true,
34
  });
35


36
  const pmremGenerator = new THREE.PMREMGenerator(renderer);
37
  scene.environment = pmremGenerator.fromScene(
38
    new RoomEnvironment(),
39
    0.04
40
  ).texture;
41


42
  const torus = new THREE.Mesh(
43
    new THREE.TorusKnotGeometry(2, 0.7, 100, 16),
44
    new THREE.MeshPhysicalMaterial({
45
      color: 0x00b377,
46
      roughness: 0.2,
47
      metalness: 1,
48
      iridescence: 1,
49
      iridescenceIOR: 1.31,
50
    })
51
  );
52
  torus.position.set(-4, 0, 0);
53
  scene.add(torus);
54


55
  renderer.setPixelRatio(window.devicePixelRatio);
56
  renderer.setSize(canvas.clientWidth, canvas.clientHeight);
57


58
  renderer.render(scene, camera);
59


60
  function animate() {
61
    requestAnimationFrame(animate);
62
    torus.rotation.y += 0.004;
63
    torus.rotation.z += 0.004;
64
    renderer.render(scene, camera);
65
  }
66


67
  animate();
68
</script>

Prerequisites

Three.js is required to use the code snippet above.

Steps

  1. Inside the root div, create a canvas element for the 3d objects and a div element for the content:

    <div class="h-96 relative rounded">
      <!-- Floating 3D Object -->
      <canvas
        id="hero-bg"
        class="!w-full !h-full rounded absolute top-0 left-0 z-0"
      ></canvas>
    

      <!-- Content -->
      <div
        class="w-full h-full relative top-0 right-0 text-right flex flex-col items-end justify-center px-8 py-10 font-mono text-white"
      >
    9 collapsed lines
        <h1 class="!text-white">Lorem Ipsum Dolor</h1>
        <p class="max-w-96">
          Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <button
          class="bg-transparent border border-white text-white px-4 py-2 mt-4 rounded flex items-center gap-2 hover:bg-white hover:text-gray-900 cursor-pointer"
        >
          Learn More →
        </button>
      </div>
    </div>

  2. Create a script for the HTML and set up the scene, camera, renderer, and environment using three.js:

    main.ts
    import * as THREE from "three";
    import { RoomEnvironment } from "three/examples/jsm/Addons.js";
    

    const canvas = document.querySelector("#hero-bg") as HTMLCanvasElement;
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x1f2937);
    

    const camera = new THREE.PerspectiveCamera(
      75, // field of view
      canvas.clientWidth / canvas.clientHeight, // aspect ratio
      0.1, // near clipping plane
      1000 // far clipping plane
    );
    camera.position.z = 6;
    

    const renderer = new THREE.WebGLRenderer({
      canvas,
      antialias: true, // to smooth the edges
    });
    

    const pmremGenerator = new THREE.PMREMGenerator(renderer);
    scene.environment = pmremGenerator.fromScene(
      new RoomEnvironment(), // or any other environment
      0.04
    ).texture;

  3. Create a mesh for the 3D object and render it on the scene:

    main.ts
    const torus = new THREE.Mesh(
      new THREE.TorusKnotGeometry(2, 0.7, 100, 16), // or any other geometry
      new THREE.MeshPhysicalMaterial({
        color: 0x00b377,
        roughness: 0.2,
        metalness: 1,
        iridescence: 1,
        iridescenceIOR: 1.31,
      }) // or any other material
    );
    torus.position.set(-4, 0, 0);
    scene.add(torus);
    

    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(canvas.clientWidth, canvas.clientHeight);
    

    renderer.render(scene, camera); // render the scene

  4. Add an animation loop to rotate the 3D object:

    main.ts
    function animate() {
      requestAnimationFrame(animate);
      // Rotate the torus
      torus.rotation.y += 0.004;
      torus.rotation.z += 0.004;
      renderer.render(scene, camera);
    }
    

    animate();

  5. You should now have a beautiful floating 3D object in your hero section. Feel free to customize the Mesh, Material and animation to suit your design.