JavaScript
最近做了Web的小项目,记录一些开发过程中的经验和感想。
CXY_Likescoding
不失情怀,不忘初心!
展开
-
Three.js 模型绕任意轴旋转
Three.js 中 Object3D 提供的成员函数只能让模型绕起点为(0,0,0)的轴旋转,但在实际应用过程中有时会需要模型绕任意轴做旋转。笔者查找了很多博客没有找到比较好的解决方案,最后通过直接对模型应用4x4旋转矩阵实现了这个需求(也是在这个过程中发现,Three.js 中在对三维对象应用矩阵变换时是右乘)。根据任意轴求解旋转矩阵可以参考这篇文章。 function rotateObjModel (rotateMatrix, rotate_obj) { // conso原创 2021-05-11 10:42:38 · 2723 阅读 · 0 评论 -
Three.js 单独读取指定mtl材质
Three.js无法通过js脚本单独读入某个材质,但是可以通过将其赋给一个简单的模型,读入模型后再从模型对象中取出材质,即可作为其他用途使用。function material_read(mtl_path, material_name) { var mtlLoader = new THREE.MTLLoader(); // 加载mtl文件 // Three.js不支持单独导入mtl生成材质,这里通过假装导入一个模型“tmp_obj_str”虚晃一枪, // 此时会读入你指定原创 2021-05-11 10:29:13 · 453 阅读 · 0 评论 -
Three.js在导入obj模型时自动赋予名字
在Three.js实现的Web项目中自动导入模型时需要根据文件名给导入的模型赋予名字,但由于THREE.OBJLoader().load()和你写的读入模型的for循环是异步进行的,因此难以实现,这里使用了一个讨巧的方式实现了这个需求。笔者使用的方法是从OBJLoader读取过程中的xml文件里找到文件导入的url,然后从url中分离出文件的名字,xml文件的具体内容可以打印xhr查看。这里需要注意的是不同浏览器的xml格式可能不太相同,需要做一定的修改,下面的代码里只考虑了火狐和谷歌的浏览器。fu.原创 2021-05-11 10:12:10 · 1180 阅读 · 0 评论 -
根据任意运动轴(给定起点、方向)和旋转角度求解旋转矩阵
最近做的一个小项目需要根据给定的一个任意运动轴(起点(x,y,z),方向(u,v,w))以及旋转角度theta,求解绕该轴的旋转矩阵。查了很多资料但是基本都没有给实现,所以这里总结一下推导以及实现。推导这部分内容有很多大佬已经进行过相关的推导,这里不做赘述。如果感兴趣,笔者推荐两个不错的博客:Glenn Murray’s Hom绕任意轴旋转代码实现代码主要参考以上两篇博客的推导以及大佬的Java实现。因为项目需求,只做了Javascript的实现,其他语言稍微改下语法也很好实现。1..原创 2021-05-11 09:58:23 · 1888 阅读 · 0 评论