three.js

前端three.js的Sprite模拟下雪动画效果

一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add
qq_35430208·2024-09-15 20:02

Three.js AnimationUtils 和 AnimationObjectGroup

在使用手册的“下一步”章节中，“动画系统”一文对three.js动画系统中的不同元素作出了概述用法:将本来要作为根对象传入构造器或者动画混合器(AnimationMixer)的clipAction方法中的对象加入组中
灵魂清零·2024-09-15 18:53

three.js AnimationClip 和 AnimationMixer

AnimationClip动画剪辑（AnimationClip）是一个可重用的关键帧轨道集，它代表动画。构造器AnimationClip(name:String,duration:Number,tracks:Array)name-此剪辑的名称duration-持续时间(单位秒).如果传入负数,持续时间将会从传入的数组中计算得到。tracks-一个由关键帧轨道（KeyframeTracks）组成的数
灵魂清零·2024-09-15 18:52

ThreeJS入门（001）：简介、下载安装、历史、应用场景、竞品

查看本专栏目录-本文是第001篇入门文章文章目录一、Three.js简介二、Three.js的历史与发展三、公司背景四、下载安装五、官方网站六、应用范围场景七、相关竞品一、Three.js简介Three.js
还是大剑师兰特·2024-09-13 10:37

three.js 加载STL模型补充遇到的问题

旋转问题three.js在开发的时候找到的指导文档提到的都是场景相机渲染初始化，相机控制器默认是轨道控制器OrbitControls。
代码搬运工娃哈哈呀娃哈哈·2024-09-08 02:49

react 中three.js 模型渲染

npminstallthreeimport*asTHREEfrom"three";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";constmountRef=useRef(null);useEffect(()=>{//创建渲染器constrenderer=newTHREE.WebGLRenderer();constw
Mr_wuying·2024-09-04 07:17

4. 第一个3D案例—创建3D场景

入门Three.js的第一步，就是认识场景Scene、相机Camera、渲染器Renderer三个基本概念，接下来，咱们通过三小节课，大家演示“第一个3D案例”完成实现过程。
小彭努力中·2024-09-03 09:58

Three.js Cesium.js 案例聚集地

对于大多数的开发者来言，看了很多文档可能遇见不到什么有用的，就算有用从文档上看，把代码复制到自己的本地大多数也是不能用的，非常浪费时间和学习成本，尤其是three.js，cesium.js这种难度较高，
优雅永不过时··2024-09-02 07:47

three.js 着色器， cesium 热力图，聚合点位，大量点线面， 图层，主题，文字

对于大多数的开发者来言，看了很多文档可能遇见不到什么有用的，就算有用从文档上看，把代码复制到自己的本地大多数也是不能用的，非常浪费时间和学习成本，尤其是three.js，cesium.js这种难度较高，
优雅永不过时··2024-09-02 06:46

three.js 编辑器，动画，着色器， cesium 热力图，聚合点位，大量点线面， 图层，主题，文字，等众多案例中心

对于大多数的开发者来言，看了很多文档可能遇见不到什么有用的，就算有用从文档上看，把代码复制到自己的本地大多数也是不能用的，非常浪费时间和学习成本，尤其是three.js，cesium.js这种难度较高，
优雅永不过时··2024-09-02 06:45

微信小程序xr-frame图层与显示(五种方法)

1.通过visible属性(详见：Three.js模型隐藏或显示)visible:作用就是控制绑定该材质的模型对象是否可见，默认值是true，LineBasicMaterial、SpriteMaterial
牧羊人_sj·2024-09-01 11:47

【Three.js基础学习】19.Custom models with Blender

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档前言blender模型资源:【blender】一个汉堡包-CSDN博客一、代码import'./style.css'import*asTHREEfrom'three'import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js'import{GLTFLoa
蚕食我的耐心·2024-08-29 08:33

three.js低代码 编辑器 ，和 相应 3d 功能案例 ，cesium

开发历程低代码的开发是非常曲折的，尤其是早期根本没有任何参考作品或者相关的一些知识博客去引领我们去做，会经历多次的推到再到重头再来，又需要开发者有很高的知识储备，举步维艰。以下是我的一些的功能分布，希望能对你有一些启发，让你少走一些弯路。预览查看https://z2586300277.github.io/three-editor/dist/#/editor开源地址https://github.co
优雅永不过时··2024-08-28 11:40

