【WebGL】Three.js

SuperMap iClient3D for WebGL教程（S3MTilesLayer）- 图元操作

作者：刘大S3MTilesLayer，S3M(Spatial3DModel)图层类，通过该图层实现加载三维切片缓存，包括倾斜摄影模型、BIM模型、点云数据、精细模型、矢量数据、符号等。那S3MTilesLayer中针对图元的操作主要有‘颜色’，‘偏移’，‘可见性’’等，可通过下面这张表格，查看对应的方法，文章接下来就从这3个操作来进行说明首先，图元的操作是基于图元对象的id进行指定的，我们一般可通
supermapsupport·2023-12-30 05:42

SuperMap iClient3D for WebGL/WebGPU ——地形影像

目录一、地形影像1、引用部分1.widgets.css2.pretty.css3.jquery.min.js4.spectrum.js6.config.js2、代码部分2.1引擎的使用2.2初始化添加地形2.2.1proxy：服务代理2.2.2requestWaterMask：水面特效2.2.3ellipsoid:椭球体2.2.4credit：描述信息2.2.5isSct：是否为iServer发布
supermapsupport·2023-12-30 05:12

SuperMap iClient3D for WebGL/WebGPU ——颜色（1）

目录1.颜色模块2.Color(red,green,blue,alpha)3.Color的一些其他方法3.1数值运算3.1.1add(left,right,result)融合颜色3.1.2subtract(left,right,result)两颜色分量差值运算3.1.3mod(left,right,result)余数运算3.1.4multiply(left,right,result)两颜色分量乘积
supermapsupport·2023-12-30 05:12

SuperMap iClient3D for WebGL制作立体地图

kele以重庆市为例，我们来看下如何制作三维立体地图，先看下效果吧一、数据准备1.重庆市矢量面2.重庆市影像图（没有重庆市影像的话，可以通过矢量面裁剪获得）3.条纹图片二、数据制作制作思路：我们观察到立体地图像是一个被拉伸起来的多边形体，顶面是影像地图，侧面是纹理图片，所以我们可以通过矢量面拉伸+贴图的方式实现1.获取顶面影像贴图小编只有一张全国的低精度影像，通过裁剪的方式获取重庆市影像裁剪后得到
supermapsupport·2023-12-30 05:11

SuperMap iClient3D for WebGL——pickEvent事件

作者：赵爽相信有大部分初学者在学习webgl的时候，都遇到pickEvent事件进不去的问题，我最近也查了查相关的问题，也是不少的。下面我就来总结一下pickEvent事件究竟应该怎么写。
supermapsupport·2023-12-30 05:41

SuperMap iClient3D for WebGL之平面场景（三）

在之前的博文中，我们已经向大家介绍了SuperMapiClient3DforWebGL如何加载平面场景。对于球面场景和平面场景，除了在加载的时候需要转换场景模式外，还有以下几个方向与球面场景有差异。
supermapsupport·2023-12-30 05:41

SuperMap iClient3D for WebGL扩展开发教程——动态棱锥标注

作者：桔子本文同步发布于https://www.jianshu.com/p/99e0f83f1352最近有客户咨询是否能实现如下的动态标注效果，下面来看下如何实现。1、棱锥实现从截图可以看到，这里对象是棱锥，但是在Cesium的Enity对象中，并没有直接的棱锥对象可以使用，这里有两个思路去解决。（1）通过primitive去绘制，需要自己构建棱锥的每一个顶点坐标、索引、位置矩阵，以及shader
supermapsupport·2023-12-30 05:41

【超图】SuperMap iClient3D for WebGL/WebGPU —— 坐标系&位置 —— Cartesian2

那么在SuperMapiClient3DforWebGL/WebGPU中包含了哪些坐标系信息呢？一、Cartesian笛卡尔坐标系可能说到笛卡尔坐标系，对于一个毕业多年的人来说，或者
老孟爱吃Taco·2023-12-30 05:09

Unity 发布WEBGL运行后报错，Brotli compression may not be supported over HTTP connections.

报错文本UnabletoparseBuild/WEBGL.framework.js.br!
萌萌的提莫队长·2023-12-30 01:32

