A KeyframeTrack is a timed sequence of keyframes, which are composed of lists of times and related values, and which are used to animate a specific property of an object. For an overview of the different elements of the three.js animation system see the “Animation System” article in the “Next Steps” section of the manual. In… Continue reading KeyframeTrack
Tag: threejs
Color management
What is a color space? Every color space is a collection of several design decisions, chosen together to support a large range of colors while satisfying technical constraints related to precision and display technologies. When creating a 3D asset, or assembling 3D assets together into a scene, it is important to know what these properties… Continue reading Color management
Drawing lines Three js
Let’s say you want to draw a line or a circle, not a wireframe Mesh. First we need to set up the renderer, scene and camera (see the Creating a scene page). Here is the code that we will use: const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); const camera = new THREE.PerspectiveCamera( 45, window.innerWidth… Continue reading Drawing lines Three js
Creating text THREEJS
There are often times when you might need to use text in your three.js application – here are a couple of ways that you can do so. 1. DOM + CSS Using HTML is generally the easiest and fastest manner to add text. This is the method used for descriptive overlays in most three.js examples.… Continue reading Creating text THREEJS
Implementing Physics with Cannon.js in Three.js
Overview Cannon.js is a lightweight, easy-to-use physics engine that integrates seamlessly with Three.js. It allows developers to add realistic physics behaviors, such as collisions, gravity, and rigid body dynamics, to 3D scenes, enhancing the interactivity and realism of applications. Key Features: Realistic Physics Simulation: Simulate gravity, collisions, and rigid body dynamics in real-time. Seamless Integration:… Continue reading Implementing Physics with Cannon.js in Three.js
Building Realistic Terrain with Height Maps in Three.js
Overview Height maps in Three.js are grayscale images that define the elevation of terrain in a scene. By applying a height map to a plane geometry, you can generate realistic landscapes, including mountains, valleys, and other geographical features. Key Features: Realistic Terrain Generation: Use height maps to create detailed, natural-looking environments. Ease of Use: Height… Continue reading Building Realistic Terrain with Height Maps in Three.js
Introduction to Shader Materials: Customizing Visual Effects in Three.js
Overview Shader materials in Three.js allow developers to create custom visual effects by writing GLSL (OpenGL Shading Language) shaders. These shaders provide fine-grained control over how objects are rendered, enabling effects like water reflections, custom lighting, and non-photorealistic rendering. Key Features: Custom Visual Effects: Shaders enable unique visual styles and effects that are difficult to… Continue reading Introduction to Shader Materials: Customizing Visual Effects in Three.js
Positional Audio in ThreeJS
Positional audio is an essential component of immersive 3D experiences, whether in games, virtual reality, or simulations. By attaching audio sources to 3D objects, the sound can be spatially located, meaning that as a user navigates the environment, the sound changes dynamically based on their position and orientation. Three.js simplifies the integration of positional audio… Continue reading Positional Audio in ThreeJS
GSAP in ThreeJS
GreenSock Animation Platform (GSAP) is a powerful JavaScript library used for creating high-performance animations. When combined with Three.js, GSAP offers a simple and effective way to animate 3D objects, adding dynamic interactions and visual effects to your 3D scenes. Why Use GSAP with Three.js? GSAP excels at tweening, which involves smoothly transitioning object properties over… Continue reading GSAP in ThreeJS
Water in ThreeJS
The Three.js Water addon is a specialized shader that simulates the appearance and behavior of water. It is based on the ShaderMaterial and Reflector classes in Three.js, offering a high degree of realism by combining multiple visual effects: Reflection: The water surface reflects the surrounding environment, creating a mirror-like effect. Refraction: Light passing through the… Continue reading Water in ThreeJS