three.js 实现 3D地图

three.js实现仿照echarts3d地图。
优雅永不过时··2024-08-27 15:01

Three.js CSS3D、CSS2D及精灵的区别

在Three.js中，这三种API都可以用来制作标签，那么有什么区别呢，本文进行解惑。首先，CSS3D和CSS2D都是DOM下的元素，而精灵使用Canvas作为纹理显示。
阿星小栈·2024-08-24 09:51

threejs 创建CSS3DSprite精灵标签, 可以更新位置及内容(封装)

/js/three.js/examples/jsm/renderers/CSS3DRenderer.js";classThreeCss3dSprite{constructor(){this.sprit
zsd_666·2024-08-24 09:47

更新到死得原生 three.js 和 cesium 得案例

纯原生threecesium案例由于前端得发展，three.js和cesium.js越来越被越来越多得前端接触到，由于其学习路线比较复杂，且官网案例覆盖不全，因此在今年我**联合了业界得一些大佬**共同搭建了一个免费得
优雅永不过时··2024-08-23 11:26

CSS2DRenderer的使用

具体参照https://github.com/mrdoob/three.js/blob/master/examples/css2d_label.html；CSS2DRenderer的使用import{CSS2DObject
qq_39672409·2024-02-28 09:20

three.js记录一下实现模型放大缩小的限制

限制模型的最大放大倍数和最小缩小倍数，可以使用three.js中的缩放操作scale和事件监听器首先，为了使模型可以缩放，需要将缩放属性设置为需要的初始值。
一只理智恩·2024-02-19 23:22

WebGL开发的应用领域

许多游戏引擎，如Three.js、Babylon.js，都基于WebGL。2.虚拟现实（VR）和增强现实（
super_Dev_OP·2024-02-19 23:52

WebGL开发数据可视化应用

1.选择合适的WebGL框架或库：使用现有的WebGL框架或库，如Three.js、Babylon.js、regl等，以简化开发过程并提供强大的3D图形功能。
super_Dev_OP·2024-02-19 23:52

WebGL开发飞行模拟器

1.选择合适的WebGL框架或库：选择一个适用于飞行模拟器的WebGL框架或库，如Three.js、Babylon.js等。这些库提供了3D图形的强大功能和易用的API。
super_Dev_OP·2024-02-19 23:22

3D模型的开发框架及特点

1.Three.js:特点：Three.js是一个基于JavaScript的开源3D库，简化了在Web上创建和渲染3D场景的过程。它提供了丰富的功能，包括灯光、
super_Dev_OP·2024-02-19 23:14

three.js 3D可视化地图

threejs地图可视化地图——three.js实现this.provinceInfo=document.getElementById('provinceInfo');//渲染器this.renderer
allenjiao·2024-02-19 12:50

【Three.js】前端从零开始学习 threejs：创建第一个 threejs3D 页面

课程和学习大纲对应的课程在这里：Threejs教程、2023最新最全最详细Threejs教程、零基础Threejs最详细教程（已完结）学习知识要点思维导图：官网和文档的使用three.js官网如果无法访问
努力挣钱的小鑫·2024-02-19 12:14

基于babylon.js的3D网页游戏从零教程

Unity（Unity2018.2开始已经彻底弃用js，使用C#）Three.js（比较底层的框架，只是一个渲染器，复杂的游戏互动需要找合适的插件）PlayCanvas（可视化编辑器，走设计的workflow
weixin_33698043·2024-02-14 23:50

从Unity到Three.js（计时器、Transform）

计时器、模型对象平移函数、枚举定义的使用对应unity中的一些常用功能import*asTHREEfrom'three';constscene=newTHREE.Scene();constcamera=newTHREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,1000);constrenderer=newTHREE
chillxiaohan·2024-02-14 23:18

three.js 细一万倍教程 从入门到精通（三）