WEB 3D技术 three.js 色彩空间讲解

上文WEB3D技术three.js设置环境贴图高光贴图场景设置光照贴图我们讲了基础材质的各种纹理但是我们的图片到了界面场景中好像绿的程度有点不太一样了这里的话涉及到我们的色彩空间他有两种一种是线性的一种是
-耿瑞-·2023-12-30 01:31

虚拟仿真三种部署方案的优劣势对比

经过近几年的发展，虚拟仿真教学在教育行业已经有一定的规模，目前的虚拟仿真程序部署方案多采用了单机版或者结合webgl技术，可以实现电脑安装运行，或者通过WebGL实现网页打开。
点量云实时渲染-小芹·2023-12-29 22:25

threejs官方demo学习（3）：几何体

webgl_geometries这个案例还是比较简单的，主要介绍了一些创建物体的创建。知识点PointLightPointLight点光源，从一个点向各个方向发出光线的光源，比如灯泡。
无知的小菜鸡·2023-12-29 18:02

Three.js 全景图（标注偏移、显示不全的问题记录）

Three.jsVR全景图（标注偏移、显示不全的问题记录）最近在项目中利用three.js实现了vr全景的功能，过程中遇到了标注偏移、标注图标显示不全的问题，在此做个记录1.VR全景实现原理构建three.js
vagabond_·2023-12-29 18:32

threejs实现3d全景看房

认识threejsthree.js就是使用javascript来写的，基于原生WebGL封装运行的三维引擎，运行在浏览器上的3D程序。WebGL是在浏
前端码农小王·2023-12-29 18:31

three.js后期处理-FilmPass(类似电视效果)、DotScreenPass(将场景输出成点集)、GlitchPass(电磁风暴效果)-(vue中使用three.js84)

简单的后期处理通道FilmPass、DotScreenPass、GlitchPass1.demo效果2.重要知识点2.1认识后期处理2.2简单后期处理通道介绍2.2.1FilmPass通道介绍2.2.1DotScreenPass通道介绍2.2.1GlitchPass通道介绍3.实现要点3.1相关文件引入3.2创建效果组合器并添加通道3.3通道切换处理3.4render中更新通道与效果组合器4.de
点燃火柴·2023-12-29 18:31

three.js入门超详细附带素材及源码

three.js学习总结超详细附带素材及源码vue安装three.jsnpminstall--savethree引入three.jsimport*asTHREEfrom'three'three.js结构
天生我材必有用_吴用·2023-12-29 18:30

Three.js 解决纹理渲染后模型为黑色

文章目录前言一、图片路径错误二、TextureLoader()是异步操作,但是没有回调渲染三、渲染时机不正确四、渲染函数里没有requestAnimationFrame()五、尝试使用require引入纹理六、浏览器不能读取本地文件七、光照附-颜色color加载不出总结前言有很多种情况,我一一列举一下,因为我全都试过了…一、图片路径错误要加载的图片应该从当前js文件(即load()所在的文件)开始
白瑕·2023-12-29 18:00

Three.js学习-光照和阴影(了解向)

参考：Threejs光照和阴影-知乎(zhihu.com)在ThreeJs中，物体的颜色也是通过光照叠加得到的，bling-Phong等模型在这里同样适用，ThreeJs将光照也封装成了一个对象。目录6种光照1环境光AmbientLight2点光源PointLight3聚光灯SpotLight4方向光DirectionalLight5半球光HemisphereLight6平面光RectAreaLi
九九345·2023-12-29 18:30

vue中使用three.js加载3d模型，绑定 mouseup 和 mousedown 事件不起作用

vue中使用three.js加载3d模型，绑定mouseup和mousedown事件不起作用在Three场景中，如果想要对鼠标进行操作就要引入OrbitControls.js文件，在这种控制方式下，鼠标左键为旋转视角
qq_37656005·2023-12-29 18:29

关于从入门three.js到做出3d地球这件事(第二篇: 开发必备的辅助技能)

