ThreeJs

Three 之 three.js （webgl）Layers 图层的简单介绍和简单实用

Layers图层的简单介绍和简单实用目录Three之three.js（webgl）Layers图层的简单介绍和简单实用一、简单介绍二、实现原理三、注意事项四、效果预览五、实现步骤六、关键代码一、简单介绍Threejs
仙魁XAN·2023-01-16 16:17

Three.js骨骼动画(SkinnedMesh)

Threejs骨骼动画需要通过骨骼网格模型类SkinnedMesh来实现，一般来说骨骼动画模型都是3D美术创建，然后程序员通过threejs引擎加载解析，为了让大家更
郭隆邦技术博客·2023-01-16 16:47

【ThreeJS基础教程-材质纹理篇】3.1 纹理知识进阶

纹理知识进阶学习ThreeJS的捷径如何用一张地板砖贴图制作出地板砖效果旋转纹理移动纹理纹理旋转与移动的应用简单的光圈效果简单的流水效果WebGL项目优化技巧：没必要的细节可以用纹理直接代替下一篇预告学习
幻梦往昔·2023-01-16 16:46

【ThreeJS基础教程-材质纹理篇】3.2 初识基础网格材质MeshStandardMaterial

初识标准网格材质学习ThreeJS的捷径了解纹理的基本知识纹理继承关系常用的通用材质属性alphaTest的验证和应用depthTest和depthWrite应用渲染哪一面Side常用的Standard
幻梦往昔·2023-01-16 16:46

【ThreeJS基础教程-高级几何体篇】2.X基础篇总结/目录

高级几何体篇总结学习ThreeJS的捷径更好的视觉效果-综合案例2加载模型，加载模型时的常见错误多模型加载管理器LoadingManagerGL格式(GLTF/GLB)模型讲解与其他常用模型格式介绍加载
幻梦往昔·2023-01-16 16:16

【ThreeJS基础教程-初识Threejs】1.6各种各样的几何体

各种各样的几何体学习ThreeJS的捷径常用内置几何体介绍立方缓冲几何体BoxGeometry分段数的意义（该部分仅建议了解即可，无需深入）圆形缓冲几何体CircleGeometry圆柱缓冲几何体CylinderGeometry
幻梦往昔·2023-01-16 16:15

【ThreeJS基础教程-高级几何体篇】2.2 加载模型，加载模型时的常见错误

加载模型，加载模型时的常见错误学习ThreeJS的捷径关于加载模型篇的一些建议加载OBJ格式模型案例分析模型加载时的常见错误模型文件数据错误路径错误没有报错的情况下，我们看不到模型怎么办经过上述检查后，
幻梦往昔·2023-01-16 16:15

【ThreeJS基础教程-高级几何体篇】2.4 GL格式(GLTF/GLB)模型讲解与其他常用模型格式介绍

GL格式（GLTF/GLB）模型讲解与其他常用模型格式介绍学习ThreeJS的捷径GL格式简介常见的建模软件ThreeJS支持的文件格式常见的模型格式介绍模型兼容性说明OBJ格式与MTL格式FBX格式STL
幻梦往昔·2023-01-16 16:15

【ThreeJS基础教程-高级几何体篇】2.5 加载GLTF/GLB格式文件，Draco压缩文件的获取与加载

加载GLTF/GLB格式文件，Draco压缩文件的获取与加载学习ThreeJS的捷径加载GL格式模型案例案例效果threejs中常见的模型加载方式三种常见的gl格式文件Draco压缩Draco介绍Draco
幻梦往昔·2023-01-16 16:15

【ThreeJS基础教程-初识Threejs】1.4.1 更好的视觉效果-使用材质与灯光

更好的视觉效果-使用材质与灯光学习ThreeJS的捷径使用灯光与材质案例解析使用MeshStandardMaterial给演员换身新衣服用灯光照亮换了新衣服(新材质)的演员(方块)控制开关灯我想知道灯光在哪我觉得场景太暗了环境光
幻梦往昔·2023-01-16 16:45

【ThreeJS基础教程-初识Threejs】1.2掌控我们的物体和模型