目录五、详解PBR材质纹理5.1、详解PBR物理渲染5.2、标准网格材质与光照物理效果5.3、置换贴图与顶点细分设置5.4、设置粗糙度与粗糙度贴图5.5、设置金属度与金属贴图5.6、法线贴图应用5.7、如何获取各种类型纹理贴图5.8、纹理加载进度情况单张图片加载多张图片加载5.9、详解环境贴图5.10、经纬线映射贴图与HDR经纬线映射贴图HDR六、详解灯光与阴影6.1、灯光与阴影的关系与设置6.2
编程抗氧化·2024-02-14 03:50

本地搭建three.js官方文档

因为three.js官网文档是国外的网站，所以你没有魔法的情况下打开会很慢，这时我们需要在本地搭建一个官方文档便于我们学习查看。
编程抗氧化·2024-02-14 03:50

three.js 细一万倍教程 从入门到精通（二）

目录三、全面认识three.js物体3.1、掌握几何体顶点_UV_法向属性3.2、BufferGeometry设置顶点创建矩形3.3、生成酷炫三角形科技物体四、详解材质与纹理4.1、初识材质与纹理4.2
编程抗氧化·2024-02-12 23:20

three.js 细一万倍教程 从入门到精通（一）

目录一、three.js开发环境搭建1.1、使用parcel搭建开发环境1.2、使用three.js渲染第一个场景和物体1.3、轨道控制器查看物体二、three.js辅助设置2.1、添加坐标轴辅助器2.2
编程抗氧化·2024-02-12 23:49

Unity动画转Three.js动画

一：应用场景在工作中，由于算法给到的动画文件是Unity的.anim格式动画文件，这个格式不能直接在Web端用Three.js引擎运行。
神小夜·2024-02-12 04:07

从Unity到Three.js（画线组件line）

JavaScript0基础，只是照着官方文档临摹了下，之后有时间再进行细节学习和功能封装。import*asTHREEfrom'three';//引入threejsconstrenderer=newTHREE.WebGLRenderer();//创建渲染器//设置渲染范围，当前撑满全屏,屏幕左上角是（0，0）letwidth=window.innerWidth;letheight=window.i
chillxiaohan·2024-02-12 04:37

从Unity到Three.js（安装启动）

虽然大多数问题都可以找到解决方案，但是最后也只能停在解决问题的程度，算不上是一个完美方案，因此想接触下three.js，开个系列记录下，一个0基础js的unity开发人员学习three.js的过程
chillxiaohan·2024-02-12 04:07

从Unity到Three.js（模型文件加载）

模型加载功能探索，用blender导出了个glb格式的cube进行的测试。初接触js语法，回调注册的地方直接使用匿名函数总感觉脑子跟不上，反应不过来，就把加载后的回调简单封装了下，官方文档是直接使用的匿名函数。另外看官方文档对模型加载功能描述，感觉实战中会遇到很多坑，等之后遇到再详细研究，这次只记录基础功能。import*asTHREEfrom'three'import{GLTFLoader}fr
chillxiaohan·2024-02-12 04:06

ArcGIS JS API+Three.js实现下雪特效

本示例效果实现的原理是利用Three.js创建我们自定
travelclover·2024-02-10 13:43

three.js库学习（一）

three.js官网Three.js中文网(webgl3d.cn)笔记学习记录近期在做VR视觉3D模型渲染，因而需要进行three.js的库学习，新建个文集做下笔记，为了后期工作上便于翻阅。
听书先生·2024-02-09 18:52

Three.js开发：环境贴图效果

Three.js支持环境贴图效果，通过设置场景的背景（background），增强显示效果，环境贴图一般使用全景图，分成6张图片，以立体贴图（CubeTexture）的方式进行加载。
GIS技术杂谈·2024-02-09 13:44

Three.js导出gltf模型

Three.js支持将场景导出成gltf（glb）格式三维模型，以文件的形式进行存储，下面以代码的形式说明，如何将场景导出模型。
GIS技术杂谈·2024-02-09 13:14

Three.js学习8：基础贴图

