Recommendation: Use the NSDT editor to quickly build 3D application scenarios
- Animate three JS models in the browser
- Create 3D animated text
- Create 2D models from 3D images
- Animate 3D models
- Add 3D effects
- Create 3D games and interactive experiences
- Programming 3D Virtual Reality Experiences
- Apply color to 3D geometry
- Control 3D Rendering Performance
- Interact with the 3D environment
- Modify the lighting of the 3D environment
- 7 Bonus Three JS Examples
- Load and animate a 3D mesh
- Load gITF 3D format files
- Interact with colors and materials
- Interact with dynamic materials
- Interactively deform 3D shapes
- Post-processing 3D models and environments
- Overlay YouTube video on a3D object
Animate three JS models in the browser
For those without Three.js coding experience, here is an example of the code needed to render a simple box in a browser window. It's simple and requires you to make three files.
First, create the index.html file in your favorite editor.
<!-- Begin HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Three JS Example</title>
<!-- Remove border -->
<style>
body { margin: 0; }
</style>
<!-- Load three.js -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.147.0/three.min.js">
</script>
</head>
<body>
<!--Your source file -->
<script src="js/animation.js"></script>
</body>
</html>
<!-- End HTML -->
Now create a new JavaScript file:
// Begin script
// Create a scene
const scene = new THREE.Scene();
// Create a camera
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// Create a geometry
const geometry = new THREE.BoxGeometry(1, 2, 3);
// Create a material
const material = new THREE.MeshBasicMaterial({ color: 0xff00ff });
// Create a mesh
const mesh = new THREE.Mesh(geometry, material);
// Add the mesh to the scene
scene.add(mesh);
// Create a renderer
const renderer = new THREE.WebGLRenderer();
// Set the size
renderer.setSize(window.innerWidth, window.innerHeight);
// Append to the DOM
document.body.appendChild(renderer.domElement);
// Position the camera
camera.position.z = 5;
// Animate the scene
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
// End script
Now, open the index.html file in your browser. What you end up with is the animation shown in the image below. Note that you have full control over the size, color, animation, and all other parameters of the box. How all of this works is the stuff of the rest of this article.
Create 3D animated text
three.js examples Here is a way to create an animated logo in Flash without using Flash. This all happens in the browser. Type any text you want on the screen, then use the white buttons to change parameters.
If you want to easily share files, visit Tiiny.host . (See how easy it is to create a useful logo?
Create 2D models from 3D images
three.js examples which demonstrate how to start with a 2D shape and then extrude it to 3D along a path.
Animate 3D models
three.js examples This little robot is animated and you can choose what he does with the black parameter box. Change his expression, stand or sit, whatever.
Add 3D effects
three.js examples Stereo effects go back a long way, all the way to handheld stereo mirrors. Now you can create interactive animated volumes with just a few lines of code.
Create 3D games and interactive experiences
three.js examples don't fail to click on this portrait. You'll see what happens. You can change the visual effect in the parameter box.
Programming 3D Virtual Reality Experiences
three.js examples Haptic is a type of computer feedback that you can feel. The vibrations you feel on your smartphone are tactile.
This haptic effect is available in a virtual reality setting, not on your desktop or phone. I offer this for Web3 lovers. Put on your gear and enjoy.
Apply color to 3D geometry
three.js examples The interactive elements of this example allow you to change the position of shapes and see changing colors depending on perspective.
Control 3D Rendering Performance
three.js examples A thousand monkey heads floating in space. What more can you ask for? Change parameters and monitor system performance. Good for testing your animations.
Interact with the 3D environment
The title is self-explanatory. Visit the sample and click to interact.
Modify the lighting of the 3D environment
The three.js examples change the lighting of a scene or turn off lights. your choice.
7 Bonus Three JS Examples
We've reached the end of the top 10 list, but I can't stop trying the dozens of examples threejs.org/examples provides. On the left side of the screen, you'll see a scrolling list organized by function and category. Here are seven more examples, each with a more technical purpose.
Load and animate a 3D mesh
three.js examples The code for this automation bot demonstrates loading a file into the browser and animating it.
Load gITF 3D format files
three.js examples Again, loading files is an important part of the 3D workflow. This is a testament to the incredible graphical quality of Three JS, based on the quality of the input, of course.
Interact with colors and materials
The three.js examples change the colors joined in this 3D car animation. Dynamic changes like this are great for personalization and other interactive selections.
Interact with dynamic materials
three.js examples Note the high-quality real-time refraction when moving three objects in space.
Interactively deform 3D shapes
The three.js examples start with a simple 3D square (box) and see how you can make it round or twist it into various shapes.
Post-processing 3D models and environments
The three.js examples post-processing is heavily used in video production. Here, you can do it digitally.
Overlay YouTube video on a3D object
The three.js examples overlay four YouTube videos on an eight-sided (inner and outer) empty box. cold. You can control video playback with a single click.
Original Link: 19 Best Three.JS Examples (mvrlink.com)