Suzanne Blocks
This is an example of embedding a 3D scene in a webpage using the Three.js JavaScript library. In the window below, you should be able to rotate, translate, and scale using your mouse buttons and wheel. Touch input should also work using one finger to rotate and the standard 2-finger pinch and scroll gestures for scaling and translation.
You are moving the camera rather than the model. That’s why part of the model appears dark. The light, which shines from the upper right, and model aren’t moving relative to each other.
The blockified model is Suzanne, the mascot of Blender, an amazing open-source content creation suite that I use frequently. The scene contains one sun lamp, and Suzanne is sporting an ambient occlusion map to give her depth that would be lacking in otherwise flat lighting.
To interact with Suzanne using your entire browser window, click here.
Got 3D?
3D content continues to gain prominence in our daily lives. The metaverse is becoming a reality, and most people are familiar with virtual and augmented reality (VR/AR). This post demonstrates a simple model, but I have the skills to make something complex and interactive that runs in a web browser or as a standalone application. If you’re in the market for these skills, please contact me.