掌控我们的物体和模型学习ThreeJS的捷径引入帧数监控与调试时使用的GUI案例解析引入刷新率检测器stats和lil-guiStatsLIL.GUI（Dat.GUI）学习ThreeJS的捷径本段内容会写在
幻梦往昔·2023-01-16 16:44

threejs效果比较好的天空和水面

threejs效果比较好的天空和水面目录前言一、引入水二、引入天空总结前言本文使用的是threejs提供的Water和Sky实现天空与水面。
10566·2023-01-16 16:42

WebGL技术研究：Threejs、SceneJS、ThingJS等框架优缺点对比分析

为实现企业80%以上的生产数据进行智能转化，在烟草、造纸、能源、电力、机床、化肥等行业，赢得领袖企业青睐，助力企业构建AI赋能中心，实现智能化转型升级。以AI驱动，构建5G时代下企业数智基础，从根本上改变了数据采集、存储和使用的方式，是当下企业构建数字化与智能化能力的首选产品。构建面向未来智能工厂全场景的全息交互模式，实现物理空间与数字空间的混合孪生。为国产工打造一个用户可以自研的智能云平台，变革
VRlook·2023-01-16 16:42

【ThreeJS基础教程-初识Threejs】1.4.2更好的视觉效果-综合案例(1)

更好的视觉效果-综合案例1学习ThreeJS的捷径写在前面相机灯唯一父级原则相对坐标系如何获取物体的绝对坐标系（相对于Scene的坐标系）添加一个地面吧操作BufferGeometry和操作Mesh的区别添加多个演员内存优化方案
幻梦往昔·2023-01-16 16:41

初识threejs

第一次接触threejs的实战，大受震惊。感觉有点神奇，和现实比较接近，所以研究记录下。
·2023-01-16 09:11

送你一个甜甜圈｜大帅老猿threejs特训

写在前面，这是第一次发表技术类文章，2022年本来给自己定了一个目标在掘金发表10篇技术类的文章。结果反正因为各种各样的原因，导致最后也没有完成，甚至都没有开始。2022年产出为0。这一次实战课程起因是在群里看到胖达老师做了一单，那金额着实让我羡慕呀。然后就在千呼万唤中，胖达老师准备出一个教程，带领大家入门之后并会出大教程，带领大家丰富致富手段。当然其实这次决定来写这个文章还有一个决定性的因素，群
·2023-01-16 09:10

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

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

threejs初识 | 大帅老猿threejs特训

threejs初识|大帅老猿threejs特训准备工作要安装three的npm模块，请在你的项目文件夹里打开终端窗口，并运行：npminstallthree引入头文件import*asTHREEfrom'three
·2023-01-16 09:37

Three.js和Blender入门元宇宙 | 大帅老猿threejs特训

一、元宇宙入门元宇宙的概念译自英语名词metaverse。其前缀“meta”有“元”之义，词根“verse”代表宇宙（universe），二者组合起来为“超越宇宙”，意即元宇宙，是利用互联网、软件、区块链等多种技术将现实与虚拟世界融合。苹果、微软、Facebook和华为等高科技公司都对元宇宙进行不同的诠释，让我们感到有点神秘又有一点模糊，学习胖达老师和大帅老师的组织Web3D实训，学习了从Thre
·2023-01-15 14:46

0基础搭建元宇宙看展效果 | 大帅老猿threejs特训

新的一年，从threejs开始吧~安装threejsnpmithree引入threejs//引用Threejsimport*asTHREEfrom'three';//引入GLTF加载器用于载入glTF资源
·2023-01-15 14:16

ThreeJS一盘魔性的甜甜圈 | 大帅老猿threejs特训

开场魔镜魔镜谁的代码写的最好，最烂的是你，最好的不知道。。。。。恍惚间进入了梦境，开场就是Blender咣当掉下一些超两米的甜甜圈，大喊赶紧完成任务不然下一个掉头上素材处理我丢这是哪个进程出了bug打开Blender一顿拖拽，分和，在磕磕盼盼中控制的了外星来的甜甜圈看着这甜甜圈似乎可以吃，离氛围还缺点场景，没有香槟还不能来点烛光跳动的甜圈刚好在搭建的three场景中增加一束光，照亮不起眼的床con
·2023-01-15 10:10

