Animation in Three.js Simple Example

In Three.js, animation refers to creating and controlling the movement and changes of objects in a scene. A model refers to a 3D object loaded through Three.js, which can be a geometry, mesh, or complex model file (such as .obj or .gltf). Animations can exist within the model or be defined separately. Edit keyframes: Keyframe […]

How to convert latitude and longitude coordinates into three-dimensional coordinates in three.js or babylon.js

Requirements There are following requirements. According to the longitude and latitude coordinates returned by the interface, the data must be correctly rendered in the three-dimensional scene in three.js, or the movement trajectory of the object must be drawn based on the longitude and latitude coordinates. Analysis We all know that the rendering of three-dimensional three.js […]

[Case] 3D Earth (vue+three.js)

Need to download plug-in <template> <div class=”demo”> <div id=”container” ref=”content”></div> </div> </template> <script> import * as THREE from ‘three’; // import mapJSON from ‘../map.json’; import {<!– –> OrbitControls } from “three/examples/jsm/controls/OrbitControls”; export default {<!– –> // components :{ CoolEarth}, data() {<!– –> return {<!– –> //Create a scene scene: null, //Create a camera camera: null, […]

Download HDRI textures and use Three.js

One of the most exciting projects is adding HDRI backgrounds in Three js. HDRI images are captured in 360 degrees from scenes such as interiors of rooms or open environments such as gardens, jungles or mountains. You can create any of these images yourself, but that’s not the topic of this tutorial. Instead, we’ll take […]

Blending of Three.js materials

Blending of Three.js materials // blending modes export type Blending = | type of NoBlending | type of NormalBlending | type of AdditiveBlending | type of SubtractiveBlending | typeof MultiplyBlending | typeof CustomBlending; // custom blending destination factors export type BlendingDstFactor = | type of ZeroFactor |typeofOneFactor | typeof SrcColorFactor | typeof OneMinusSrcColorFactor | typeof […]

three.js implements sunshine analysis and simulates changes in the sun’s altitude angle and azimuth angle based on local (dimension and time)

1. Analysis Recently, there was a need to do a solar illumination simulation for a certain building, and the sunlight changes from 8 o’clock to 17 o’clock. To better simulate the changes of the sun throughout the day, we only need to know the solar altitude angle and solar azimuth angle of the current observation […]

Create a cool and realistic earth with Three.js

Next, I will explain it step by step, with online examples on the digital twin platform. Add a sphere first We use SphereGeometry in threejs to create a sphere and attach an earth texture to it. let earthGeo = new THREE.SphereGeometry(10, 64, 64) let earthMat = new THREE.MeshStandardMaterial({<!– –> map: albedoMap, }) this.earth = new […]