Tag: three.js

Use three.js integrated into react project to draw a rotating earth

See the effect directly Konnect: For every human Upload react components EarthComponent import { useEffect, useRef } from ‘react’; import * as THREE from ‘three’; import { OrbitControls } from ‘three/addons/controls/OrbitControls.js’; import s from “./index.module.scss” import earth4 from “@/assets/earth/earth4.jpg”; import earthBump from “@/assets/earth/earth_bump.jpg”; import earthSpec from “@/assets/earth/earth_spec.jpg”; import earthCloud from “@/assets/earth/earth_cloud.png”; export default function EarthComponent(props) […]

[Wandering with canvas (14)] How to generate concave relief models in Three.js

【Abstract】 Use three.js to generate concave relief models. Sample code is hosted at: http://www.github.com/dashnowords/blogs Blog Park Address: “Big History Lives in the Big Front End” Original Blog Directory Relief model, simply put, is the effect formed when carving words on a wooden board. If all parts of the words are removed, a concave relief model […]

#three.jsNewbie# Regarding the movement of the model, display the movement trajectory (display the movement path)

#Reference: Three.js Learning Seven – The model moves along the trajectory when playing the model animation_threejs path animation-CSDN blog Three.js displays the motion trajectory of the object_three pathgeometry_Dream Sky Fenwailan’s Blog-CSDN Blog File structure ## index.html template: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title> #Name your html here# </title> <style> body { margin: 0; } […]

3D model explosion decomposition and animation implementation [Three.js]

Have you ever wanted to show off some cool 3D models of engines? Here’s a way to do it, using some very basic math: a simple exploded view For this we’ll be using React-Three-Fiber, but it works with native Three.js (it’s not deeply tied to the r3f ecosystem, it’s just faster for me to iterate […]

Three.js implements the model file loading progress bar and total is 0, lengthComputable is false, and handles the situation

The load method of three.js GLTFLoader, FBXLoader, GLTFLoader, and OBJLoader provides a method function to obtain the current file progress Based on the previous article Three.js loads external glb, fbx, gltf, obj model files, add a new onModelProgress (get the model loading progress bar method) onModelProgress(progressEvent ){<!– –> const {<!– –> loaded ,total ,lengthComputable } […]

Using three.js with cesium

You can learn how to use the two together through the cesium official website article cesium combined with three.js Prepare content in advance node environment (case version 14.17.2) Create vue project Install cesium dependencies (case version 1.73.0) Install three.js dependencies (case version 0.155.0) Functions and implementation methods 1Create tags <div class=”container-integrate” style=””> <!–cesium container–> <div […]

Three.js-draw rectangular shader

Draw nested rectangular boxes in the figure method: vec3 drawRect( vec2st, vec2 center, float width, float height, float thickness, vec3 fillColor, vec3 strokeColor ) {<!– –> vec3 color = vec3(0); float halfWidth = width * .5; float halfHeight = height * .5; float halfTickness = thickness * .5; vec2 bottomLeft = vec2(center.x – halfWidth, center.y […]

ThreeJS – How to improve the rendering effect of three.js

1 Parameter settings of THREE.WebGLRenderer The parameter settings of the THREE.WebGLRenderer object greatly affect the rendering effect. To obtain a better rendering effect, the following parameter settings can be made for THREE.WebGLRenderer. var renderer; renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.physicallyCorrectLights = true; renderer.setPixelRatio( window.devicePixelRatio * 2); renderer.setSize(window.innerWidth,window.innerHeight); renderer.gammaOutput = true; renderer.shadowMap.enabled = true; […]