关于three.js的展厅项目的研究与总结 | 大帅老猿threejs特训

基础准备一、什么是threeThree.js是基于WebGL的javascript开源框架，是一个可以实现3D效果的JS库Three.js由场景（scene）、相机（camera）和渲染器（renderer）这三个最基础的组成。场景是展示内容的容器，而相机则是用来拍摄的工具，渲染器则是将Canvas进行绑定。二、介绍模板下载的网站https://sketchfab.com/这是一个有着大量资源的模
·2023-01-15 10:10

threejs 加载两个场景_用threejs和ammojs制作一个简单场景

本文的主要内容就是用three.js制作简单场景，并引入ammo.js物理引擎。bullet引擎和OpenGL结合创建简单的场景three.js和ammo.js创建简单的场景创建地形制作车辆柔体-绳索柔体-布料柔体-有体积的柔体使用blender引擎模拟物理场景本节目标是制作一个模板代码，后续开发都在这个模板的基础上继续开发。这一系列教程都是bullet物理引擎简易使用教程，不会涉及很多原理(比如
谭押沙龙·2023-01-14 19:47

第一天 Blender操作 | 大帅老猿threejs特训【超详细】

本人学习资料仓库https://gitee.com/zhang_dezhe...YCY-TrainingCamp-S2:在原有的文件上添加本人的学习记录第一天Blender操作|大帅老猿threejs特训
·2023-01-14 10:38

Web3D-从0开始学习Threejs+Blender实现甜甜圈掉落效果| 大帅老猿threejs特训

前言最近大帅邀请胖达老师带来了元宇宙实战特训，具体讲解了如何使用Blender进行3D建模、添加动画以及如何在Threejs中展示、控制3D模型，让我特别感慨，原来一些看似复杂的3D项目可以如此简单的实现
·2023-01-14 09:05

tree.js初体验 | 大帅老猿threejs特训

之前对Web3D并不了解，最近跟着大帅的训练营，通过三天的学习，了解了blender的操作和three.js。下面就用几十行js代码实现一个带动态效果的甜甜圈。准备模型获取：www.sketchfab.com模型处理：blendertree.js基础api基础场景scene：场景(容器)。newTHREE.Scene()camera：相机，决定了在场景中能看到什么。newTHREE.Perspec
·2023-01-13 18:38

threejs碰撞检测-前进后退，上下楼梯一口气搞定！

原文参考我的公众号文章#threejs碰撞检测-前进后退，上下楼梯一口气搞定！物体移动-前后碰撞检测主要还是依靠Raycaster(origin,direction)射线检测。
·2023-01-13 17:03

blender建模&threejs开发初体验

之前看到过threejs做的各种炫酷的案例，甚是有趣，一直打算自己也能写个demo尝试下，这次就跟着教程来学习下，小小的入个门。建模这次是用blender建的模，当然也可以用其他软件。
·2023-01-13 12:25

THREEJS 将构件缩放至视野中的方法

概述只将某个物体缩放至整个屏幕，十分常见的应用场景，这和相机视野有关，需要分透视相机和正交相机来分别说明。透视相机首先假定物体被相机视野覆盖，有如下图首先必须知道物体所在的包围球半径r,其次相机角度是已知的，就是camera.fov,fov是角度制数据，简单根据三角函数可以得出球心到相机的距离s。s=r/sin(fov)使用代码来表达就是constdir=newTHREE.Vector3(0,1,
·2023-01-12 02:25

使用 three.js 加载基本三维模型 | 大帅老猿threejs特训

如果你是初学者，那么学习三维动画可能是一项比较困难的任务。但是，使用three.js这个强大的JavaScript库，可以让你轻松地制作出精美的三维动画。首先，我们需要导入three.js库，并创建场景、相机和渲染器。场景是三维空间中所有物体的容器，而相机则决定了我们所看到的视角。渲染器则负责将场景呈现在屏幕上。接下来，我们可以使用OrbitControls插件来控制相机的位置和视角，并使用GLT
·2023-01-12 02:24

从0开始学习Three.js | 大帅老猿threejs特训

一、Three.js简介提到Three.js，不得不先提OpenGL和WebGL，OpenGL是一个跨平台的3D/2D的绘图标准（规范），WebGL（WebGraphicsLibrary）是一种3D绘图协议。WebGL允许把JavaScript和OpenGL结合在一起运用，但使用WebGL原生的API来写3D程序非常的复杂，同时需要相对较多的数学知识，对于开发者来说学习成本非常高。Three.js
·2023-01-12 02:24

第一天 Blender操作 | 大帅老猿threejs特训【超详细】

本人学习资料仓库https://gitee.com/zhang_dezhe...YCY-TrainingCamp-S2:在原有的文件上添加本人的学习记录第一天Blender操作|大帅老猿threejs特训
·2023-01-12 01:53

送你一个甜甜圈｜大帅老猿threejs特训

写在前面，这是第一次发表技术类文章，2022年本来给自己定了一个目标在掘金发表10篇技术类的文章。结果反正因为各种各样的原因，导致最后也没有完成，甚至都没有开始。2022年产出为0。这一次实战课程起因是在群里看到胖达老师做了一单，那金额着实让我羡慕呀。然后就在千呼万唤中，胖达老师准备出一个教程，带领大家入门之后并会出大教程，带领大家丰富致富手段。当然其实这次决定来写这个文章还有一个决定性的因素，群
·2023-01-12 01:52

three.js入门-一些基础理论｜大帅老猿threejs特训

前言参加了胖达老师的threejs直播课。有需要的视频私信取。本篇文章为入门理论部分。
·2023-01-12 01:51

three.js入门 掉落的甜甜圈实战 | 大帅老猿threejs特训

随着webGL的热度越来越高，作为一个老前端也想去学习一下，我选择入门three.js了解一下。webGL&Three.js简介WebGL是一项在浏览器体现3D画面的技术。是一种3D绘图标准，允许把JavaScript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染（部分计算GPU），这样W
·2023-01-11 17:25

Threejs+Blender实现甜甜圈掉落效果| 大帅老猿threejs特训

前言之前断断续续地跟着大帅浅学了一下threejs,投入精力不大却也学到了一些Threejs技巧和api。
·2023-01-09 18:12

THREEJS 相机控制旋转

自行实现相机控制中的旋转功能.相机控制旋转对于相机旋转比较好的是使用球坐标系，相对于直角坐标系而言，球坐标系用来描述旋转更加合适直观且对于方位角、极角而言属于线性改变。对于线性函数我们是非常喜欢的，因为线性代表简单，能用越简单的函数来描述关系的就越适合。再想一下如果使用笛卡尔坐标系来解决角度问题，那么一定是个三角函数，三角函数复杂度大于线性函数，这是我们不想看到的。下图所示是球坐标系示意图：代码解
·2023-01-09 12:02

THREEJS 相机控制旋转

自行实现相机控制中的旋转功能.相机控制旋转对于相机旋转比较好的是使用球坐标系，相对于直角坐标系而言，球坐标系用来描述旋转更加合适直观且对于方位角、极角而言属于线性改变。对于线性函数我们是非常喜欢的，因为线性代表简单，能用越简单的函数来描述关系的就越适合。再想一下如果使用笛卡尔坐标系来解决角度问题，那么一定是个三角函数，三角函数复杂度大于线性函数，这是我们不想看到的。下图所示是球坐标系示意图：代码解
·2023-01-09 12:31

THREEJS 将构件缩放至视野中的方法

概述只将某个物体缩放至整个屏幕，十分常见的应用场景，这和相机视野有关，需要分透视相机和正交相机来分别说明。透视相机首先假定物体被相机视野覆盖，有如下图首先必须知道物体所在的包围球半径r,其次相机角度是已知的，就是camera.fov,fov是角度制数据，简单根据三角函数可以得出球心到相机的距离s。s=r/sin(fov)使用代码来表达就是constdir=newTHREE.Vector3(0,1,
·2023-01-09 12:30

Blender探索笔记 | 大帅老猿threejs特训

前言精彩的世界杯决赛期间，参与了胖达老师基于Three.js&Blender的元宇宙搭建入门实训，趁着年前还有点记忆，来做个笔记。本来想在这篇笔记里面完整记下整个流程，但是篇幅实在太长了，本文暂时以Blender探索为主。基础环境搭建Three.js提供的API是可以让我们基于原生JavaScript随便玩的，但是为了让我们能在VSCode环境下有更好的代码提示和热更新，我们可以把Vite和Typ
·2023-01-09 12:30

Threejs及TypeScript教程

Threejs及TypeScript教程学习Threejs、TypeScript和NodeJS在网络上创建交互式3D内容课程英文名：Three.jsandTypeScrip此视频教程共6.0小时，中英双语字幕
IT教程精选·2023-01-08 21:02

THREE.js设置背景图和播放动画学习 | 大帅老猿threejs特训

THREE.js设置背景图和播放动画学习|大帅老猿threejs特训本文能学到什么作者的three.js属于入门的，最近跟着大帅的训练营，学习了three.js如何设置全景图背景和播放动画，本文章使用的模型和图片都是事先提供好的
·2023-01-08 17:12

three+blender+react，实现一些简单功能｜大帅老猿threejs特训

想着做不同的，那么就用框架不一样吧，利用vite搭建的react项目，下载threeJs安装包书写。
·2023-01-06 23:55

教你如何使用blender+threejs搭建一个3d展厅平台 | 大帅老猿threejs特训

效果图页面预览链接(服务器配置比较低，加载视频会比较慢，请耐心等候)：https://static-8f957b23-c692-...相关链接整理胖达老师threejs、blender搭建元宇宙基础交互直播教学回放链接
·2023-01-05 10:10

0基础实现人物看展特效|大帅老猿threejs特训

一.搭建最简易的基础场景关于threejs基本知识：场景scene摄像机camera渲染器renderer几何体geometry//引入three.jsimport*asTHREEfrom'three'
·2023-01-05 10:39

元宇宙基础案例|大帅老猿threejs特训

day01作业打卡WebGL简介WebGL（全写WebGraphicsLibrary）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。WebGL使用需要
·2022-12-31 19:41

从甜甜圈到数字孪生| 大帅老猿threejs特训

大家好，我是梦起，今天和大家一起来学习ThreeJs，早日实现ThreeJs自由。
·2022-12-31 19:41

ThreeJS学习记录（二）立方体不同面不同图片

学习点一：material数组在设置Mesh的时候，第一个参数是几何体，第二个参数就是材质。根据官方文档看，第二个参数可以是一个数组。也就是说可以设置几何体不同面的材质图片。学习点二：白色是透明度为0，黑色是透明度为1，透明呢？设置material时，图片白色的地方会透出材质的颜色，黑色地方不会。对比下，给material的color设置青色后：学习点三：顺序长/正方体：右、左、上、下、前、后椭圆
·2022-12-31 19:11

Day 100/100 ThreeJs 如何废置对象？

（一）需求每当你创建一个three.js中的实例时，都会分配一定数量的内存。因此，在项目中，会有很多加载资源比较大情况，为了提高性能，并避免应用程序中的内存泄露，因此需要废置未使用的类库实体。然而，three.js会创建在渲染中所必需的特定对象，例如几何体或材质，以及与WebGL相关的实体，例如buffers或着色器程序。非常值得注意的是，这些对象并不会被自动释放；相反，应用程序必须使用特殊的AP
·2022-12-31 19:40

使用 three.js 加载基本三维模型 | 大帅老猿threejs特训

如果你是初学者，那么学习三维动画可能是一项比较困难的任务。但是，使用three.js这个强大的JavaScript库，可以让你轻松地制作出精美的三维动画。首先，我们需要导入three.js库，并创建场景、相机和渲染器。场景是三维空间中所有物体的容器，而相机则决定了我们所看到的视角。渲染器则负责将场景呈现在屏幕上。接下来，我们可以使用OrbitControls插件来控制相机的位置和视角，并使用GLT
·2022-12-31 19:39
上一页 11 12 13 14 15 16 17 18 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他