随笔分类 - threejs
与threejs相关的技术问题
上传本地pcd文件，并用threejs渲染
摘要：页面 <template> <div> <input type="file" @change="handleFileUpload" accept=".pcd" /> <input type="file" @change="changeFile" /> <div @click="stringToFil
阅读全文
three.js 鼠标点击获取模型对象
摘要：three.js 创建模型后，想要实现点击模型获取模型对象触发相应事件。可以使用它提供的API THREE.Raycaster() https://threejs.org/docs/index.html?q=Raycaster#api/en/core/Raycaster //监听点击事件 windo
阅读全文
TransformControls 用于在网页中进行 3D 场景中物体的交互式操作
摘要：demo案例：https://techbrood.com/threejs/examples/#misc_controls_transform TransformControls 是 Three.js 中的一个类，用于在网页中进行 3D 场景中物体的交互式操作。让我们来详细讲解它的输入参数、输出、属性
阅读全文
three.js raycaster射线碰撞的坑 （当canvas大小 不是屏幕大小是解决拾取物体的办法）
摘要：这里只是记录一下坑,方便查阅,内容主要援引自:three.js Raycaster 射线拾取 canvas不占满整屏时射线拾取存在偏差 1. 世界坐标系: 世界坐标系位于屏幕的中心(0,0,0),往右侧是x轴,往上是y轴,垂直屏幕朝向的是z轴.所以屏幕的左下角是(-1,-1),右上角是(1,1);
阅读全文
获取到模型的长宽高 并将模型移到场景中心位置
摘要：1：获取模型宽高 2计算模型的对角线并设置位置 添加的场景中
阅读全文
three.map.control
摘要：网址：https://github.com/anvaka/three.map.control 在threejs群里发现的一个很有意思的问题之前没有接触过： 存在的问题： 我在微信小游戏中，用orbit也会出现计算错误的情况，动一下就不见了。 解决办法： 发现了， 原来是小游戏里面获取不到 eleme
阅读全文
threejs中文文档
摘要：网址;http://techbrood.com/threejs/docs/
阅读全文
Three.js 对模型多个动画切换展示(fbx)
摘要：来源 ：https://blog.csdn.net/qq_30100043/article/details/80087471 简介 上一节本想直接了结动画这一章。最后一想，没有做过模型动画切换的案例。就此，再加一章，关于模型多个动画之间如何切换的问题。 案例实现 案例查看地址：http://www.
阅读全文
Three.js粒子特效，shader渲染初探（一篇非常详细的介绍）
摘要：Three.js粒子特效，shader渲染初探 转载来源：https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js，网上有不多不少的零碎教程，有些过于初级，有些云里雾里，而Three.js官网上的示例逼格之高又令人望而却步，这
阅读全文
threejs 世界坐标转化为屏幕坐标
摘要：网站： http://www.yanhuangxueyuan.com/Three.js_course/screen.html 方法.project 通过Vector3对象的方法project，方法的参数是相机对象，语句worldVector.project(camera);返回的结果是世界坐标wor
阅读全文
在threejs中对3D物体旋转的思考
摘要：今天在写threejs时，突然想到一个问题：一个3D物体需要旋转时，一般情况下简单的旋转我都是使用欧拉角，稍微复杂一些的情况我会把欧拉角转换成四元数进行旋转（欧拉角复杂旋转可能会产生的死锁问题），但是在threejs中object3D的旋转方法无论是使用setRotation（沿着x、y、z轴旋转）
阅读全文
threejs纹理
摘要：纹理 纹理用来表现物体的细节。理论上可以将物体的每个细节建模出来，但是这样时间成本和性能成本都太高，因此，将物体的一些细节用纹理来表示。 图片纹理 图片纹理直接在物体表面应用图片。可以使用TextureLoader类的load方法来加载纹理。 注意加载图片是异步的，所以这里我们使用render循环来
阅读全文
threejs指定对象旋转中心
摘要：指定对象旋转中心 默认情况下，对象的旋转中心都是自身的中心。对于组对象而言，也是如此。因此，可以利用这个特点，实现对象绕任何点旋转，也就是指定旋转中心。比如我们想要下图的对象绕A点旋转 我们可以添加我们的对象到一个组对象，然后移动对象，让A点对准组的中心位置，如下： 此时，如果我们旋转组对象，整个组
阅读全文
threejs- z-fighting 问题（模型的重叠部位便不停的闪烁起来。这便是Z-Fighting问题）
摘要：Z-Buffer 在threejs中，使用深度缓冲（Z-Buffer）来完成场景可见性计算，即确定场景哪部分可见，哪部分不可见。深度缓冲（Z-Buffer）是一个二维数组，其中的每一个元素对应屏幕上的一个像素，如果场景中的两个模型在同一个像素生成渲染结果，那么图形处理卡就会比较二者的深度，并且保留距
阅读全文
ThreeJS中的点击与交互——Raycaster的用法
摘要：基础概念 坐标系 我们的手机屏幕是二维的，但是我们展示物体的世界是三维的，当我们在构建一个物体的时候我们是以一个三维世界既是世界坐标来构建，而转化为屏幕坐标展示在我们眼前，则需要经历多道矩阵变化，中间webGL替我们操作了许多事情。 世界坐标系：在webGL中，世界坐标系是以屏幕中心为原点(0, 0
阅读全文
谷歌开发的draco格式文件将obj文件压缩成drc文件后将大大减小文件大小（threejs加载有mtl文件的drc文件）
摘要：问题描述：当前threejs是92版本 但是当前版本还没有能够直接加载带贴图文件的drc格式的loader； 解决办法：先加载mtl文件将obj文件分解（按照mtl文件内材质贴图信息进行分解）再将分解的obj文件转成drc全部加载一遍就能解决贴图的办法 ； 代码： 描述：目前我们是这么解决的；
阅读全文
在threejs中添加两个场景和相机是需要注意render的参数设置
摘要：问题：我刚开始设置了两个场景和相机 但是第二个一直将第一个场景给覆盖了一直找不到原因 解决： 问题出在 renderer.autoClear = false;上 设置render的参数如下： 描述：第一个场景加载的是柜子 第二个场景加载的是小球 当场景一的相机转动时 小球是不动的问题解决； 注释：
阅读全文
一个新的threejs理论基础学习网站
摘要：网站： https://webglfundamentals.org/
阅读全文
3D文件压缩库——Draco简析
摘要：3D文件压缩库——Draco简析 今年1月份时，google发布了名为“Draco”的3D图形开源压缩库，下载了其代码来看了下，感觉虽然暂时用不到，但还是有前途的，故简单做下分析。 注：Draco 代码地址： https://github.com/google/draco 基本使用 编译 cmake
阅读全文
使用threejs点云秀出酷炫的图片效果(一)
摘要：来源：http://blog.csdn.net/srk19960903/article/details/70214556 使用了点云拼凑出了照片轮播十分有趣，于是用threejs实现这个效果。 首先这件事情分为两步：1.根据图片数据创建对应大小、颜色的点云。2.给点云加上着色器，给渲染管线传递点云变
阅读全文
