threeJs

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

【微信小程序】【AR】threejs-miniprogram 安装(76/100）

配置threejs-miniprogram环境搭建node环境初始化node工程npminit导入threejs-miniprogramnpmithreejs-miniprogram注意：安装threejs-miniprogram
lichong951·2022-12-30 16:01

微信小程序导入three.js

例子：GitHub-wechat-miniprogram/threejs-miniprogram:WeChatMiniProgramadaptedversionofThree.js重点是：1.解压后要在根目录下运行
海里的鱼2022·2022-12-30 16:01

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

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

Three.js元宇宙实战特训营 | 大帅老猿threejs特训

Three.js元宇宙实战特训营|大帅老猿threejs特训最终效果废话不多说，先来看下最终效果这个就是本次特训营的最终案例，可以操作人物在指定的空间里走动。
·2022-12-29 12:51

Threejs3D炫酷地图

打造炫酷的地图板块项目场景：通过三维建模技术实现一个炫酷的城市地图的展示#场景制作流程章节目录提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录如何用THREE.js打造炫酷的地图板块项目场景：前言一、ThreeJs
米大饭·2022-12-27 13:14

html5 画布3d游戏开发,设计师怎么玩转Html5 3D游戏，一款让开发都折服的H5

第一次接触webgl还是去年的天猫活动，记得当时网上好多人疯狂转载，因为是国内第一次出现，所以大家觉得挺新鲜的，后来我了解到原来使用的是threejs的第三方库。
柯恩·2022-12-27 13:43

100行JS实现HTML5的3D贪吃蛇游戏

自己写不出来，站在巨人肩膀总是有机会吧，想起《基于HTML5的电信网管3D机房监控应用》这篇提到的threejs，babylon
weixin_33815613·2022-12-27 13:43

threejs创建3d地图

基本思路使用threejs创建3d地图注意的组要是以下几点。GeoJson数据规范，尤其是面状Feature的数据结构特点，可参考官网：https://geojson.org/。
jackeroo1997·2022-12-27 13:09

threejs实现地图

方式2GEOJSON，可实现地图方式3three-geo实现threejs+地图threegeo官网https://www.npmjs.com/package/three-geo注意事项：1在https
搬砖小田·2022-12-27 13:09

threejs三维地图大屏项目分享

这是最近公司的一个项目。客户的需求是基于总公司和子公司的数据，开发一个数据展示大屏。大屏两边都是一些图表展示数据，中间部分是一个三维中国地图，点击中国地图的某个省份，可以下钻到省份地图的展示。地图上，会做一些数据的标注，信息标牌。如下图所示：本文将对一些技术原理进行分享。2d图表2d图表部分，主要通过echart图表进行开发，另外还会涉及到一些icon文字的展示。这个部分相信大部分前端人员都知道如
netcy·2022-12-27 13:08

threejs生成3d地图所需

threejs生成3d地图所需1、threejs，郭龙邦弄的教程熟悉形状、线绘制，绘制白模楼宇熟悉sprite，用以做POI标注熟悉光照熟悉LOD，用以远近不同时加载不同物体、地面熟悉漫游控制；可能用到正交
思依_xuni·2022-12-27 13:08

使用Threejs自己画一个河南省地图（超简单）

使用技术：根据经纬度坐标集合，使用形状几何体ShapeGeometry绘制根据包围盒大小设置正投影相机位置系数下面以河南省为例：//河南边界轮廓坐标vararr=[[110.3906,34.585],[110.8301,34.6289],[111.1816,34.8047],[111.5332,34.8486],[111.7969,35.0684],[112.0605,35.0684],[112.
李刚大人·2022-12-27 13:37

基于ThreeJs的一些开源地图项目

因为工作需要，此段时间以来接触到了一些Three.js，不成熟的见解，ThreeJs相较于Cesium其美观度应该是要高一些的，因此也有了一些Cesium结合Threejs的开发案列，这个在Cesium
LongJ_Sir·2022-12-27 13:36

Threejs开发3D地图实践总结

前段时间连续上了一个月班，加班加点完成了一个3D攻坚项目。也算是由传统web转型到webgl图形学开发中，坑不少，做了一下总结分享。1、法向量问题法线是垂直于我们想要照亮的物体表面的向量。法线代表表面的方向因此他们为光源和物体的交互建模中具有决定性作用。每一个顶点都有一个关联的法向量。如果一个顶点被多个三角形共享，共享顶点的法向量等于共享顶点在不同的三角形中的法向量的和。N=N1+N2;所以如果不
Joker_Ye·2022-12-27 13:35

【threejs】可视化大屏酷炫3D地图附源码

取消地图上柱状图显示3.更换地图、更换省份、市4.修改相机的视角，页面展示的远近角度5.修改地图的颜色及贴图6.关闭一些特效7.页面适配和在vue2版本中使用3.源码效果如下：1.前言：本文主要说明使用threejs
接着奏乐接着舞。·2022-12-27 13:31

数据同步推送，uniCloud云开发，Threejs

一、数据同步推送a.轻量级：SSE（Server-sentEvents）视频参考：《【IT老齐237】超好用Web服务端主动推送技术SSE》文档：《SSE技术详解：使用HTTP做服务端数据推送应用的技术》实际演示如：ithome软媒的服务端推送：https://www.ithome.com/news/n...服务端'usestrict';consthttp=require('http');http
·2022-12-27 10:29

Blender基础建模 | 大帅老猿threejs特训

最近接触到了web3d相关的知识，特别感觉“大帅老猿”和“胖达老师”带我入门！今天来和大家一起讲讲我建模的故事！顺便教大家一起实现建模自由！一、首先下载一个免费软件Blender，知道为什么用它吧？因为免费！！！作为白嫖党怎么可能放着免费的东西哈哈！二、新建一个免费的文件刚建好它是这样子的：虽然它给我们预置了一个正方体、一个相机、一个光，但是吧我们就是不用它的，诶嘿，我们右上角右击给它删了。然后我
·2022-12-23 15:50

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

大家好，我是梦起，今天和大家一起来学习ThreeJs，早日实现ThreeJs自由。
·2022-12-22 17:30
上一页 11 12 13 14 15 16 17 18 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他