一、贴图贴图（TextureMapping），也翻译为纹理映射，“贴图”这个翻译更直观。贴图，就是把图片贴在3D物体材质的表面，让它具有一定的纹理，来为3D物体添加细节的一种方法。这使我们能够添加表面细节，而无需将这些细节建模到我们的3D对象中，从而大大精简3D模型的多边形边数，提高模型渲染性能。二、准备基础代码在场景里创建一个立方体。为了方便观察效果，还添加了网格辅助和轨道控制器。HTML：{"
stones4zd·2024-02-09 02:08

three.js 箭头ArrowHelper的实践应用

效果：代码：//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";exportdefault{data(){return{sphereGeometry:null,group:null,camera:null,mesh:null,renderer:null
汉武大帝··2024-02-08 19:30

three.js 匀速动画(向量表示速度)

效果：代码：1.匀速动画(向量表示速度)//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";//效果制作器import{E
汉武大帝··2024-02-08 19:30

【Three.js】创建CAD标注线

目录前言创建箭头对象创建文字箭头两端的线段✈️封装方法前言CAD标注线在工程和制造领域中被广泛用于标记零部件、装配体和机械系统的尺寸、距离、角度等信息。它们帮助工程师和设计师更好地理解设计要求，并确保制造的准确性。在三维场景中添加标注线使得设计更加直观。人们可以在一个真实的三维环境中看到物体的形状、大小和相互关系，相比于传统的二维图纸，更容易理解和把握设计意图。下面是一个简单的效果图：要创建上图所
叶子yes·2024-02-08 19:29

three.js 向量方向(归一化.normalize)

效果：沿着AB方向移动100重置已知直线AB上两个坐标，A点(-50,0,-50)、B点(100,0,100)。物体默认在A点，希望从A点开始沿着直线AB移动距离100,单位向量每个分量乘以100，得到的向量长度就是100，相当于得到一个沿着AB方向移动100的向量，这就是单位向量的意义，单位向量长度位1，乘以任何一个值S，就可以得到一个长度为S的向量。//引入轨道控制器扩展库OrbitContr
汉武大帝··2024-02-08 19:28

Three.js学习7：dat.GUI 参数控制

每个学Three.js的都被安利了dat.GUI吧？我也不例外！今天就来了学习下dat.GUI，并记录下来自己的学习成果。一、什么是dat.GUI?
stones4zd·2024-02-08 13:06

Three.js蒙皮骨骼变化原理 | 逆推蒙皮网格的世界位置

文章目录关于蒙皮的GPU计算：源码解析转换成CPU可执行的代码:法线部分蒙皮骨骼的变化是在GPU中进行的，所以像获取静态物体一样获取geometry.position是不行的查看当前版本（r160）的shader关于蒙皮的GPU计算：uniformmat4bindMatrix;uniformmat4bindMatrixInverse;uniformhighpsampler2DboneTexture
Jedi Hongbin·2024-02-07 21:48

基于Three.js的360X180度全景图预览插件 （踩坑篇）

HTML结构可以创建一个空的来放置全景图，通过CSS来设置它的尺寸。复制代码初始化插件要初始化该全景图插件，可以创建一个新的PhotoSphereViewer对象，然后在这个对象中插入一个参数对象，有两个参数是必须设置的：varPSV=newPhotoSphereViewer({//Pathtothepanoramapanorama:'1.jpg',//Containercontainer:div
无名小码农·2024-02-07 18:41

大坑！react+thress.js

2.UI交互界面与Canvas画布叠加|Three.js中文网(webgl3d.cn)//canvas画布绝对定位renderer.domElement.style.position='absolute
前端小菜鸟也有人起·2024-02-07 16:58

three.js通过相机控件轨道控制器找到合适的相机位置或观察目标

functionrender(){//渲染循环中不停地打印相机的位置属性，你可以通过相机控件旋转或缩放三维场景，同时通过浏览器控制台观察相机位置变化。//console.log('camera.position',camera.position);//浏览器控制台查看controls.target变化，辅助设置lookAt参数//console.log('controls.target',cont
前端小菜鸟也有人起·2024-02-07 16:58

three.js 渲染.obj模型

通过引入外部文件渲染模型和使用内部模型对象的方式是一样的，只不过需要使用内部方法先将文件解析为group，再添加到场景中scene.add(group)加载.obj模型，需要使用MTLLoader和OBJLoader，我们先引入//解析.obj模型import{OBJLoader}from'three/examples/jsm/loaders/OBJLoader'//解析.mtl材质import{
inkbamboo·2024-02-07 10:07
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他