threeJs

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

卡车移动端展示，threejs实现

此处坑点如下1、模型参照工业模型的做法2、车漆需要自定义shader3、整体的场景效果（这个坑很大，很费时间）4、模型的轴心节点并非在设置的位置（在轮子上），需要转换一下，代码如下varaxis2=newTHREE.Object3D();axis2.position.set(-29.5,7.980,0);scene.add(axis2);axis2.add(mesh);mesh.geometry.
浪里独行·2023-04-18 12:35

Webgl手写

笔迹点绘制用点绘制：gl.POINTS,而threejs里面得points对象由wegblrenderer使用gl.POINTS.线上效果
浪里独行·2023-04-18 12:35

Threejs大型obj文件的秒加载实现

项目需求:要将3d模型显示在网页上并实现时时旋转和鼠标悬停功能.给我的3d模型是60M的obj文件threejs加载obj模型比较简单但加载时间很长毕竟60m的文件网络传输需要很长时间obj模型太大必须想办法压缩
飘渺55·2023-04-18 11:31

Three.js克隆.clone()和复制.copy()

Three.js克隆.clone()和复制.copy()你查看Threejs的文档可以发现Threejs的很多类都具有克隆.clone()和复制.copy()方法，比如网格模型Mesh、几何体Geometry
郭隆邦技术博客·2023-04-18 10:44

react threejs_进入3D编码世界：React + ThreeJS = R3F

reactthreejs3Dandcreativeprogrammingcanlooklikeagimmick,butthebenefitsoflearning3Daregrowingeveryday.Forexample
weixin_26732881·2023-04-17 02:14

ThreeJS-离屏渲染（三十五）

离屏渲染：个人理解，渲染两个场景A、B,假如A是主场景，B是离屏场景，首先离屏场景先借助主场景将视图渲染缓存，代码位置：//离屏渲染render.setClearColor(0x53868B);render.setRenderTarget(target);render.render(scene2,camera2);然后再切回主场景，将B场景中看到的视角以贴图纹理的形式渲染到主场景物体上代码位置：c
不穿铠甲的穿山甲·2023-04-16 08:31

ThreeJS—OrbitControls使其控制模型而不是场景

转载核心代码项目场景：来公司之前公司有一个地球组件，大概是张这个样子的⬇️，会转有飞线，有城市涟漪，很炫酷。可惜不是我做的。一个大屏项目上需要额外增加一些需求转动到某一城市，暂停转动，并弹出相关城市内容可拖动地球解决方案：需求1这个好整。three的球模型的自动旋转，就是通过requestAnimationFrame创建的动画，一秒60帧，每一帧让球的y旋转某个值//earth3dObj就是个mo
ATWLee·2023-04-15 18:46
上一页 7 8 9 10 11 12 13 14 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他