threeJs

threeJs着色器

一、着色器着色器（Shaders）是一种使用GLSL(OpenGLShadingLanguage)编写并在GPU上运行的程序。它们被用于定位几何体的每个顶点，并为该几何体的每个可见像素着色。使用“像素Pixel”来描述其实并不准确，因为渲染的每个点不一定与屏幕上的每个像素相匹配，因此我们更倾向于使用术语“片元fragment”。之后我们会向着色器发送大量数据，如顶点坐标、网格变换、摄像机及其视野范
爱吃烧鸭蛋的叶安·2023-06-20 18:06

Three.js教程：Canvas画布布局和全屏

推荐：将NSDT场景编辑器加入你的3D工具链其他系列工具：NSDT简石数字孪生Canvas画布布局和全屏threejs渲染输出的结果就是一个Cavnas画布，canvas画布也是HTML的元素之一，这意味着
ygtu2018·2023-06-20 16:45

Three.js教程：渲染器

对于threejs而言，如果完成“咔”这个拍照动作，就需要一个新的对象，也就是WebGL渲染器WebGLRenderer(opensnewwindow)。
ygtu2018·2023-06-20 16:13

Three.js教程：动画渲染循环

推荐：将NSDT场景编辑器加入你的3D工具链其他系列工具：NSDT简石数字孪生动画渲染循环threejs可以借助HTML5的API请求动画帧window.requestAnimationFrame实现动画渲染
ygtu2018·2023-06-20 04:03

Three.js3D可视化介绍，以及本地搭建three.js官网

一、什么是Three.jsthree.js官网：https://threejs.org/Three.js是一个基于WebGL的JavaScript3D图形库，它可以轻松地在浏览器中创建3D场景和动画。
jieyucx·2023-06-19 17:37

使用parcel搭建threejs开发环境

一、什么是parcelparcel官网：https://www.parceljs.cn/Parcel是一个快速、零配置的Web应用打包器，可将JavaScript、CSS、HTML和图像等静态文件打包到一个捆绑文件中。它的主要目标是简化Web应用程序的打包过程，使开发人员可以更快速地创建现代Web应用程序。Parcel支持许多不同的文件类型和模块系统，并具有自动编译、自动安装依赖项和热模块更换等功
jieyucx·2023-06-19 17:04

Qgis2threejs

three.js是JavaScript编写的一个开源的3D图形库，它可以用于创建各种各样的交互式3D应用程序和动画。该库提供了一系列的工具和功能，使得在Web浏览器中创建高质量的3D图形变得更加容易。使用three.js，您可以轻松地创建3D场景，包括几何体、光照、阴影、纹理、动画等。它适用于各种不同的应用场景，例如游戏开发、数据可视化、建筑可视化、产品演示等。three.js还提供了丰富的文档和
GIS工具·2023-06-18 20:30

MapBox&ThreeJS加载FBX动态模型

customLayer（MapBox自定义图层））：4、methods（定位模型位置，创建自定义图层，加载模型，设置场景，设置镜头，设置光照，地图重新渲染将自定义层的模型加载到地图上，解析fbx模型骨骼动画，通过threejs
我要睡觉了i·2023-06-17 11:38

mapbox+threejs实现三维气泡球体专题图

mapbox-gl+Three.js如何实现三维专题图引言引入JS先加载地图我们需要准备一些地图JSON数据初始化数据和地图、THREE对象使用Three构建的3D对象创建mapbox图层把3D对象图层添加进mapbox图层发布并下载引言大家好！最近在研究前端three.js和webGL技术，采用三维地图展示数据，我分享一下研究成果！引入JS先加载地图我们这里用超图的iServer发布的地图瓦片数
sun_falls·2023-06-17 11:07

Threejs进阶之九：让模型沿着指定轨迹移动与转向

上一次我们创建了蓝天大海，并且将一个游轮模型添加到了大海中，这一节我们让游轮按照指定轨迹移动，移动的过程中实现自动转向；先看下最终效果要实现模型沿着轨迹运动，需要以下几个步骤（1）创建一个轨迹曲线（2）编写物体沿轨迹运动的方法（3）在渲染函数中调用上面的方法，实现物体的移动具体实现方法如下创建轨迹曲线创建曲线轨迹我们这里使用了CatmullRomCurve3类,CatmullRomCurve3类使
九仞山·2023-06-17 11:07

MapBox&ThreeJS加载GLTF静态模型

