随笔分类 -  three.js

threeJS射线拾取机制及案例
摘要：前言 在浏览器中浏览三维图形的时候，有时想要与三维图形之间做一些点击事件和交互操作，其中比较常用的一个解决方案就是使用Raycaster对象来实现（射线拾取）。 基础知识 原理 利用webGL，既可以将三维坐标换算为二维坐标，也可以将二维坐标换算成三维坐标。webGL会将世界坐标先换算到视点坐标，然 阅读全文
posted @ 2019-06-26 08:40 最好的年纪 阅读(2041) 评论(0) 推荐(0)
three.js低版本添加文字(如71版本)
摘要：研究了半天，最后终于加载成功了，记录一下three.js 71版本的文字加载，下面开始整个过程 首先，将ttf字体转换成js文件 源码版： https://github.com/gero3/facetype.js 在线版： http://gero3.github.io/facetype.js/ 并引 阅读全文
posted @ 2018-09-06 11:13 最好的年纪 阅读(1432) 评论(0) 推荐(0)
法向量影响光源照射物体后，物体产生的视觉感光效果
摘要：gemo.computeVertexNormals() 更加贴近人眼看到的效果 gemo.computeFaceNormals() 计算机默认自动生成的方式 阅读全文
posted @ 2018-06-25 14:06 最好的年纪 阅读(200) 评论(0) 推荐(0)
材质透明设置
摘要：var sunMaterial = new THREE.MeshBasicMaterial({ color: sunColor, opacity: 0, transparent: true }); 阅读全文
posted @ 2018-06-22 15:17 最好的年纪 阅读(218) 评论(0) 推荐(0)
纹理加载和异步
摘要：纹理加载是异步的，可以把render渲染放到纹理加载完毕后。 阅读全文
posted @ 2018-06-21 15:50 最好的年纪 阅读(443) 评论(0) 推荐(0)
地板上创建批量小方块
摘要：效果图： 核心代码： 阅读全文
posted @ 2018-06-20 14:45 最好的年纪 阅读(157) 评论(0) 推荐(0)
创建自定义几何体（以立方体为例）
摘要：效果图： 创建几何体的方法： 源码： 阅读全文
posted @ 2018-06-20 10:24 最好的年纪 阅读(260) 评论(0) 推荐(0)