上篇我们讲解了three.js的基本配置代码,想看的同学可以访问这个链接:关于从入门three.js到做出3d地球这件事(第一篇:通
前端瓶子君·2023-12-29 18:28

three.js对光源效果

不知道你们在写的过程中有没有遇到过这种事情，明明我已经加上光源了，但是为什么就是没有效果呢，加的位置啥的也没有错误啊，这是为什么呢？我也遇到过这样的问题一是光源没加对，有错误，二是光源正确，但是材质的问题，材质对光源不反应我们加上光源但是得到的效果依旧没有加上这时候会有人问，是不是我们的光源写错了呢？其实并不是的，而是THREE.MeshBasicMaterial是最基本的材质，也是不会对光源产生
崽崽有点笨·2023-12-29 18:28

three.js学习笔记（react版）

官网链接：three.jsdocs这个文章是记录了博主学习three的一些磕磕绊绊，查阅了大量资料后的总结。学习准备下载：three更新迭代得很快，很多方法在各种版本里的使用方法不太一样或者已经被废弃，所以下载正确的版本是很重要的，想下载最新版本的只需将@后面的版本去掉即可npminstallthree@对应版本--save下载后的three文件如下在该目录下examples/jsm放置了很多th
Pluto_fan·2023-12-29 18:57

three.js场景的背景旋转主体不动

方法一创建两个THREE对象分层控制两个DIV，创建两个THREE对象，完全弄出两套divBG，绑定创建THREE对象1，在场景中添加背景图片，设置controls的自动旋转，关键代码如下：initScene(){//场景作为一个容器scene=newTHREE.Scene()leturls=['dark-s_px.jpg','dark-s_nx.jpg','dark-s_py.jpg','dar
Beam007·2023-12-29 18:57

three.js+vue3点光源不生效的另外一个可能

解决：后来发现，我安装的three.js版本：^0.160.0，目前的最新版，于是尝试降级，我选择了^0.150.1版本，模型瞬间就有光了！demo:最后附上demo
马上风·2023-12-29 18:56

Three.js基础入门介绍——Three.js学习一【学习路线】

Three.js基础入门介绍1.深入了解Three.js前提下需要知道：【OpenGL和WebGL】1.OpenGL是一个跨平台的3D/2D的绘图标准（规范）。
小猪猪哟·2023-12-29 17:23

Three.js基础入门介绍——Three.js学习二【极简入门】

准备开发环境下载官网提供的three.js-master代码包，官方提供的示例和相关库文件都在里面点击进入官网下载安装vscode编辑器点击进入官网安装好后，在vscode的插件市场搜索LiveServer，点击安装，方便开小型服务，解决因直接打开的文件中存在import，导致跨源请求被拦截的问题。掌握一些概念性知识前端基本功–HTML+CSS+JS，至少会写需要引入入外部JS的单页HTML，本文
小猪猪哟·2023-12-29 17:23

Three.js基础入门介绍——Three.js学习四【模型导入】

模型导入通过Three.js的材质和几何体，我们可以很方便的创建基础3D模型，但涉及到复杂模型时，一般是由专业建模工具生成模型文件再导入的方式将模型引入到我们的3D场景中进行使用Three.js加载器Three.js
小猪猪哟·2023-12-29 17:50

SuperMap iClient3D for WebGL之对接iServer发布的影像服务（一）

作者：nannanSuperMapiServer10.2.0版本提供了影像服务扩展模块，可以将大规模影像或栅格数据快速发布为影像服务；影像服务提供了一种通过Web服务来管理和访问影像或栅格数据的方式。影像服务提供了WMTS服务接口，方便第三方客户端以外的产品对接，浏览影像服务所管理的数据。小编尝鲜通过测试，发现影像服务是用本地的（.tif、.img、.ecw）影像或栅格数据直接发布影像服务，可以在
supermapsupport·2023-12-29 13:24

WEB 3D技术 three.js 设置环境贴图 高光贴图 场景设置 光照贴图

上文WEB3D技术three.js基础网格材质演示几何体贴图ao贴图效果我们简单构建了一个贴图和ao贴图的几何体材质我们接下来来看一下透明度贴图我们还是官网搜索MeshBasicMaterial然后是我们的
-耿瑞-·2023-12-29 09:01

html5从入门到放弃,《前端图形学从入门到放弃》002 教练我想学矩阵

webgl如何实现缩放和旋转？平移不是线性变换，那该怎么办？webgl如何实现平移？
weixin_39595008·2023-12-29 02:15

WebGL在教育和培训的应用

WebGL在教育和培训领域具有广泛的应用，其强大的图形渲染能力和跨平台性使得它成为创建交互式、视觉化的数字内容的理想选择。以下是一些WebGL在教育和培训上的应用示例，希望对大家有所帮助。
super_Dev_OP·2023-12-29 02:14

利用HTML5构筑物理模拟环境～ WebGL库Three.js入门（１／３）

这是目前质量较好、讲解比较清楚的一篇Three.js的入门教程，原作者是日本人遠藤理平，由HiWebGL技术讨论群群友瀡风翻译，HiWebGL授权转载。感谢原作者的创作和瀡风辛苦翻译！
load_life·2023-12-29 02:12

WebGL库Three.js入门

HTML5和WebGL简单认识一下HTML5吧。HTML5是目前构成WEB页的主流的HTML4和XHTML的后续语言、2008年制定了草案、约定各大浏览器提供商一起力争在2014年前形成正式的版本。
celte·2023-12-29 02:41

WebGL开发三维解剖学应用

开发基于WebGL的三维解剖学应用通常涉及以下步骤。这些步骤包括创建三维模型、整合交互性、优化性能等，希望对大家有所帮助。北京木奇移动技术有限公司，专业的软件外包开发公司，欢迎交流合作。
super_Dev_OP·2023-12-29 02:10

Three.js基础入门介绍——Three.js学习三【借助控制器操作相机】

在Three.js基础入门介绍——Three.js学习二【极简入门】中介绍了如何搭建Three.js开发环境并实现一个包含旋转立方体的场景示例，以此为前提，本篇将引进一个控制器的概念并使用”轨道控制器”
小猪猪哟·2023-12-28 19:39

three.js实现3D汽车展厅效果展示

因为我搭建的是vue3项目，为了便于代码的可读性，所以我将three.js代码单独抽离放在一个组件当中，在App根组件中进入引入该组件。具体如下：importCarShowroomfrom'.
不爱敲代码的小胡·2023-12-28 17:06

【超图】SuperMap iClient3D for WebGL/WebGPU —— 数据集合并缓存如何控制对象样式

作者：taco最近在支持的过程中，遇到了一个新问题！之前研究功能的时候竟然没有想到。通常我们控制单个对象的显隐、颜色、偏移的参数都是根据对象所在的图层以及对象单独的id来算的。那么问题来了，合并后的图层。他怎么控制单个对象的显隐、颜色、偏移呢？突然令人费解。本篇文章将介绍两种方式来控制合并图层后的单个对象的样式。一、仅通过代码控制在官方示例中。我们可以发现有一个示例中所应用的数据集图层是合并的图层
老孟爱吃Taco·2023-12-28 17:04

【Web2D/3D】Canvas（第三篇）

1.前言是HTML5新增元素，它是一个画板，开发人员基于它的2D上下文或webgl上下文，使用JS脚本绘制简单的动画、可交互画面，甚至进行视频渲染。
古狼（Jenkin_guwolf）·2023-12-28 13:45

WEB 3D技术 three.js 基础网格材质演示几何体贴图 ao贴图效果

本文我们来说一下基础网格材质之前我们也用到过这个材质但是用的非常基础我们在官网搜索MeshBasicMaterial这是能够给到物体最基础的材质但也是性能最好的材质后续我们还会学效果更好的物理材质但还是那句话效果复杂的东西对性能消耗自然会更多我们拉下来会发现他有非常非常多的属性我们先来写个最基础的编写代码如下import'./style.css'import*asTHREEfrom"three";
-耿瑞-·2023-12-28 12:50

初识canvas（二）

canvas最基础的用法，包括绘制线条、控制渲染方式、绘制图形、作用域、添加阴影、清理、剪切等功能，本节将继续为大家分享canvas的基础用法，同时也是最后一节基础知识分享，之后的内容，我们将会进入到对webgl
yancy_1012·2023-12-28 12:19

Web直播技术 (2023.04)

>服务器处理->CDN分发）->解码->播放通过HTTP、WebSocket等方式获取数据；处理数据，解协议、组帧等得到媒体信息及数据；封装成媒体片段，或解码成一帧画面；通过video或canvas（WebGL
seaty_·2023-12-28 07:07

[Godot4][源码分享]GWJ#50作品—俯视角解谜

主菜单（全屏与音量控制、关卡选择）异步场景加载游戏核心机制（玩家控制、视角控制、道具拾取与使用、召唤平台、推进类平台、传送类平台、简单对话框）遇到的问题：使用Forward+渲染器创建的场景不能很好地兼容WebGLAnimationTree
pamisu·2023-12-28 04:23

SuperMap iClient3D for WebGL教程（Entity）-WallGraphics

本节我们来一起学习下WallGraphics这个对象，这个对象也是属于Entity是他对象的，Wall是一个墙对象，可以沿着地面或海拔高度进行放置，是竖立着加载到场景中的，我们来看一个使用Wall做的效果简单的墙代码如下：viewer.entities.add({id:"test0",wall:{positions:Cesium.Cartesian3.fromDegreesArray([112,4
为梦齐舞·2023-12-27 17:12

WebGL

类型化数组：ArrayBuffer：这是一个构造函数，创建时通过传入数字来为将来的使用而分配一定的字节。单位时B（1B=8b，1B=2的8次方）。这个构造函数的实例有一个属性：byteLength：用于获取包含的字节数。视图：DataView：这是一个构造函数，创建这个构造函数的实例需要传入1-3个参数，第一个参数是类型化数组的实例，第二个参数是可选的字节偏移量和一个可选的要选择的字节量。在实例化
郝加升·2023-12-27 16:38

【Web2D/3D】css3的2D/3D转换、过渡、动画（第一篇）

1.前言本篇开始介绍Web2D和3D相关基础知识，会从CSS3的2D/3D转换、过渡、动画，讲到Canvas2D图形绘制，再到SVG，最后到WebGL。
古狼（Jenkin_guwolf）·2023-12-27 09:15

WebGL开发安全培训应用

使用WebGL开发安全培训应用可以为员工提供在虚拟环境中体验危险情境、学习安全操作和应急处理技能的机会。以下是开发安全培训应用的一般步骤，希望对大家有所帮助。
super_Dev_OP·2023-12-27 07:20

AR智慧校园三维主电子沙盘系统研究及应用

架构模式，采用自主可控高性能WebGIS可视化引擎，支持多用户客户端通过网络请求访问服务器地图和专题数据，提供地理信息数据、专题数据的并发访问和高效调度加载，进一步拓展全空间数据模型及其分析计算能力，集成WebGL
QQ_2801061513·2023-12-27 07:01

WEB 3D技术 three.js带着大家简单在文档上过一下集合体 并理解如何在文档中调试参数

前面讲了自己创建集合体顶点分组但是这样其实挺麻烦的three.js其实已经给我们封装好了官网直接搜索geometry这边这个立方体应该算是我们用的最多的这里这个就是通过三个参数设置它们分别对应高度宽度厚度拉下来我们看到其实他有六个参数前面的
-耿瑞-·2023-12-27 04:04

Unity3D 中播放 RTSP 监控视频

【Unity3D】怎么在WebGL中低延迟播放RTSP监控-简书[Unity3D]开箱即食的头部监控厂商SDK集成框架-简书Unity3dWindows播放视频（视频流）功能组/插件支持对比_ffmpegforunity-CSDN
LixiSchool·2023-12-26 23:56

threejs--初创项目

一.环境介绍倘若你只是使用Three.js库中所提供的几何体，且不载入任何纹理贴图，则网页是可以从本地的文件系统中打开，并且是能够直接运行的，只需在文件管理器中双击HTML文件，它就可以在浏览器中进行显示
知行合一实践派·2023-12-26 16:53
上一页 5 6 7 8 9 10 11 12 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他