threeJs

ThreeJs酷炫的发光特效

分享一个酷炫的发光特效效果，可见在线案例。效果组成该特效可以分成六个组成部分，一个转动的熔浆球体，一层透明气场，外发光，飞线聚集特效，内部发光，蓝色耀斑。熔浆球体和透明气场岩浆球体和透明气场是用几何球体实现，通过纹理移动（UV动画）来表达流动的岩浆和浮动的气场。constloader=newTHREE.TextureLoader();constmap=loader.load("texture.pn
sky.....·2023-06-23 05:51

前端3D Three.js 在本地搭建一个官方网站

的一个发展和学习方向那么我们还是先搞定文档使用的问题我们可以访问http://www.yanhuangxueyuan.com/Three.js/这里面可以查到使用方法但不是最新的而是别人用官方文档改的真正的官方文档地址是https://threejs.org
-耿瑞-·2023-06-23 00:57

Three.js教程：Threejs常见几何体简介

推荐：将NSDT场景编辑器加入你的3D工具链其他系列工具：NSDT简石数字孪生Threejs常见几何体简介Three.js提供的几何体API很多，本节课先给大家介绍几个比较简单的案例，为后面的学习打下基础
ygtu2018·2023-06-22 14:51

webgl图库研究（包括BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS等框架的特性、适用范围、支持格式、优缺点、相关网址）

原文链接：http://www.likecs.com/show-67151.html3D图库框架范围与示例摘要：为实现企业80%以上的生产数据进行智能转化，在烟草、造纸、能源、电力、机床、化肥等行业，赢得领袖企业青睐，助力企业构建AI赋能中心，实现智能化转型升级。“远舢文龙数据处理平台”以AI驱动，构建5G时代下企业数智基础，从根本上改变了数据采集、存储和使用的方式，是当下企业构建数字化与智能化能
李留白·2023-06-22 02:20

WebGL/Threejs瀑布水流粒子效果

webgl瀑布效果初始化场景functioninit(){scene=newTHREE.Scene();camera=newTHREE.PerspectiveCamera(45,scr.w/scr.h,0.1,10000);renderer=newTHREE.WebGLRenderer({antialias:true});renderer.gammaInput=true;renderer.gamm
allenjiao·2023-06-21 17:26

threejs实现监听窗口变化自适应画面以及全屏和退出全屏

一、现在的效果如上图，我改变窗口大小之后，整个场景并没有跟着窗口的变化自适应二、解决方案//监听画面变化，更新渲染画面window.addEventListener("resize",()=>{//console.log("画面变化了");//更新摄像头camera.aspect=window.innerWidth/window.innerHeight;//更新摄像机的投影矩阵camera.upd
jieyucx·2023-06-21 14:07

前端【js】学习JavaScrip心得

：jQuery、MooTools、Prototype、Dojo、YUI、ExtJS、ZeptoJS…2、生产出一大堆框架：AngularJS、VueJS、ReactJS、EmberJS、NuxtJS、ThreeJS
白开水不加糖1·2023-06-21 12:16

整个宇宙将为你闪烁 除了三体人前端也可以 哈哈

视频展示：Bilibili哔哩哔哩项目源码：GitHub前置项在开始之前希望你对three.js有一定的了解，这里推荐一个教程，Discoverthreejs,three.js主创之一编写的适
·2023-06-21 10:08

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

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

three.js学习 11 - 1.threejs常用几何体 2.几何体材质自定义 3.材质的旋转与堆叠效果

1.threejs常用几何体①.缓冲几何体（立方体）官网API地址：https://www.three3d.cn/docs/index.html?
不染-9732·2023-06-20 23:42

threejs 相机OrbitControls常用方法及属性

相机控件OrbitControls通过OrbitControls可以对三维场景进行缩放、平移、旋转，本质上改变的不是场景，而是相机的参数，相机的位置角度不同，同一个场景的渲染效果是不一样，比如相机围绕着一个场景旋转，就像场景旋转一样调用OrbitControls时需要引入OrbitControls.js文件import{OrbitControls}from'three/examples/jsm/c
爱吃烧鸭蛋的叶安·2023-06-20 18:38

threeJs使用gui控制球体大小

SphereGeometry创建时仅使用半径参数，没有内置的方法来改变它，需要手动修改几何顶点，或使用新的半径创建新的SphereGeometry或者缩放球体缩放球体的方法：gui.add第一个参数只能是对象，第二个参数是属性，三四是变换范围，第五个是步进letcontrolsOBJ={scaleNum:1}//创建球体sphere=newTHREE.Mesh(newTHREE.SphereGeo
爱吃烧鸭蛋的叶安·2023-06-20 18:38

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
上一页 7 8 9 10 11 12 13 14 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他