- 博客(12)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Three.js - 绘制三维字体模型 - 英文和中文
创建字体模型，需要通过THREE.FontLoader()方法，来加载json格式的字体格式类型，然后在加载成功的回调函数中，通过THREE.TextBufferGeometry()或者THREE.TextGeometry()，将 需要展现的文本 以及设置好的字体格式对象传递到方法中 来创建Mesh对象，需要注意的是，THREE.TextBufferGeometry()，不能用作BSP 布尔操作，...
2018-06-29 18:02:55
3829
原创 Three.js - 绘制线框几何模型
通过 three.js 可以绘制线段模型，包括虚线和基础线条。var lineGeometry = new THREE.Geometry();lineGeometry.vertices.push(new THREE.Vector3(-200, -200, -200));lineGeometry.vertices.push(new THREE.Vector3(200, 200, 200)...
2018-06-29 11:36:23
7081
1
原创 Three.js - 使用 ThreeBSP 对模型进行布尔运算
ThreeBSP.js 是 three.js 的一个扩展库，可以实现对模型的数学布尔运算，实际上就是个个点的重新组合和拆分，来重新生成 几何体对象和网格模型。 本实示例浏览地址:http://www.ithanmang.com/threejshome/201806/20180626/01-threeBSPdemo.htmlThreeBSP构造函数function ThreeBSP(tre...
2018-06-26 14:53:13
7618
4
原创 Three.js - 场景对象 Scene 常用方法和属性
Scene 对象是 three.js 的核心对象它继承自 Object3D 对象。 在场景中我们可以放置 对象 灯光。 构造器：Scene() 查看源码 源码版本: r93function Scene() { // 继承Object3D对象 Object3D.call( this ); // 类型 this.type = 'Scene'; // ...
2018-06-25 13:23:26
5220
原创 Three.js - 使用 overrideMaterial 方法覆盖全局材质属性
如果想让添加到场景中的所有材质属性都同意的话，可以使用scene的 overrideMaterial 属性来覆盖。 示例浏览地址：http://www.ithanmang.com/threejshome/201806/20180625/01-overrideMaterial.html 可以看到本来是随机颜色添加到scene的立方体的颜色和plane 的材质颜色都发生了改变。 示例代码...
2018-06-25 11:17:22
2553
原创 Three.js - 监听window 的 resize 事件，使浏览器窗口变动自适应
通过是添加 window 的 resize 事件，根据浏览器窗口的变动更新相机的aspect以及 渲染器的渲染范围，实现自适应的效果。 本示例浏览地址：http://www.ithanmang.com/threejshome/20180624/02-windowResize.html 示例代码：<!DOCTYPE html><html lang="
2018-06-24 19:35:10
7455
5
原创 Three.js - 使用阴影效果 shadowMap 和 设置阴影分辨率
开启阴影效果需要渲染器支持，如果使用的WebGLRender 渲染器。 需要renderer.shadowMap.enabled = true;来开启渲染气阴影效果。 示例浏览地址：http://www.ithanmang.com/threejshome/20180624/01-shadow.html 可以看待阴影效果比较突出，并且阴影的分辨率也比较高 步骤1 首先需要渲染器支持阴...
2018-06-24 17:43:51
11061
原创 Three.js 笔记 - 使用dat.GUI简化调试流程
dat.GUI 函数库是由谷歌的一个民间组织所开发的，在他的帮助下，可以很容易的创建出一个简单的界面组件，可以用来修改代码中的变量。 本示例浏览地址： http://www.ithanmang.com/threejshome/20180623/04-datgui.html1 示例代码<!DOCTYPE html><html lang="en
2018-06-23 21:23:06
2714
2
原创 Three.js - 使用setInterval和requestAnimationFrame实现动画效果
如果想要在场景中实现动画效果，需要使场景以一定的时间间隔进行渲染。 让页面按照一定的间隔进行刷新的方法有两种，分别是： 在H5 和 jsAPI接口之前使用的方法是 setInterval 方法setInterval 作用：在播放动画时，按照一定的时间间隔就调用传入的方法或对象。格式如下： setInterval( function,interval[arg1,...argn] )或...
2018-06-23 18:08:47
4041
原创 Three.js - 创建第一个三维场景
参考资料是 《three.js开发指南》这本书第一章的示例和讲解。 本示例浏览地址：http://www.ithanmang.com/threejshome/20180623/01-basic-scene.html 由下图可以看到，场景中只有一个平面和一个立方体外加上的灯光。 下面是参考代码<!DOCTYPE html>&am
2018-06-23 12:41:48
1080
4
原创 Three.js - 开始记录学习进度
首先，本人不是专业的WebGl开发工程师，顶多算一个小白菜。 从今天开始起，我将把自己对 ThreeJs 的学习记录分享给大家，虽然并不专业，但也是自己的一些历程和见解，也许以后再来回顾，或许会有一些不同的体会。 这个系列一旦开始就没有结束，但凡自己以后在工作中遇到问题都会分享在此博客，谈一下自己的思路和一些寻找的资料的总结，总之，加油！ 本篇demo的浏览地址：http://www.ith...
2018-06-22 15:59:51
2119
glsl_fire.rar
2020-11-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人