全真王重阳
编程改变命运,励志照亮人生
展开
-
【three.js案例二】时空隧道
【代码】【three.js案例二】时空隧道。原创 2024-06-30 12:49:34 · 101 阅读 · 0 评论 -
【three.js】生成点并连线的两种方式
【代码】【three.js】生成点并连线的两种方式。原创 2024-06-18 21:13:57 · 183 阅读 · 0 评论 -
【three.js】设置canvas画布背景透明
通过Three.js渲染一个模型的时候,不希望canvas画布有背景颜色,也就是canvas画布完全透明,可以透过canvas画布看到画布后面叠加的HTML元素图文,呈现出来一种三维模型悬浮在网页上面的效果。比如我们现在的模型背景是黑色的,非常不美观,我们想把背景变透明,如何做呢?有时我们不想变透明,只想换一个别的颜色,那么如何改呢?原创 2024-06-16 19:25:55 · 444 阅读 · 0 评论 -
【three.js】如何加载外部gltf模型
你在three.js官方文件的**examples/jsm/loaders/**目录下,可以找到一个文件,这个文件就是three.js的一个扩展库,专门用来加载gltf格式模型加载器。原创 2024-06-16 10:40:29 · 271 阅读 · 0 评论 -
【three.js】克隆.clone()和复制.copy()
克隆.clone()、复制.copy()是threejs很多对象都具有的方法,比如三维向量对象Vector3、网格模型Mesh、几何体、材质。原创 2024-06-15 20:01:04 · 276 阅读 · 0 评论 -
【three.js】旋转、缩放、平移几何体
BufferGeometry通过.scale().rotateX().rotateY()等方法可以对几何体本身进行缩放、平移、旋转,这些方法本质上都是改变几何体的顶点数据。我们先创建一个平面物体,样子是这样的。原创 2024-06-15 11:08:04 · 262 阅读 · 0 评论 -
【three.js案例一】智慧星球
three.js实现智慧星球原创 2024-06-15 10:47:55 · 684 阅读 · 0 评论 -
【three.js】自定义物体形状BufferGeometry
threejs的长方体、球体等几何体都是基于类构建的,BufferGeometry是一个没有任何形状的空几何体,你可以通过BufferGeometry自定义任何几何形状,具体一点说就是定义。这段代码意思很简单,其实就是先创建一个BufferGeometry空的几何体,然后自定义一个顶点数组,里面包含着你几何体各个顶点的位置(xyz),然后再为这些顶点设置材质(大小、颜色)。原创 2024-06-15 09:33:05 · 111 阅读 · 0 评论 -
【three.js】gui.js库(可视化改变三维场景)
说白了就是一个前端js库,对HTML、CSS和JavaScript进行了封装,学习开发的时候,借助可以快速创建控制三维场景的UI交互界面。原创 2024-06-14 21:57:33 · 61 阅读 · 0 评论 -
【three.js】设置three.js全屏展示,并解决大小动态变化
我们需要监听浏览器大小的变化,代码如下,当浏览器尺寸发生变化,相机的参数也要跟着变化。比如我把浏览器缩小,可以看出三维图并没有跟着自适应。这个很简单,直接用代码读取当前全屏需要的长宽即可。原创 2024-06-12 21:22:22 · 467 阅读 · 0 评论 -
【three.js】如何使物体进行匀速动画旋转?
我们都知道 renderer.render(scene, camera);这句代码的意思类似于照相机咔嚓的照张照片。我们小时候看的动画片基本上都是由很多张照片来拼接的。requestAnimationFrame(render)代表再次请求render()函数,有点像递归。整体意思就是物体每旋转0.01弧度就照一张照片渲染给我们显示,然后循环这个动作。threejs可以借助HTML5的API请求动画帧。原创 2024-06-12 21:01:39 · 206 阅读 · 0 评论 -
【three.js】光源对物体表面影响
点光源PointLight可以类比为一个发光点,就像生活中一个灯泡以灯泡为中心向四周发射光线。//点光源:两个参数分别表示光源颜色和光照强度// 参数1:0xffffff是纯白光,表示光源颜色// 参数2:1.0,表示光照强度,可以根据需要调整。原创 2024-06-11 22:30:50 · 225 阅读 · 0 评论 -
【three.js】如何旋转、缩放、拖动模型?
这里我们需要用到相机控件OrbitControls。原创 2024-06-11 22:04:47 · 329 阅读 · 0 评论 -
Vue整合three.js 环境从头搭建 详细教程
首先我们要有nodejs环境,这里我们用的是17.1.0版本。原创 2024-03-03 12:07:47 · 647 阅读 · 0 评论 -
【three.js】Camera相机四大参数详解
第三个参数和第四个参数就是近端面和远端面,比如我们分别设置是1和3000,相机的位置是(-1000,0,0),那么近端面的位置就是(-999,0,0),远端面的位置就是(2000,0,0)。,在两个面之间,我们能看到网格模型,如果网格模型在两个面外,那么你是看不到的。第二个参数我们不多介绍,就是长宽比,一般长宽就是你画布的长宽。先说一个概念,threejs中的相机其实就是一个。我们设置的是30度,当我们调大或者调小来看看效果。near — 摄像机视锥体近端面。far — 摄像机视锥体远端面。原创 2024-03-03 10:53:11 · 754 阅读 · 0 评论 -
【three.js】手把手带你理解制作一个3D场景 超级详细
其实你可以想象一个场景,你在你的屋子(场景)里,有个凳子(物体),但如果我们不看,是不是就相当于没有?你可以想象一下,一个物体是不是必须要存在于某个场景中,比如我要制作房间里的凳子,那么房间就是场景,物体必须存在于场景中。很好理解,创建完模型,当然要加到场景中,相当于制作个凳子,我要把它放在屋子中。有了几何体,是不是还要对几何体进行材质的设置,比如你的凳子是什么颜色的。其实这个网格模型才是真正的我们要展示到页面物体,可以设置物体的位置。这块很好理解,就是将创建的场景和相机渲染到页面中,进行展现。原创 2024-03-02 11:05:01 · 260 阅读 · 0 评论 -
【three.js】搭建本地静态服务器 查询API文档使用
因为threejs每月更新的时候,API会有变化,但我们项目的threejs版本是基本上不会变的,所以本地有个对应固定版本的API文档服务器很重要。github链接查看所有版本threejs:https://github.com/mrdoob/three.js/releases。想要运行刚才下载的three.js文件包,vscode需要下载live-server插件。选择你需要的版本three.js文件包下载,然后解压。这样我们就可以随时随地的查看文档喽!的开发环境,这样方便查询。用vscode打开即可。原创 2024-03-02 08:52:58 · 213 阅读 · 0 评论 -
本地搭建three.js官方文档
因为three.js官网文档是国外的网站,所以你没有魔法的情况下打开会很慢,这时我们需要在本地搭建一个官方文档便于我们学习查看。使用vscode或者webstorm打开项目。首先我们先访问GitHub地址。原创 2024-02-13 17:05:19 · 411 阅读 · 0 评论 -
three.js 细一万倍教程 从入门到精通(三)
直接照明、间接照明、直接高光、间接高光、阴影、环境光闭塞。基础色、法线、高光、粗糙度、金属度。原创 2024-02-13 16:31:22 · 99 阅读 · 0 评论 -
three.js 细一万倍教程 从入门到精通(二)
当一个纹素覆盖大于一个像素时,贴图将如何采样,默认值为THREE.LinearFilter,它将获取四个最接近的纹素。另一个是THREE.NearestFilter,它将使用最接近纹素的值。原创 2024-02-12 19:16:48 · 207 阅读 · 0 评论 -
three.js 细一万倍教程 从入门到精通(一)
首先,我们的render函数有个默认的参数time,代表每一帧的时间,如果你打印会发现每一帧的时间都不太匀速,比如我们上面这个案例,x轴长度为5,假如我打算1秒运动长度1,匀速就是5秒完成,但打印结果并不是匀速的。power1.inOut:在动画开始和结束时,属性的变化速度较慢,然后在动画的中间阶段达到最快的变化速度。很多时候我们调试3D图像很麻烦,普遍都是改完代码然后看页面效果,而dat.gui就大大简化了我们的操作问题。红色代表X轴,绿色代表Y轴,蓝色代表Z轴。原创 2024-02-12 12:29:36 · 1033 阅读 · 0 评论