Three.js
Three.js学习笔记
月亮实验室
这个作者很懒,什么都没留下…
展开
-
Three.js入门学习笔记14:动画小球完整案例
three.js原创 2023-03-23 10:20:31 · 148 阅读 · 0 评论 -
Three.js入门学习笔记20:如何防止模型变形
three.js原创 2023-03-23 10:19:18 · 576 阅读 · 0 评论 -
Three.js入门学习笔记09:Three.js对象拾取,鼠标点击对象响应事件
three.js原创 2023-03-23 10:16:26 · 1541 阅读 · 0 评论 -
Three.js入门学习笔记06:外部模型导入-C4D转成json文件供网页使用-材质导入
参考学习:Three.js入门指南https://www.ituring.com.cn/book/1272今日目标:把带材质的模型能够良好的导入网页中有错误的地方欢迎指正,我会仔细研究学习,加以改进哒~~~~~一.导入obj格式的静态外部模型教程参考:https://www.ituring.com.cn/book/miniarticle/53881(一).引入无材质模型,在代码中设置...原创 2023-03-23 10:15:50 · 436 阅读 · 0 评论 -
Three.js入门学习笔记19:如何导入fbx静态模型
参考资料:https://www.jianshu.com/p/906072e601971.在JS里引入下面两个文件 <script type="text/javascript" src="js/FBXLoader.js"></script> <script type="text/javascript" src="js/inflate.min.js"></script>2.引入fbx文件,fbx文件放在页面同级文件夹里var loader =原创 2020-05-22 09:07:20 · 2667 阅读 · 0 评论 -
Three.js入门学习笔记18:如何用blender导出json文件
参考教程:https://www.jianshu.com/p/f7b45d9b957b需要在blender中安装导出three.js的插件blender需要2.79版本才行方法1:把js放入网页中参考教程https://blog.csdn.net/cj9551/article/details/80307426https://www.jianshu.com/p/f7b45d9b957...原创 2020-04-14 14:07:10 · 4471 阅读 · 7 评论 -
Three.js入门学习笔记17:鼠标控制json文件的3d模型旋转
参考学习https://blog.csdn.net/tuoxinquyu/article/details/72391797一.鼠标控制原理:当按下鼠标时及时当前鼠标的水平坐标clientX1,在鼠标移动的过程中不断触发onMouseMove事件,不停的记录鼠标的当前坐标clientX2,由当前坐标减去记录的上一个水平坐标,并且将当前的坐标付给上一个坐标clientX1,计算两个坐标的之间的...原创 2020-03-27 17:20:08 · 996 阅读 · 0 评论 -
Three.js入门学习笔记15:Threejs帧动画模块
参考学习http://www.webgl3d.cn/Three.js/编辑关键帧并解析播放Threejs提供了一系列用户编辑和播放关键帧动画的API,例如关键帧KeyframeTrack、剪辑AnimationClip、操作AnimationAction、混合器AnimationMixer。编辑关键帧:关键帧动画是通过关键帧KeyframeTrack和剪辑AnimationClip两个...原创 2020-03-24 17:23:24 · 2272 阅读 · 0 评论 -
Three.js入门学习笔记13:动画学习
参考学习https://www.ituring.com.cn/book/miniarticle/53322setInterval方法可自定义fpssetInterval(func, msec)func是每过msec毫秒执行的函数,如果将func定义为重绘画面的函数,就能实现动画效果。setInterval函数返回一个id,如果需要停止重绘,需要使用clearInterval方法,并传入...原创 2020-03-20 17:27:59 · 548 阅读 · 0 评论 -
Three.js入门学习笔记12:模型沿着任意轨迹线运动
参考学习http://www.yanhuangxueyuan.com/doc/Three.js/curveRun.htmlhttp://www.yanhuangxueyuan.com/doc/three.js/ringrun.html原创 2020-03-20 17:28:58 · 3605 阅读 · 0 评论 -
Three.js入门学习笔记11:Three.js-Group组合对象
参考学习http://www.yanhuangxueyuan.com/doc/Three.js/Group.htmlhttps://blog.csdn.net/ithanmang/article/details/80965712http://www.yanhuangxueyuan.com/Three.js/https://www.cnblogs.com/guxingy/p/11956390...原创 2020-03-17 14:13:46 · 2009 阅读 · 0 评论 -
Three.js入门学习笔记10:Three.js网格
参考学习:https://www.ituring.com.cn/book/miniarticle/52525一.网格概念最常用的一种物体就是网格(Mesh),网格是由顶点,边,面等组成的物体。其他物体包括线段(Line),骨骼(Bone),粒子系统(ParticleSystem)等。创建物体需要指定几何形状和材质,其中,几何形状决定了物体的顶点位置等信息,材质决定了物体的颜色,纹理等信息。...原创 2020-03-17 11:41:02 · 348 阅读 · 0 评论 -
Three.js入门学习笔记08:OrbitControls.js插件-鼠标控制模型旋转,放大缩小,平移等
学习参考https://blog.csdn.net/qq_30100043/article/details/79606355一.引入1.引入OrbitControls.js文件,在three.js官方下载压缩包里找到<script type="text/javascript" src="js/OrbitControls.js"></script>二.添加 /...原创 2020-03-13 13:57:03 · 2890 阅读 · 5 评论 -
Three.js入门学习笔记07:外部模型导入-C4D转成json文件供网页使用-fbx导入
上一篇用的obj导入,转成json发现有些材质加载不进去,不知是什么原因。比如blender导入obj模型的时候,只要obj和mtl材质文件在同一个文件夹内,正常情况,导入obj的同时就能直接导入同文件夹下的mtl。在blender中可以看到有完整材质的obj模型,但是用three.js插件转成json放在网页里时,材质有缺失。这个问题还没解决。于是我换成用c4d转fbx,fbx导入ble...原创 2020-03-12 14:40:05 · 6241 阅读 · 3 评论 -
Three.js入门学习笔记05:外部模型导入-C4D转成json文件供网页使用
参考学习:https://www.jianshu.com/p/906072e60197var objectLoader = new THREE.ObjectLoader(); objectLoader.load("../model/eee.json", function ( obj ) { console.log(obj); scope.obj=obj;...原创 2020-03-05 16:59:18 · 4833 阅读 · 2 评论 -
Three.js入门学习笔记04:外部模型导入-无材质obj模型
参考学习:Three.js入门指南https://www.ituring.com.cn/book/miniarticle/53810外部模型导入支持格式外部文件导入辅助函数下载地址https://github.com/mrdoob/three.js/tree/master/examples/js/loaders*.obj是最常用的模型格式,导入*.obj文件需要OBJLoader.js...原创 2020-03-05 14:45:38 · 1731 阅读 · 0 评论 -
Three.js入门学习笔记03:透视投影照相机
参考内容:https://www.ituring.com.cn/book/miniarticle/49446##透视投影照相机不同于正交投影,物体大小不受远近的影响,透视投影更符合物理视觉,近大远小。构造:var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);灰色是视景体,可以被渲染的部分,fov是视景体竖...原创 2020-03-04 14:51:25 · 361 阅读 · 0 评论 -
Three.js入门学习笔记0:图解WebGL与Threejs工作原理
参考内容https://www.jianshu.com/p/67809ccba021?tdsourcetag=s_pcqq_aiomsg我理解的就是:1.通过矩阵变换坐标,将三维坐标,变换为屏幕上的二维坐标2.通过获取顶点坐标,图元装配等,绘制点,直线,三角形,构建三维场景。3.three.js帮我们计算矩阵,转换坐标,简化了很多其他事情。所以我们要做的就是把真实世界的三维物体,通过绘...原创 2020-03-04 09:46:31 · 955 阅读 · 1 评论 -
Three.js入门学习笔记00:坐标系,照相机(暂时理解)
学习正交照相机遇到一些问题没理解透彻,在这里整理一下暂时的理解,以后再修正,小白一个,有错误欢迎指正。一.坐标系世界坐标系为右手坐标系,X正向向右,Y轴正向向上,Z轴正向由屏幕内伸向屏幕外。围绕轴旋转拇指指向旋转轴的正方向,四指弯曲的方向为旋转的正方向cube.rotaion.y -= 0.01; //弧度本地坐标物体的坐标,在物体中心点。可添加辅助坐标轴var axisH...原创 2020-03-03 16:47:19 · 1013 阅读 · 0 评论 -
Three.js入门学习笔记02:正交投影照相机
照相机(Camera)WebGL和Three.js使用的坐标系是右手坐标系,如下透视投影:近大远小,更接近真实。如图a正交投影:投影在二维空间中也是平行的,如图b(一) 正交投影照相机(Orthographic Camera)THREE.OrthographicCamera(left, right, top, bottom, near, far)这六个参数分别代表正交投影照相机拍...原创 2020-03-02 16:51:09 · 623 阅读 · 0 评论 -
Three.js入门学习笔记01:建立简单立方体场景
参考文章:https://blog.csdn.net/qq_26822029/article/details/91353209参考学习《Three.js入门指南》:https://www.ituring.com.cn/book/1272一.学习目标:理解建立一个小立方体三维场景的方法二.学习内容:1.建立可旋转的三维立方体我们要在页面里建立一个可以转动的三维小立方体,怎么来实现呢?...原创 2020-03-02 16:47:50 · 507 阅读 · 0 评论