I tried displaying the logo data converted into 3D by Three.js on the WEB

2023.12.01

たかはし

used the 3D library "Three.js" that can easily handle WebGL to display the 3D logo data on the web. We have summarized the steps.

With Three.js, you can create full-fledged 3D representations using GPUs without plug-ins. You can easily create 3D content with just JavaScript knowledge, making it easy to handle. What a wonderful time!

Contents

1 Create 3D data

2 Load Three.js3

Done!

4 Conclusion

Contents

1 Create 3D data
2 Load Three.js
3 done!
4 summary

Create 3D data

This time, we will use the SVG logo data from PIPELINE to create 3D data.
It seems that you can write JavaScript to express it in Three.js, but this time we will prepare 3D data and display it in Three.js.

First, use Blender to create 3D data with thickness over 2D SVG data.
(I found out later, but I was able to make it thicker with Three.js JavaScript code, so I didn't have to do it this time.) ）

glTF binary (.glb) format. It seems to be displayed in FBX format, but this time I made it a glb file.

Load Three.js

To use Three.js, you just write a description that reads the Three.js JS library and writes the JavaScript that controls it.

Loading Three.js

I will load the

JSM code to load the three.module.js and GLB files.

<script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.152.2/build/three.module.js",
          "three/addons/": "https://unpkg.com/three@0.152.2/examples/jsm/"
        }
      }
    </script>
<script type="module">
      import * as THREE from "three";
</script>

View in Canvas

This

is because the 3D data is displayed with a canvas tag.

const renderer = new THREE. WebGLRenderer({
  canvas: document.querySelector('#myCanvas')
});

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

Other necessary three.js descriptions

To view what you created in three.js, you can:

Renderer: A description for rendering WebGL.
Scene: A description for displaying objects in 3D.
Camera: A camera perspective that looks at a 3D space.
Mesh: A description for creating spheres and cuboids.
Light: A description of a light that illuminates a scene.

done!

After that, it was

completed somehow! !

If you

touch it with a mouse, wheel, or a tap on your smartphone, the PIPELINE logo of Grigri 3D Data will move.

Sources

Here is the source I wrote this time.

summary

In this article, we have summarized how to display 3D data created with Blender on the web.

If you use this, you can operate three-dimensional products with depth that cannot be conveyed by image data alone and view them on the web, such as the back side, which greatly expands the possibilities. It seems to be common in the future.

As a point of coding, it does not work with local data, so please create it while checking the operation with a plug-in such as "Live Server" in VS Code.

hashimoto