![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Three.JS
文章平均质量分 86
three.js相关知识,学好页面3D
空城机
光阴雕琢生命,岁月磨砺人生
成为一个普通的上班族
展开
-
Three.js杂记(十五)—— 汽车展览(下)
本文主要对导入的3D模型自带动画的使用,以汽车展示为例子,通过切换不同的动画剪辑clipAction来播放动画,并设置动画的起始时间和结束时间调整显示效果原创 2024-04-29 10:34:15 · 1436 阅读 · 0 评论 -
Three.js杂记(十四)———— 汽车展览·上
在学习了一些理论知识后,要做一下实战演练了,做一个简单的车辆展览。通过切换相机位置和调整相机焦点,从不同角度对车辆进行观察。原创 2024-04-29 10:24:48 · 1434 阅读 · 0 评论 -
Three.js杂记(十三)—— 包围盒
ThreeJs包围盒Box按照字面理解就是包围一个物体的盒子,那就是一个长方形空间。可以用于碰撞检测、物体选择、可视化剔除等功能。原创 2024-04-29 10:08:35 · 1263 阅读 · 0 评论 -
Three.js杂记(十二)—— VR全景效果制作·中
在web的前端发展过程中《Three.js杂记(七)—— 全景效果制作·上(含python爬虫偷碎图,canvas重组图片)》原创 2021-06-15 08:41:31 · 3300 阅读 · 174 评论 -
Three.js杂记(十一)—— 精灵与粒子(绘制中国地图)
精灵模型Sprite精灵模型Sprite简介Sprite和SpriteMaterialSprite用途练习:中国城市粒子地图地图数据精灵模型Sprite简介精灵模型对象Sprite。精灵模型对象和网格模型一样需要设置材质,不过精灵模型不需要程序员设置几何体,Threejs系统渲染的时候会自动设置。通过Threejs精灵模型可以给场景中模型对象设置标签,也可以生成大量精灵模型对象模拟一个粒子系统Three.js的精灵模型对象Sprite和Threejs的网格模型Mesh一样都是模型对象,基类都是Obj原创 2021-03-02 14:39:18 · 3351 阅读 · 0 评论 -
Three.js杂记(十)——贴图
纹理贴图贴图介绍简单的纹理贴图贴图介绍纹理贴图是Threejs一个很重要的内容,游戏、产品720展示、物联网3D可视化等项目程序员加载模型的同时同时需要处理纹理贴图。简单的纹理贴图原创 2021-02-28 15:44:36 · 8902 阅读 · 14 评论 -
Three.js杂记(九)—— 练习:地球
制作地球效果主要原理代码素材效果上传图片大小限制,减少了gif的帧数主要原理制作地球的练习原理比较简单,主要使用了贴图的效果。先构建一个球缓冲几何体,然后将地球表面图的素材贴过去主要代码:var geometry = new THREE.SphereBufferGeometry(34, 50, 50);var textureLoader = new THREE.TextureLoader(); // 纹理加载器var texture = textureLoader.load('./img原创 2021-02-22 21:32:12 · 997 阅读 · 1 评论 -
Three.js杂记(八)—— 文本几何体
文本几何体FontLoaderTextGeometry中文乱码问题字体包FontLoader在three.js中,如果想要显示出文本文字的效果,可以使用FontLoader,这是使用JSON格式中加载字体的一个类。返回Font, 返回值是表示字体的Shape类型的数组。 其内部使用FileLoader来加载文件。var loader = new THREE.FontLoader();TextGeometry使用FontLoader后,生成几何体时,可以使用TextGeometry。一个用于将文本生原创 2021-02-19 15:07:31 · 635 阅读 · 0 评论 -
Three.js杂记(七)—— VR全景效果制作·上(含python爬虫偷碎图,canvas重组图片)
起步学了一段时间的three.js之后,就可以尝试做一个VR全景效果出来。当时已经靠近2020年的年底了,那就做一个过年的场景效果吧,就类似于网页上的VR全景那就要有一个目标,VR全景需要确定一个地点,我身处在江南,那就拿江南的小镇来做three.js的背景布局啦! 而江南小镇繁多,但与互联网有关的恐怕典型就是乌镇了,地点get下面先提前展示一下效果:在2020年年底已经完成了效果的制作,因为不能上传太大的图片,所以git制作时帧图被我删减了,看起来有些卡顿布局three.js需要一个原创 2021-01-10 21:04:10 · 2496 阅读 · 3 评论 -
Three.js杂记(六)——3D模型
在three.js程序的制作与编写过程中,当然不可避免的会遇到一个问题3D模型的导入3D模型由顶点(vertex)组成,顶点之间连成三角形或四边形(在一个平面上),多个三角形或者四边形就能够组成复杂的立体模型虽然在three.js可以使用提供的几何图形去堆积起一个3D模型,奈何本作者的美术水平远远不过关,以下模型可做对比网上找的3D模型自己做的3D模型3D模型能够让我们制作的场景更加具有表现力,并且一些场景可以直接通过3D模型导入,避免重新绘制带来的重复性目前在网上找3d模型的软件基本上一原创 2020-12-29 16:22:08 · 853 阅读 · 2 评论 -
Three.js杂记(五)——坐标轴、光源
之前有关与物体与场景的点线面中坐标可以进行一下补充:可以使用THREE.AxisHelper(); 去绘制出坐标轴线,里面填写的参数是坐标轴线的长度示例:<script type="text/javascript"> var scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(105, window.innerWidth / window.innerHeight, 1, 1000); render原创 2020-12-15 14:48:40 · 856 阅读 · 0 评论 -
Three.js杂记(四)—— 更好的运动:TweenMax
运动效果在之前的three.js运动效果制作时可以通过移动相机和移动物体来产生动画的效果。在实际中开发中,移动相机和移动物体是在渲染循环里去移动相机或者物体的位置。如果动画稍微复杂一些,这种方式实现起来就比较麻烦一些了。这时候就又要学新东西了,比如说——动画引擎…(吐槽:我是从工作需求中因为IE浏览器兼容性放弃了CSS animation动画,然后去用canvas解决了问题。之后就对这个有兴趣 ,开始学起来,学了canvas之后,又发现three.js,然后才开始学就发现好的效果用动画引擎比较好,原创 2020-12-12 16:03:13 · 1328 阅读 · 0 评论 -
Three.js杂记(三)——物体运动
物体运动在three.js中想要让静止的物体呈现出运动效果有两种方法:让物体geometry进行运动让相机camera进行运动测试代码: 让圆柱体进行移动,实际移动的是相机。圆柱体可以使用EdgesGeometry绘制边框线<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>运动</title> <script src="js/thr原创 2020-12-11 10:26:54 · 1358 阅读 · 2 评论 -
Three.js杂记(二)——绘制点、线、面
点和线Threejs使用的是右手坐标系,这源于opengl默认情况下,也是右手坐标系图中右边那个手对应的坐标系,就是右手坐标系。在Threejs中,坐标和右边的坐标完全一样。x轴正方向向右,y轴正方向向上,z轴由屏幕从里向外。一维指的是一条线,没有宽度和高度二维指的是一个面,没有高度三位指的是立体空间,由面组成示例代码:<body> <div id="app"></div> <script> // 创建场景 var scene原创 2020-12-07 15:20:37 · 2405 阅读 · 1 评论 -
Three.Js杂记(一)
相机原创 2020-12-07 11:44:19 · 855 阅读 · 0 评论