2024-08-24 23:08:54
19
782
很多教程一开始要大家自己部署three.js的中文本地部署，我就不弄了，我弄了半天也没弄出来烦了，反正我也不爱看官方文档我就不弄了，直接开干。另外本人学的前端，习惯用vue就以vue的开发框架做基础引入three.js了。_threejs
2024-08-16 22:08:36
611
426
Three.js 是一个跨浏览器的脚本，使用 JavaScript 函数库或 API 来在网页浏览器中创建和展示动画的三维计算机图形。写这篇文章也是因为目前越来越多的3dweb出现，three.js使用的频率也越来越高，自己也是边学习边记录，所以打算开一个关于three的专栏，谈不上经验分享，一起学习一起进步，与君共勉!_vue使用three.js
2024-07-21 00:07:27
378
753
在`Three.js`中，使用`CSS3DRenderer`和`CSS3DSprite`可以轻松地实现模型标签文字的效果，为场景中的模型提供更直观的信息展示。本文将介绍如何使用这两个工具来实现模型标签文字，并提供相应的代码示例。_css3drenderer
2024-07-20 17:07:34
417
802
3. 针对模型中的每个物体的每个面进行Ammo物理构建。5. 创建篮球 设置篮球的球体Ammo数据。6. 按住键盘蓄力，抬起键盘投篮。2. 加载球架和场地模型。_ammo.js可以做什么
2024-06-22 01:06:49
864
435
本篇文章介绍基础纹理、凹凸纹理、法向纹理、环境贴图、canvas 贴图的基本使用，及对比效果..._three如何设置纹理的凹凸效果
2024-06-18 00:06:05
416
400
什么是three.js ：前端3D框架 （ 绘制3D的js轻量级框架 采用HTML5 Canvas提供硬件3D加速渲染）应用场景：VR模型、地图、家装，机房、厂房等_three.js 郭隆邦 资源
2024-06-10 11:06:52
873
916
本篇文章介绍tween动画的使用、如何进行光线投射拾取物体、加载外部城市模型文件、使用相机控制器多角度观察城市模型等..._three.js 点击模型 tween移动到 模型
2024-06-02 09:06:30
1088
115
Three.js 可以让我们在网页上创建交互式的 3D 图形和动画。它是一个强大的 JavaScript 库，可以帮助我们轻松地在浏览器中实现复杂的 3D 效果，而无需深入了解底层的 WebGL 技术。如果你需要在网页上展示 3D 内容或者构建交互式的3D体验， Three.js 是一个非常有用的工具。今天通过 Vue3.0 集成 Three.js 来实现对 gltf 模型的加载、渲染与操控，并设置模型背景为透明色，解决模型为黑色的问题。_vue threejs 加载模型偏暗
2024-05-30 10:05:56
106
866
解决方法是搭建一个本地服务器，然后从这个服务器访问这个html文件，这样html和其他资源文件，会被浏览器判定为同一个域。首先下载node.js的windows安装包，安装完以后，打开命令行，查询两个版本号，如果没有报错，就说明node.js和npm都安装好了。这个问题是怎么来的？然后打开我们的html文件就可以了，这时html中的js要访问这个文件夹及其子文件夹下的文件，就不会报错了。还有个问题就是，当修改了html文件以后，浏览器中的文件并不会更新，需要打开html并刷新页面才行。_html读跨域
2024-05-28 09:05:39
201
282
今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。_threejs实现3d场景登录页面
2024-05-10 22:05:17
20
218
Threejs实现中国3D地图，CSS3DSprite标签，自定义标签，地图飞线，效果如下图Three.js 实现中国 3D 地图能够为用户提供沉浸式的地理信息体验。通过 Three.js，我们能够以令人惊叹的方式呈现地球表面的地图，让用户可以在虚拟世界中探索中国各个地区。CSS3DSprite 标签是一个强大的功能，它能够让我们在 Three.js 场景中轻松创建和管理 2D 元素。_three 中国3d地图模型
2024-05-09 10:05:47
720
670
今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。_three.js时间轴
2024-05-08 10:05:11
569
128
在学习了一些理论知识后，要做一下实战演练了，做一个简单的车辆展览。通过切换相机位置和调整相机焦点，从不同角度对车辆进行观察。
2024-05-07 13:05:17
46
346
Three.js 是一款基于 WebGL的 JavaScript 3D 库，它封装了 WebGL API，为开发者提供了简单易用的 API 来在 Web 浏览器中展示 3D 图形。Three.js 提供了多种组件、方法和工具，用于创建和处理 3D 图形，使得开发者可以在 Web 浏览器中快速创建 3D 场景和动画，而不需要深入了解 WebGL 的底层实现。简单来说：它就是一个绘制 3D 的 javaScript 轻量级框架；_vue three.js
2024-05-06 08:05:41
394
491
今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。
2024-05-06 08:05:39
291
174
本篇文章介绍three.js的材质，包括基础材质、深度材质、法向材质、面材质、朗伯材质、Phong材质、着色器材质、直线和虚线、联合材质等的使用...
前端知识
vue2/3 - three.js使用CSS3DObjec缩放浏览器改变宽高时位置偏移问题，当浏览器进行缩放导致尺寸变化后页面位置乱了偏移，vue three.js CSS3DObjec（详细解决方法
2024-05-03 18:05:31
441
707
vue2，vue3，three，CSS3DObject，Three.js,缩放对象时发生意外的位置偏移，vue three.js CSS3DObject偏移，Three.js,缩放对象时发生意外的位置偏移，【threejs】防止浏览器窗口缩放时物体变形，Three.js针对浏览器变动进行自适应_three.js 适配移动端，Three.js浏览器窗口尺寸变化(自适应渲染)，three鼠标位置偏移问题_three.js全景图点位偏移问题，操作threejs对象那样来操作div,three.js CSS3DOb_vue放缩后组件错位
2024-04-30 12:04:48
992
483
本文主要介绍如何在模型上不同的面设置不同的图片，如何解决项目中常见的问题：每个面都是同一张图片？不同的图片放不同的面？ 图片如何在模型上进行x轴y轴平铺？ 立方体纹理加载器和环境纹理加载器的区别？
2024-03-29 15:03:30
70
845
如果我们想要不断的渲染，让它动起来，看到它不同方位的形状，需要调用渲染函数，如下所示。效果：由于我们设置的是从z轴看这个正方体，因此正对z轴看到的是平面。此时就完成了在vue中开发的一个简单的3d页面。回车后，依次输入项目名，选择vue和Js开发。新建一个项目目录，在集成终端打开，输入。将上面的静态渲染改为下面的旋转动画渲染。接下来我们开始安装three。然后安装依赖并运行项目。_vue 3d
2024-03-15 10:03:56
440
919
我们用three.js可以绘制出各种酷炫的画面，但是当我们想要一个更加真实的物理效果的话，这个时候我们就需要一个物理的库，接下来我们就讲解一下今天要学习的canon，它可以给我们提供一个更加真实的物理效果，像物体的张力、摩擦力、拉伸、反弹等等各种真实的物理效果。该库都能够有一个非常好的模拟。
2024-03-15 10:03:32
335
863
我们用three.js可以绘制出各种酷炫的画面，但是当我们想要一个更加真实的物理效果的话，这个时候我们就需要一个物理的库，接下来我们就讲解一下今天要学习的canon，它可以给我们提供一个更加真实的物理效果，像物体的张力、摩擦力、拉伸、反弹等等各种真实的物理效果。该库都能够有一个非常好的模拟。
2024-03-10 11:03:02
413
87
本节课没有具体的代码，就是给大家科普一下PBR材质，所谓PBR就是，基于物理的渲染(physically-based rendering)。Three.js提供了两个PBR材质相关的API和是扩展的子类，提供了更多功能属性。_网页3d展示效果
2024-02-24 14:02:42
91
498
three.js下使用OrbitControls控制器后修改相机旋转角度。_three.js camera 旋转
2024-02-11 10:02:54
618
580
Three.js不同模型在不同轨道上的动画和移动_js 模拟火车在轨道轨迹点行进的效果
2024-02-04 21:02:58
698
305
在three.js场景中，要彻底删除外部模型，需要执行以下几个步骤：从场景中移除模型你可以使用或者将模型从场景中移除。如果是多个模型，可以用循环来处理。移除所有材质和纹理模型通常会包含材质和纹理，即使你把它们从场景中移除了，它们也仍然存在于内存中，所以你需要将它们全部移除。如果模型有多个材质和纹理，同样需要使用循环来处理。释放几何体和缓冲属性在 WebGL 中，几何体和缓冲属性是直接存储在 GPU 中的，所以你需要手动释放它们以释放内存。_threejs 删除模型
2024-02-01 12:02:03
1099
355
在前面我们实现了PCD的加载器的基础上，这次将加上 ==**pcl.js**== —— 著名的PCL库的web版本，详情见https://pcl.js.org/，来处理我们加载上去的点云。1. **点云过滤示例1：**统计离群值移除算法2. **点云关键点提取示例2：**应用 ISS（Intrinsic Shape Signatures） 算法进行关键点提取**最小切割示例3：**最小切割算法_web 3d点云
2024-01-27 00:01:39
804
54
优化方法是根据chatGPT的回答下，我这里记录一下，有的方法进行了尝试，有的还没有。_threejs 加载模型卡顿
2024-01-27 00:01:39
621
341
它提供了一套强大的工具和API，可用于创建各种类型的高性能、交互式地理空间数据可视化，包括地图、图表、散点图、热力图、路径图、3D建筑等。它提供了一组简单易用的组件和API，包括物理引擎、碰撞检测、光照、材质、声音、特效等功能，可用于创建高品质的3D游戏和应用程序。它提供了丰富的地图和数据源，包括卫星图像、地形、天气、人口、交通等，可用于创建全球范围的可视化和交互式应用程序。Three.js：Three.js是一个流行的3D库，提供了大量的3D功能，包括基本几何形状、材质、灯光、动画、特效等。_前端3d框架
2024-01-26 00:01:01
852
53
three.js中使用requestAnimationFrame来实现动画的渲染，而不使用setInterval实现。requestAnimationFrame告诉浏览器希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。通俗点讲就是该API的调用频率取决于浏览器的刷新率，也就是说浏览器屏幕刷新多少次，它就执行多少次，一般为每秒60次，可以将其理解为专门用来实现动画效果的api，让浏览器流畅的执行动画效果。
2024-01-24 15:01:26
906
812
讲到Three.js，就需要先说一下OpenGL和WebGL，OpenGL是一个跨平台的3D/2D的绘图标准，WebGL是一种3D绘图协议，它允许把JavaScript和OpenGL 结合在一起运用，但使用WebGL原生的API来写3D程序非常的复杂，对于前端开发者来说学习成本非常高。Three.js是WebGL的JavaScript 3D库，其对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，让开发者能更快速的进行3D场景效果的开发。