2024-08-24 23:08:54
22
782
很多教程一开始要大家自己部署three.js的中文本地部署,我就不弄了,我弄了半天也没弄出来烦了,反正我也不爱看官方文档我就不弄了,直接开干。另外本人学的前端,习惯用vue就以vue的开发框架做基础引入three.js了。_threejs
2024-08-16 22:08:36
615
426
Three.js 是一个跨浏览器的脚本,使用 JavaScript 函数库或 API 来在网页浏览器中创建和展示动画的三维计算机图形。写这篇文章也是因为目前越来越多的3dweb出现,three.js使用的频率也越来越高,自己也是边学习边记录,所以打算开一个关于three的专栏,谈不上经验分享,一起学习一起进步,与君共勉!_vue使用three.js
2024-07-21 00:07:27
390
753
在`Three.js`中,使用`CSS3DRenderer`和`CSS3DSprite`可以轻松地实现模型标签文字的效果,为场景中的模型提供更直观的信息展示。本文将介绍如何使用这两个工具来实现模型标签文字,并提供相应的代码示例。_css3drenderer
2024-07-20 17:07:34
420
802
3. 针对模型中的每个物体的每个面进行Ammo物理构建。5. 创建篮球 设置篮球的球体Ammo数据。6. 按住键盘蓄力,抬起键盘投篮。2. 加载球架和场地模型。_ammo.js可以做什么
2024-06-22 01:06:49
872
435
本篇文章介绍基础纹理、凹凸纹理、法向纹理、环境贴图、canvas 贴图的基本使用,及对比效果..._three如何设置纹理的凹凸效果
2024-06-18 00:06:05
419
400
什么是three.js :前端3D框架 ( 绘制3D的js轻量级框架 采用HTML5 Canvas提供硬件3D加速渲染)应用场景:VR模型、地图、家装,机房、厂房等_three.js 郭隆邦 资源
2024-06-10 11:06:52
876
916
本篇文章介绍tween动画的使用、如何进行光线投射拾取物体、加载外部城市模型文件、使用相机控制器多角度观察城市模型等..._three.js 点击模型 tween移动到 模型
2024-06-02 09:06:30
1103
115
Three.js 可以让我们在网页上创建交互式的 3D 图形和动画。它是一个强大的 JavaScript 库,可以帮助我们轻松地在浏览器中实现复杂的 3D 效果,而无需深入了解底层的 WebGL 技术。如果你需要在网页上展示 3D 内容或者构建交互式的3D体验, Three.js 是一个非常有用的工具。今天通过 Vue3.0 集成 Three.js 来实现对 gltf 模型的加载、渲染与操控,并设置模型背景为透明色,解决模型为黑色的问题。_vue threejs 加载模型偏暗
2024-05-30 10:05:56
107
866
解决方法是搭建一个本地服务器,然后从这个服务器访问这个html文件,这样html和其他资源文件,会被浏览器判定为同一个域。首先下载node.js的windows安装包,安装完以后,打开命令行,查询两个版本号,如果没有报错,就说明node.js和npm都安装好了。这个问题是怎么来的?然后打开我们的html文件就可以了,这时html中的js要访问这个文件夹及其子文件夹下的文件,就不会报错了。还有个问题就是,当修改了html文件以后,浏览器中的文件并不会更新,需要打开html并刷新页面才行。_html读跨域
2024-05-28 09:05:39
202
282
今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。_threejs实现3d场景登录页面
2024-05-10 22:05:17
23
218
Threejs实现中国3D地图,CSS3DSprite标签,自定义标签,地图飞线,效果如下图Three.js 实现中国 3D 地图能够为用户提供沉浸式的地理信息体验。通过 Three.js,我们能够以令人惊叹的方式呈现地球表面的地图,让用户可以在虚拟世界中探索中国各个地区。CSS3DSprite 标签是一个强大的功能,它能够让我们在 Three.js 场景中轻松创建和管理 2D 元素。_three 中国3d地图模型
2024-05-09 10:05:47
722
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
396
491
今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。
2024-05-06 08:05:39
293
174
本篇文章介绍three.js的材质,包括基础材质、深度材质、法向材质、面材质、朗伯材质、Phong材质、着色器材质、直线和虚线、联合材质等的使用...
2024-05-03 18:05:31
449
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
998
483
本文主要介绍如何在模型上不同的面设置不同的图片,如何解决项目中常见的问题:每个面都是同一张图片?不同的图片放不同的面? 图片如何在模型上进行x轴y轴平铺? 立方体纹理加载器和环境纹理加载器的区别?
2024-03-29 15:03:30
71
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
94
498
three.js下使用OrbitControls控制器后修改相机旋转角度。_three.js camera 旋转
2024-02-11 10:02:54
626
580
Three.js不同模型在不同轨道上的动画和移动_js 模拟火车在轨道轨迹点行进的效果
2024-02-04 21:02:58
700
305
在three.js场景中,要彻底删除外部模型,需要执行以下几个步骤:从场景中移除模型你可以使用或者将模型从场景中移除。如果是多个模型,可以用循环来处理。移除所有材质和纹理模型通常会包含材质和纹理,即使你把它们从场景中移除了,它们也仍然存在于内存中,所以你需要将它们全部移除。如果模型有多个材质和纹理,同样需要使用循环来处理。释放几何体和缓冲属性在 WebGL 中,几何体和缓冲属性是直接存储在 GPU 中的,所以你需要手动释放它们以释放内存。_threejs 删除模型
2024-02-01 12:02:03
1130
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
821
54
优化方法是根据chatGPT的回答下,我这里记录一下,有的方法进行了尝试,有的还没有。_threejs 加载模型卡顿
2024-01-27 00:01:39
629
341
它提供了一套强大的工具和API,可用于创建各种类型的高性能、交互式地理空间数据可视化,包括地图、图表、散点图、热力图、路径图、3D建筑等。它提供了一组简单易用的组件和API,包括物理引擎、碰撞检测、光照、材质、声音、特效等功能,可用于创建高品质的3D游戏和应用程序。它提供了丰富的地图和数据源,包括卫星图像、地形、天气、人口、交通等,可用于创建全球范围的可视化和交互式应用程序。Three.js:Three.js是一个流行的3D库,提供了大量的3D功能,包括基本几何形状、材质、灯光、动画、特效等。_前端3d框架
2024-01-26 00:01:01
853
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场景效果的开发。
热门排行