【WebGL】Three.js 第31页

WebGL矩阵变换

目录变换矩阵：旋转变换矩阵：平移4×4的旋转矩阵示例代码：gl.uniformMatrix4fv（）规范平移：相同的策略变换矩阵：缩放变换矩阵：旋转对于简单的变换，你可以使用数学表达式来实现。但是当情形逐渐变得复杂时，你很快就会发现利用表达式运算实际上相当繁琐。比如，下图显示了一个“旋转后平移”的过程，如果使用数学表达式，我们就需要两种变换的等式叠加，获得一个新的等式，然后在顶点着色器中实现。但是

山楂树の·2023-08-28 09:16

WebGL 绘制函数gl.drawArrays

gl.drawArrays（）的第1个参数WebGL方法gl.drawArrays（）既强大又灵活，通过给第1个参数mode指定不同的值，在这个参数上指定不同的值，我们可以按照不同的规则绘制图形。

山楂树の·2023-08-28 09:46

WebGL 缓冲区对象介绍，创建并使用缓冲区，使用缓冲区对象向顶点着色器传入多个顶点数据的所有步骤

目录使用缓冲区对象使用缓冲区对象向顶点着色器传入多个顶点的数据，需要遵循以下五个步骤。创建缓冲区对象（gl.createBuffer（））gl.createBuffer（）的函数规范gl.deleteBuffer（）绑定缓冲区（gl.bindBuffer（））gl.bindBuffer（）的函数规范向缓冲区对象中写入数据（gl.bufferData（））gl.bufferData（）的规范类型化数

山楂树の·2023-08-28 09:45

WebGL非矩阵变换

目录平移示例代码：齐次坐标矢量的最后一个分量w旋转p的坐标，可得等式R1：使用r、α、β来表示点p'的坐标，可得等式R2：利用三角函数两角和公式，可得等式R3：最后，将p的坐标等式代入上式，消除r和α，可得等式R4：三角函数两角和公式示例代码：平移考虑一下，为了平移一个三角形，你需要对它的每一个顶点做怎样的操作？答案是，你需要对顶点坐标的每个分量（x和y），加上三角形在对应轴（如X轴或Y轴）上平移

山楂树の·2023-08-28 09:44

如何在微信小程序中实现最简单的旋转三角形

如何在微信小程序中实现最简单的旋转三角形varwidth=window.innerWidthvarheight=window.innerHeightvarrenderer=newTHREE.WebGLRenderer

Camilar小汪汪·2023-08-28 08:57

WebGL uniform变量、gl.getUniformLocation、gl.uniform4f及其同族函数相关介绍

uniform变量命名规范获取uniform变量的存储地址gl.getUniformLocation向uniform变量赋值gl.uniform4f编辑gl.uniform4f()的同族函数demo：点击webgl

山楂树の·2023-08-27 18:32

Three.js之几何体BufferGeometry

参考资料几何体顶点位置数据和点模型…旋转、缩放、平移几何体)知识点注：基于Three.jsv0.155.0缓冲类型几何体：BufferGeometry定义几何体顶点数据：BufferAttribute点模型：Points、PointsMaterial线模型：Line、LineBasicMaterial网格模型：Mesh、MeshBasicMaterial顶点索引：geometry.index顶点法

开心就是最好·2023-08-27 18:28

某圆形变电站三维建模模型-glb格式-三维漫游-三维可视化-三维模拟巡检

资源介绍某个圆形变电站的三维建模模型，glb格式，适用于three.js开发测试，可用来做一些三维室内漫游测试、室内导航测试和三维模拟巡检测试资源下载地址

猿经验·2023-08-27 16:49

某文化馆三维建模模型-glb格式-三维漫游-室内导航测试

资源描述某文化馆某个楼层的三维建模模型，glb格式，适用于three.js开发，可用来做一些三维室内漫游测试和室内导航测试资源下载地址

猿经验·2023-08-27 16:19

Three.js + Theatre.js WebGL动画制作简明教程

我们将演示如何为Three.js立方体制作动画、集成引人注目的视觉效果、修改颜色、试验HTML元素以及以特定时间间隔将动画与声音播放同步。

新缸中之脑·2023-08-27 10:32

