Tag: javascript

Sky Sky creates a ready to go sky environment for your scenes. Import Sky is an add-on, and therefore must be imported explicitly. See Installation / Addons. import { Sky } from ‘three/addons/objects/Sky.js’; Code Example const sky = new Sky(); sky.scale.setScalar( 450000 ); const phi = MathUtils.degToRad( 90 ); const theta = MathUtils.degToRad( 180 ); const… Continue reading ThreeJs SKY

Timer This class is an alternative to Clock with a different API design and behavior. The goal is to avoid the conceptual flaws that became apparent in Clock over time. Timer has an .update() method that updates its internal state. That makes it possible to call .getDelta() and .getElapsed() multiple times per simulation step without getting different values. The class uses the… Continue reading MISC Timer

In Three.js, audio functionality allows you to integrate sound effects and music into your 3D scenes. This can enhance the immersive experience of your application or game. The Three.js library provides several classes to handle different aspects of audio, including loading audio files, creating audio sources, and controlling audio playback. Code Example // create an… Continue reading Audio

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

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

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

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