1、Dom元素：2、import引入：3、data（定义map）：4、methods（定位模型位置，创建自定义图层，加载模型，设置场景，设置镜头，设置光照，地图重新渲染将自定义层的模型加载到地图上）：methods:{//加载gltf模型initGLTF(){varmapSecond=this.map//用于确保模型在地图上正确地理参照的参数varmodelOrigin=[148.9818395,
我要睡觉了i·2023-06-17 11:07

mapbox-gl结合threejs

文章目录前言为什么使用threebox代码示例总结前言最近在研究threejs和mapbox的结合，花了一天多的时间，结合threebox这个mapbox的三维库，给mapbox中创建自定义图层，添加自定义几何体
迦南giser·2023-06-17 11:05

mapbox-gl添加threejs飞线

初始化地图并加载three图层2绘制飞线几何体将几何体正确定位在mapbox上正确操作BufferGeometry几何体3tween实现动画全部代码总结待改进之处参考更新蝌蚪状飞线效果如下，思路可参照threejs
迦南giser·2023-06-17 11:05

Three.js教程：三维坐标系

推荐：将NSDT场景编辑器加入你的3D工具链其他系列工具：NSDT简石数字孪生三维坐标系本节课的目的就是为了加强大家对threejs三维空间的认识。
ygtu2018·2023-06-16 17:33

vue-cli中使用threejs, 并实现OrbitControls鼠标控制效果

主要是接上一篇在vue-cli中使用threejs，并实现鼠标控制移动，以及点击交互效果基于在vue-cli中使用threejs，并实现鼠标控制移动，以及点击交互效果这篇的代码结构，添加如下代码vue-cli
风筝啊·2023-06-16 04:40

Three.js教程：光源对物体表面影响

推荐：将NSDT场景编辑器加入你的3D工具链其他系列工具：NSDT简石数字孪生光源对物体表面影响实际生活中物体表面的明暗效果是会受到光照的影响，threejs中同样也要模拟光照Light对网格模型Mesh
ygtu2018·2023-06-15 11:19

ThreeJS教程：山脉地形高度可视化

推荐：将NSDT场景编辑器加入你的3D工具链3D工具集：NSDT简石数字孪生山脉地形高度可视化一个山脉地形的高度可视化，具体说就是地形不同的高度设置不同的颜色值。有多种方式，下面就举一个设置顶点颜色.attributes.color的例子本节课算是一个练习题，用到的知识点前面几节都将讲解过，所以视频主要把思路给大家说一遍，然后大家根据课程课程思路自己手写一遍。1.山脉几何体y坐标范围loader.
yevtte2023·2023-06-15 02:23

ThreeJS教程：CSS3批量标注多个标签

推荐：将NSDT场景编辑器加入你的3D工具链3D工具集：NSDT简石数字孪生CSS3批量标注多个标签下面下工厂为例，使用CSS3DRenderer批量渲染多个HTML元素标签。CSS3渲染器基本代码CSS3渲染器代码和上节课内容一样设置即可。//引入CSS3渲染器CSS3DRendererimport{CSS3DRenderer}from'three/addons/renderers/CSS3DR
yevtte2023·2023-06-15 02:53

ThreeJS教程：地图案例(包围盒、正投影)

推荐：将NSDT场景编辑器加入你的3D工具链3D工具集：NSDT简石数字孪生地图案例(包围盒、正投影)地图案例(包围盒、正投影)地图案例会涉及到几何体、包围盒、正投影相机三方面知识点。平面填充几何体ShapeGeometry包围盒Box3正投影相机OrthographicCameraShapeGeometry渲染河南省地图轮廓constdata=[//河南边界轮廓边界经纬度坐标[110.3906,
yevtte2023·2023-06-15 02:53

ThreeJS 炫酷特效旋转多面体Web页 Demo 01《ThreeJS 炫酷特效制作》

本案例为一个threejs的特效网页，大小球体进行包裹，外球体为透明材质，但是进行了线框渲染，使其能够通过外球踢查看其内球体。
1_bit·2023-06-13 17:16

GIS融合之路（三）CesiumJS和ThreeJS相机同步

我们终于实现了双向的相机同步。完成了这些，GIS系统算是正式可以在山海鲸中使用了。而且后面的章节我们会提到，山海鲸开放了整合CesiumJS的接口，因此只需要开启反向相机同步，即可无缝的将之前的CesiumJS代码迁移过来了。
山海鲸可视化·2023-06-13 17:00

关于threejs 着色器代码（二）#if 0 > 0 意义和用途

image.png今天在学习threejs片元着色器代码的时候忽然遇到上面这行代码，一开始很懵逼，写过代码的都知道'0>0'这个明显没有任何意义，那为啥threejs这么牛逼的三维库会这样写呢，然后我就去找群友问
aibinMr·2023-06-12 21:55

angular8+threejs 如何架构项目+分离模型+模型动画调用+动画暂停/继续

原因：threejs在运用的时候因为是没有html全都是js，所以我想把每个模型都分成不同的service来处理，而且事件也分离到自己的service里面附加模型下载地址：传送门结构事例（有点乱没整理求不要骂
候鸟_ywh·2023-06-11 21:10

Three.js教程：对象克隆、复制

推荐：将NSDT场景编辑器加入你的3D工具链其他系列工具：NSDT简石数字孪生对象克隆.clone()和复制.copy()Threejs大多数对象都有克隆.clone()和复制.copy()两个方法,点模型
ygtu2018·2023-06-10 21:00

Three.js使用指南（入门版）

安装你可以从官方网站（https://threejs.org）下载最新版本的Three.js，或者使用npm安装：npmi
西装暴徒_12138·2023-06-10 04:00

【threejs初级】初级demo&案例

前置知识：vue2+threejsVue里使用three.js实现3D模型小案例:非常基础的无贴图旋转立方体，有完整代码前置知识：vue3+ts+threejsvue3.0+ts+threejs实现简单的
Lana学习中·2023-06-09 23:45

Threejs开发3D展馆 | 大帅老猿threejs特训

本文将介绍如果使用Threejs开发制作一个3D展馆，效果如图：首先，我们需要一个展馆模型。我是通过Blender做出来的，在Blender中将模型导出为glb格式。
sam_20801·2023-06-09 19:45

Three.js教程：常见光源类型

推荐：将NSDT场景编辑器加入你的3D工具链其他系列工具：NSDT简石数字孪生常见光源类型Threejs虚拟光源是对自然界光照的模拟，threejs搭建虚拟场景的时候，为了更好的渲染场景，往往需要设置不同的光源
·2023-06-09 14:17

ThreeJs学习笔记——渲染(render)分析

一、前言ThreeJs封装了WebGL进行渲染时所涉及到的相关概念，如光照，材质，纹理以及相机等。除此之外，其还抽象了场景(Scene)以及用于渲染的渲染器(WebGLRenderer)。
仰简·2023-06-08 17:59

Threejs入门之十四：Threejs中的组(Group)对象

组其实就是一个集合，将不同的物体添加到一个组中，就形成了一个集合；比如我们可以创建两个物体，然后将这两个物体使用group.add方法添加到同一个组中//创建几何体constgeometry=newTHREE.BoxGeometry(50,50,50)//创建材质constmaterial=newTHREE.MeshBasicMaterial({color:0x00ff00})//创建物体Acon
九仞山·2023-06-08 16:11

threejs 学习资源帖

Threejs网址备忘录threejs官网：https://threejs.org/threejs中文教程：https://techbrood.com/threejs/docs/threejs中文网：http
loriloy·2023-06-08 13:30

学习网站

1、Threejs中文网http://www.webgl3d.cn/2、webGL电子书教程（全部免费）http://www.webgl3d.cn/WebGL/3、WebGL视频教程以及课程介绍（收费）
星辰啊大海7857·2023-06-08 13:57

Three.js资源

Three.js资源本文是Three.js电子书的学前内容Three.js库github链接：https://github.com/mrdoob/three.jsThree.js官网：https://threejs.org
郭隆邦技术博客·2023-06-08 13:56

Three.js入门学习笔记09：Three.js对象拾取，鼠标点击对象响应事件

一.拾取对象概念二.坐标转换三.光线投射Raycaster中文文档http://www.webgl3d.cn/threejs/docs/#api/zh/core/Raycaster英文文档https:/
月亮计划·2023-06-08 13:52

ThreeJS教程：山脉地形高度可视化

https://www.mvrlink.com/threejs-visualization-of-mountain-ter...推荐：将NSDT场景编辑器加入你的3D工具链3D工具集：NSDT简石数字孪生山脉地形高度可视化一个山脉地形的高度可视化
·2023-06-08 12:04

ThreeJS-水晶小熊（二十八）

素材：链接:https://pan.baidu.com/s/1HbT0SlFHwfQbrKH9tXlM5w提取码:e98i关键代码：loader.load('bear.gltf',gltf=>{lettextureLoader=newTHREE.TextureLoader();textureLoader=textureLoader.load('three/050.jpg');//映射-折射映射，不
不穿铠甲的穿山甲·2023-06-08 10:40

Three.js加载FBX模型并解析骨骼动画

通过Threejs先加载一个.FBX格式的三维模型文件，然后解析该文件中的骨骼动画信息。
山楂树の·2023-06-07 16:55

Threejs 快速入门

最小环境首先，在正式学习Threejs前，有几个概念需要说明的。Threejs在底层其实还是调用html5中的canvasapi来实现绘图的。
红红火火a·2023-06-07 15:10

ThreeJS教程：地图案例(包围盒、正投影)

https://www.mvrlink.com/threejs-map-cases/平面填充几何体ShapeGeometry包围盒Box3正投影相机OrthographicCameraShapeGeometry
·2023-06-07 11:28

Threejs进阶之十七：Threejs中的Path、Shape和ShapeGeometry类

在实际的应用中，有时候需要我们根据一个二维图形拉伸为三维图形的情况，这就需要我们对Threejs中提供的二维图形相关的类有一个深入的了解，这一节我们就深入的聊一聊Threejs中的Path、Shape和
九仞山·2023-06-07 11:22

Threejs进阶之十六：音频可视化

最近事情比较多，博客更新的有点慢了，今天更新一期，主要聊一聊通过Threejs提供的音频API实现音频的可视化效果，先看下最终实现的效果音频可视化目录Threejs中音频相关的类Audio类构造函数常用属性常用方法创建
九仞山·2023-06-07 11:21

Threejs进阶之十二：Threejs与Tween.js结合创建动画

tween.js介绍Tween.js是一个可以产生平滑动画效果的js库，其官方地址为：https://github.com/tweenjs/tween.js/，可以将源码下载后，可以在tween.js/dist/文件夹下找到相应的js代码，在HTML中进行引用；也可以通过npm命令在终端控制台中安装tween.js模块npminstall@tweenjs/tween.js然后在相应的页面引用Twe
九仞山·2023-06-07 11:20

Threejs入门之十三：精灵模型Sprite和精灵材质SpriteMaterial

在Threejs中精灵模型Sprite是父类是Object3D创建精灵只需要传递一个材质参数就可以了，不需要几何体constsprite=newTHREE.Sprite(material);2SpriteMaterial
九仞山·2023-06-07 11:20

ThreeJS 纹理贴图创建一个我的世界草地方块

ThreeJS纹理贴图创建一个我的世界草地方块开始准备使用ThreeJS写一个类似《我的世界》场景的射击类游戏，地形和我的世界很相似。
·2023-06-06 22:58

基于游戏引擎的数字孪生技术方案

二.技术方案实施路线webgl游戏引擎技术栈threejs、cesiumue4+webrtc优点快捷，方便画质材质着色器效果好，比较吃服务器性能缺点吃用户电脑性能需要大团队配合
·2023-04-21 19:05

Threejs实现穿越云层动效

上文说到，我对《你的性格主导色》活动中最感兴趣的部分就是通过Three.js实现穿越云层动效了，据作者说每朵云出现的位置都是随机的，效果很好，下图是我实现的版本。image在线Demo首先说下实现穿越云层动效的基本思路：沿着Z轴均匀的放一堆64*64的平面图形，这些平面的X坐标和Y坐标是随机的（很像下图的桶装薯片）把上面的所有图形合并成一个大的图形把大的图形和贴片材质（云）生成网格，网格放进场景中
hezf·2023-04-21 16:52

Three.js教程：顶点位置数据解析渲染

推荐：将NSDT场景编辑器加入你3D工具链其他工具系列：NSDT简石数字孪生顶点位置数据解析渲染如果你没有WebGL基础，可以先不用记忆每个的threejs具体内容，有一个大致印象即可，学习本节课的重点是建立顶点的概念
·2023-04-21 16:06

Three.js教程：透视投影相机

https://ted.sinoccdc.cn/其他系列工具：NSDT简石数字孪生Threejs如果想把三维场景Scene渲染到web网页上，还需要定义一个虚拟相机Camera，就像你生活中想获得一张照片
·2023-04-21 10:21

失败狮计划再现——threejs实现文字环绕动画

前言说到环绕动画，18年初的时候我曾写过一版太阳系动画，当然，那时完全是慢慢调试坐标然后用css动画写上去的，后来有同事把这个太阳系动画使用threejs改写了，动画变得更加顺滑流畅了，那时我只是对three
韭菜的故事·2023-04-21 04:13

基于threejs(webgl)的3D元宇宙云展厅

首先看看效果图：基于threejs的3D展厅基于threejs开发的3D展厅，展品可以自由摆放。
·2023-04-18 22:07
上一页 9 10 11 12 13 14 15 16 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他