WebGL学习笔记——二维矩阵变换

平移二维平移矩阵WebGL学习笔记——二维矩阵变换说明：(x',y')是原坐标(x,y)分别在x轴方向移动tx，y轴方向移动ty之后得到的新坐标使用python的numpy矩阵处理模块、matplotlib

辣椒爸·2023-08-27 05:35

Three.js学习项目--3D抗美援朝数据可视化

部分场景image.pngimage.png体验地址https://kmyc.hongbin.xyz/操作说明视频https://www.bilibili.com/video/BV1kY4y1v78z/我做了哪些（功能）draco解析glb模型同时处理部分纹理请求减轻一次加载纹理压力手动控制轨道控制器镜头动画多音频拼接控制封装动画播放器控制进度切换动画进度控制器同步音频模拟视频体验useConte

薛定谔的程序·2023-08-26 21:27

Supermap WebGL 去掉supermap标识

functiononload(Cesium){varviewer=newCesium.Viewer('cesiumContainer');viewer.imageryLayers.addImageryProvider(newCesium.TiandituImageryProvider({credit:newCesium.Credit('天地图全球影像服务数据来源：国家地理信息公共服务平台&四川省测

清白的少年·2023-08-26 01:03

用 TensorFlow.js 在浏览器中训练神经网络

具有GPU加速功能，并自动支持WebGL可以导入已经训练好的模型，也可以在浏览器中重新训练现有的所有机器学习模型运行Tensorflow.j

不会停的蜗牛·2023-08-25 20:37

厂区三维地图在工业互联网信息可视化中的应用

物联网技术和webGL技术的发展，使得厂区三维地图在现代工业生产环境中已经成为一种重要的工具，它为企业管理者、工程师和操作人员提供了实时、直观和全面的信息，以支持他们在作业、规划和决策方面的工作。

维小帮·2023-08-25 20:22

地图在线编辑平台，无基础轻松实现私域地图

位构云平台让用户轻松构建诸如空间信息管理、建筑信息管理及三维空间数据可视化、导航等类型应用的多平台、综合型地图引擎，基于OpenGLES/WebGL三维可视化技术体系的自主研发图形引擎，可以让开发者轻松构建运行在

维小帮·2023-08-25 20:51

如何在浏览器中启用 WebGL 以使用 HTML5 3D 查看器

描述WebCenter中的HTML53DColladaViewer（自14.1以来新增）要求在浏览器中启用WebGL。较旧的浏览器可能不支持此功能，或者要求用户首先显式启用此功能。

ygtu2018·2023-08-25 18:28

WebGL 绘制圆点

夜跑者·2023-08-25 11:27

Three.js 监听纹理加载

本文简介本文介绍Three.js的基础方法：监听材质加载。在《Three.js基础纹理贴图》里介绍了如何给图形贴图，贴图前需要先把纹理加载好。我们基于这篇文章继续讲解如何监听材质加载成功或者失败。

德育处主任Pro·2023-08-24 16:10

WebGL智慧粮仓3D可视化物联网系统

仓廪实、天下安。民之所需，行之所至。建设背景古往今来，粮食问题历来是安邦定国的头等大事。“粮食”作为人类生活的生命之源，在人们的日常生活中起着决定性的作用。收获的粮食归仓，仓储工作是稳定“大国粮仓”的重要环节，当粮食收购后，如何让丰收成果颗粒归仓，减少损失，并确保粮食储藏质量安全就成了最后的压轴战。系统概述“智慧粮仓”是一种结合现代科技与传统农业的新型粮仓系统。它依托5G、物联网、大数据等技术手段

·2023-08-24 16:32

WebGl理解：模型、视图和投影矩阵变换的含义

看了别人写的文章，开始学webgl,以及看一些webgl的东西，一些术语很难理解，庆幸看到一篇文章，赶紧记下来：原文引用：http://www.jiazhengblog.com/在WebGL中实际上是没有摄像机的概念的

幸宇·2023-08-24 10:47

Unity发布web遇到的问题

1.WebGL报错UncaughtRuntimeError:floatunrepresentableinintegerrange2.报Maximumcallstacksizeexceeded超出最大调用堆栈大小原因

羽阿呆·2023-08-24 06:22

Cesium介绍

1、背景在许多虚拟地理空间应用的实现中，Cesium是一个很有用的WebGL图形库。学习如何解释CSS文件保证它准确呈现3D场景是一个重要的知识，因此本文提供了Cesium源代码的指导和说明。

无敌的季末·2023-08-24 03:45

《WebGL入门指南》——第1章，第1.2节3D图形学——入门

本节书摘来自异步社区《WebGL入门指南》一书中的第1章，第1.2节WebGL——一个技术定义，作者【美】TonyParisi，更多章节内容可以访问云栖社区“异步社区”公众号查看1.23D图形学——入门

WWWWWWWWolf·2023-08-23 20:29

WebGL编程指南01-着色器与常用API

前言本系列是在学习WebGL编程指南中，做出的个人总结Canvas1.1什么是CanvasCanvas即画布，顾名思义就是绘画的地方，Canvas在HTML5中被定义为一个标签，从此前端开发者可以通过这个标签和脚本语言

搬砖怪·2023-08-23 19:44

Three.js着色器基础【含源码】

WebGL和OpenGL使用一种名为GLSL的语言，它代表OpenGL着色器语言，类似于C语言。在Three.js中添加着色器的最简单方法是使用ShaderMaterial。还有一些RawShad

新缸中之脑·2023-08-23 19:13

VTK文件格式

转载：http://www.hewebgl.com/article/getarticle/126什么是vtk文件？

后知后觉_3e4a·2023-08-23 08:43

javascript期末作业【三维房屋设计】【文末源码+文档下载】

1、引入three.js库官网下载three.js库放置目录并引用引入js文件:设置场景（scene）（1）创建场景对象（2）设置透明相机1,透明相机的优点透明相机机制更符合于人的视角,在场景预览和游戏场景多有使用

白开水为啥没味·2023-08-23 04:38

Three.js 实现模型材质分解，拆分，拆解效果

注意：支持模型材质position修改的材质类型为type=“Mesh”,其他类型的材质修改了position可能没有实际效果在上一篇Three.js加载外部glb,fbx,gltf,obj模型文件的文章基础上新增一个

答案—answer·2023-08-23 02:34

Goby 漏洞更新｜锐捷网络 NBR路由器 webgl.data 信息泄露漏洞

漏洞名称：锐捷网络NBR路由器webgl.data信息泄露漏洞EnglishName：RuijieNBRRouterwebgl.datainformationCVSScore:7.5影响资产数：204290

Gobysec·2023-08-22 05:02

在Unity编辑器中开发遇到问题BUG如何调试解决?

这一节主要讲在Unity编辑器中的问题解决方法，发布后的程序（如PC端、WebGL、Andnroid、iOS等）出现异常、崩溃等情况，后面再专门写文章去探

洪智·2023-08-22 04:27

为three.js实现实时渲染与烘焙

Three.js社区的朋友们，大家好！现在，通过简单的API调用，实时的渲染和烘焙已经成为可能。

·2023-08-21 17:31

Three.js之几何体、高光材质、渲染器设置、gui

参考资料阵列立方体和相机适配体验Threejs常见几何体简介…gui.js库(可视化改变三维场景)知识点注：基于Three.jsv0.155.0长方体：oxGeometry球体：SphereGeometry圆柱：CylinderGeometry矩形平面：PlaneGeometry圆形平面：CircleGeometry高光网格材质：MeshPhongMaterial（shininess、specul

开心就是最好·2023-08-21 12:17

Egret Wing

渲染模式：dom，cavase，webGL不同的地图、不同的元素，好玩的道具（充值付费获得道具、融合形成新的道具）二、准备工作创建项目->资源（jso

朝朝_c53e·2023-08-21 09:57

three.js 中设置透明背景

类似这样的，canvas感觉是透明的，里面的3D在上面，通常做地球旋转之类的效果，webgl设置：setClearColor（1.0,1.0,1.0,1.0）rgba格式最后一个参数就是alphathree.js

那年我七岁·2023-08-20 22:50

基于Three.js的WebXR渲染入门

1、Three.js渲染管线快速概览我不会花太多时间讨论Three.JS渲染管道的工作原理，因为它在互联网上有详细记录（例如，此链接）。我将在下图中列出基础知识，以便更容易理解各个部分的去向。

xiangzhihong8·2023-08-20 06:51

WebGL和OpenGL之间的差异

ygtu2018·2023-08-20 06:21

WebGL的剪裁空间

ygtu2018·2023-08-20 06:50

2D应用开发是选择WebGL 还是选择Canvas？

ygtu2018·2023-08-20 06:45

Three.js 实现模型材质局部辉光效果和解决辉光影响场景背景图显示的问题

它将场景和相机作为输入，使用Three.js默认的渲染器（renderer）来进行场景渲染，并将结果输出给下一个渲染通道)3.Unre

答案—answer·2023-08-20 03:56

Three.js程序化3D城市建模【OpenStreetMap】

对于我在Howest的研究项目，我决定构建一个3D版本的LucasBebber的“交互式讲故事的动画地图路径”项目。我将使用OSM中的矢量轮廓来挤出建筑物的形状并将它们添加到3js场景中，随后我将对其进行动画处理推荐：用NSDT编辑器快速搭建可编程3D场景1、开发环境设置为了使用Node和npm包，我选择使用Vite.js。Vite是一款构建工具，旨在为现代Web项目提供更快、更精简的开发体验。它

新缸中之脑·2023-08-20 02:17

Three.js粒子特效，shader渲染初探

这大概是个序关于Three.js，网上有不多不少的零碎教程，有些过于初级，有些云里雾里，而Three.js官网上的示例逼格之高又令人望而却步，这些对于没学过计算机图形学的童鞋来说，就像入门迈槛不知先迈左脚还是右脚

weixin_34174422·2023-08-19 22:50

WebGPU应用开发快速入门

在WebGPU之前，有一种WebGL技术，它提供了WebGPU功能的子集。而WebGPU启用了新一类丰富的网络内容，开发人员可以用它构建了令人惊叹的应用。

·2023-08-19 22:28

基于WebGL智慧养老院三维可视化云平台

前言我国已经迈入老龄化社会，老龄化社会中养老已然成为社会普遍关注的焦点，智慧养老成为未来趋势。建设背景社会因素养老床位数量也增长至2020年的821万张.每千名老人拥有养老床位增长至35张,相对于先进国家的50-7O张仍有较大差距。目前养老床位供需还处于紧张状态。“十四五”民政事业发展的规划第一次在五年规划中提出健全建设运营管理政策.发展家庭养老床位，让更多的老年人养老不离家,在家里就能享受家庭养

·2023-08-19 21:27

WebGL+Three.js 入门与实战，系统学习 Web3D 技术

download：WebGL+Three.js入门与实战，系统学习Web3D技术React18和Next.js13：前端开发的新时代引言前端开发是一个不断变化和进化的领域，每年都有新的工具和技术出现，为开发人员提供了更多的选择和可能性

·2023-08-19 21:55

Flutter web打包后,访问页面显示空白

使用Skia编译为WebAssembly并使用WebGL渲染。该渲染器与Flutter移动设备和台式机完全一致，具有更快的性能，并且不太可能在浏览器之间出现差异，但下载大小增加了大约2MB。

yytester·2023-08-19 19:01

前端的方向

行业的发展必然带来职业的细分，在前端领域也一样，目前行业前端有下面这几个方向：界面展现用户体验和可访问性方向、偏后的js/nodejs开发方向、audio/video音视频富媒体方向、SVG/canvas/webGL

仰望天空的人·2023-08-19 14:42

社交直播游戏场景前端解决方案专栏（二）：小游戏开发 The React Way

通过结合React生态与WebGL渲染能力，我们可以让熟悉React的开发人员低成本地入门H5游戏开发，在复用现有组件资产的同时，提供高性能的游戏画面，实现更复杂的视觉效果。

·2023-08-19 09:05

纹理图片贴图模糊的问题

最近在使用百度的瓦片图贴图的时候，出现了纹理贴图模糊、不够清晰的问题，请求的瓦片图片资源相同，但是图片作为纹理贴到three.js场景中渲染质量不高。包括stack社区里也有几个类似的提问。

ANoman_M·2023-08-18 20:27

推荐频道

【WebGL】Three.js