Tag: threejs

Export and Load 3D Character Animations on Three.js from Blender

Creating 3D character animations in Blender and bringing them to life on the web using Three.js is an exciting process. This article will guide you through exporting 3D character animations from Blender and loading them into a Three.js project. Create and Animate Your Character in Blender 1. **Model Your Character**:   – Use Blender to create… Continue reading Export and Load 3D Character Animations on Three.js from Blender

TextureLoader in ThreeJs

Class for loading a texture. This uses the ImageLoader internally for loading files. Code Example const texture = new THREE.TextureLoader().load(‘textures/land_ocean_ice_cloud_2048.jpg’ ); // immediately use the texture for material creation const material = new THREE.MeshBasicMaterial( { map:texture } ); Code Example with Callbacks // instantiate a loader const loader = new THREE.TextureLoader(); // load a resource loader.load( // resource… Continue reading TextureLoader in ThreeJs

CameraHelper in ThreeJs

This helps with visualizing what a camera contains in its frustum. It visualizes the frustum of a camera using a LineSegments. CameraHelper must be a child of the scene. Code Example const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const helper = new THREE.CameraHelper( camera ); scene.add( helper ); Constructor CameraHelper( camera… Continue reading CameraHelper in ThreeJs

Raycaster in ThreeJs

This class is designed to assist with raycasting. Raycasting is used for mouse picking (working out what objects in the 3d space the mouse is over) amongst other things. Code Example const raycaster = new THREE.Raycaster(); const pointer = new THREE.Vector2(); function onPointerMove( event ) { // calculate pointer position in normalized device coordinates // (-1… Continue reading Raycaster in ThreeJs

PerspectiveCamera in Three.js

Camera that uses perspective projection. This projection mode is designed to mimic the way the human eye sees. It is the most common projection mode used for rendering a 3D scene. Code Example const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 ); scene.add( camera ); Constructor PerspectiveCamera( fov : Number, aspect : Number, near : Number,… Continue reading PerspectiveCamera in Three.js