![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
three
漫 漫,
个人博客:www.catii.top
展开
-
Three.js加载360全景图片/视频
【代码】Three.js加载360全景图片/视频。原创 2023-09-28 16:15:14 · 1390 阅读 · 0 评论 -
Three.js模型粒子变换效果
Three.js模型的粒子点云变换效果原创 2023-02-01 19:52:18 · 1181 阅读 · 0 评论 -
Three.js地图轮廓分割效果
Three.js地图轮廓分割轮廓效果基于GeoJson数据解析绘制,支持多级国家/省/市细粒度路径绘制可以通过Shader/材质/贴图实现不同的轮廓分割效果阿里云GeoJson配置/下载地址相关方法 // 经纬度与世界坐标转换 const getPosition = (lng, lat, radius) => { const phi = (180 + lng) * (Math.PI / 180); const theta = (90 - lat) * (Math原创 2021-12-28 15:29:26 · 1017 阅读 · 0 评论 -
Three.js/Shader墙体流光特效
Three.js墙体流光效果基于ShaderMaterial,通过两张贴图实现流动效果,配置不同的贴图可以有不同效果生成方法 /** * 创建流体墙体材质 * option => * params bgUrl flowUrl * **/ const createFlowWallMat = ({ bgUrl, flowUrl }) => { // 顶点着色器 const vertex原创 2021-12-24 18:50:06 · 5477 阅读 · 13 评论 -
Three.js/Shader墙体渐变透明特效
Three.js/Shader渐变发光透明墙特效原创 2021-12-23 16:48:27 · 5393 阅读 · 6 评论 -
Three.js通过不规则路径生成墙体
Three.js通过不规则路径生成墙体在一些3D场景的搭建中,经常会遇到图中通过墙体来分割内容的效果,目前Threejs提供的Geometry类型还无法直接处理一些不规则墙体的搭建生成算法通过BufferGeometry基础图形搭建通过路径解析算法,构建出所有需要渲染的面支持三维路径进行构造 /** * option => * params height path material * 通过path构建墙体 * **/原创 2021-12-23 11:18:53 · 5598 阅读 · 22 评论 -
Three.js清除场景/模型释放内存
加在开发时,若遇到需要动态添加删改模型、场景,页面切换重渲染时,为避免内存叠加占用,需要手动清除场景所占用的内存,避免溢出与资源浪费。使用 dispose() 清除所有网格模型几何体的顶点缓冲区占用内存使用 object.clear() 销毁模型对象,清除页面内存暂停 requestAnimationFrame() 方法,避免无意义运行清空 canvas画布,置空dom与相关元素清除场景 clearScene() { cancelAnimationFrame(this.animati原创 2021-04-19 18:48:26 · 14949 阅读 · 7 评论 -
Three.js无限星空特效
效果代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * {原创 2021-01-15 18:01:48 · 1345 阅读 · 0 评论 -
Three.js星空粒子特效
效果代码只渲染固定个数与区域的粒子保证性能初始化时确定每个粒子偏移向量方向,操作帧动画时做三维向量偏移超过规定区域时还原,实现无限粒子移动<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2021-01-15 17:27:18 · 1933 阅读 · 1 评论 -
Three.js Line2渐变色线条序列帧动画
效果代码1. 生成轨迹线// 轨迹曲线线 const curve = new THREE.CatmullRomCurve3( [ new THREE.Vector3(-20, 30, 4), new THREE.Vector3(20, 30, 4), new THREE.Vector3(20, 0, 4), new THREE.Vector3(-20, 0, 4),原创 2021-01-15 11:36:04 · 6711 阅读 · 11 评论 -
Three.js渲染Dom元素到3D场景
效果中间两个swiper部分用dom方式实现,再将其转化成为Three中的CSS3DObject对象添加到3D场景中,代码需要创建两个场景与渲染器(普通渲染器,CSS3Render)通过两个场景融合实现dom插入(这种方式会导致深度信息丢失)<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" c原创 2021-01-14 20:39:04 · 2447 阅读 · 5 评论 -
Three.js基于Canvas的文字贴图
Three.js基于Canvas的文字贴图居中对齐,对中文文字做了长度兼容处理,可更具开发需求自行构造Canvas贴图 const createLabel = () => { const name = "马达加斯加的企鹅们正在快乐的玩耍"; const canvas = document.createElement("canvas"); const color = "#dddddd"; const fontSize = 50;原创 2020-12-28 19:56:23 · 1608 阅读 · 0 评论 -
Three.js 修复UnrealBloomPass导致背景失效问题
Three.js 修复UnrealBloomPass导致背景失效问题import { AdditiveBlending, Color, LinearFilter, MeshBasicMaterial, RGBAFormat, ShaderMaterial, UniformsUtils, Vector2, Vector3, WebGLRenderTarget} from "../../../build/three.module.js";import { Pass } from "原创 2020-12-21 16:04:20 · 2612 阅读 · 11 评论 -
Three.js实现分区Bloom辉光效果
一、效果展示辉光效果二、如何实现1.基于EffectComposer后期渲染器。2.借助UnrealBloomPass渲染通道,实现辉光效果。3.了解three.js中 layers 分层的概念,实现分层渲染。4.单帧两次渲染,分别渲染两个不同的场景,组合成为需要的场景。三、代码实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <原创 2020-11-23 20:17:34 · 5738 阅读 · 6 评论 -
Three.js带Depth实现分区辉光
一、效果二、如何实现1.基于EffectComposer后期渲染器。2.借助UnrealBloomPass渲染通道,实现辉光效果。3.接住ShaderPass,保此原有material。4.单帧两次渲染,分别渲染辉光部分,还原正常部分。5.相比直接分层两次渲染,修复了深度信息丢失导致的层级问题。三、代码实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /&原创 2020-12-21 11:36:02 · 1861 阅读 · 3 评论 -
Three.js实现hover与Click选中效果
一、效果展示二、如何实现使用Three.js提供的光线投射Raycaster模块通过Raycaster将物体在场景中的位置与鼠标的位置进行对比当鼠标的平面坐标与场景中物体的平面坐标发生重叠时认为选中了物体三、代码实现<script type="module"> import * as THREE from "./node_modules/three/build/three.module.js"; import { OrbitControls } from原创 2020-11-26 11:52:37 · 3902 阅读 · 0 评论