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 […]
Tag: three.js
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 realizes panoramic exhibition hall roaming (actual project)
As we all know, there are many different ways to achieve panorama. Today we mainly introduce the use of three.js to achieve the effect. Three.js is a three-dimensional engine running based on the native WebGL package. Among all WebGL engines, Three.js is the one with the most domestic literature and the most used The most […]
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 […]
Three.js + Tensorflow.js build real-time face point cloud
This article focuses on the steps required to implement a real-time face mesh point cloud using Three.js and Tensorflow.js. It assumes you have previous knowledge of asynchronous javascript and Three.js basics, so the basics won’t be covered. The source code for the project can be found in this Git repository. It will be helpful to […]
Use cesium’s post-processing to achieve a spotLight effect similar to three.js
1. Background When we use cesium to do some lighting effects, such as sweeping effects, we will find that cesium does not have customized lights like three.js or babylon.js. cesium only has direct light, which is sunlight. If we want to implement something like three What to do with the lighting effects of .js? Generally […]
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 […]