【21】实战——three.js应用图形用户界面更改变量
three.js应用图形用户界面更改变量
【20】实战——three.js调用js接口控制画布全屏和退出全屏
双击控制屏幕进入全屏、退出全屏
【19】实战——three.js根据屏幕和浏览器尺寸变化实现自适应画面
设置控制器阻尼,让控制器更有真实效果,必须在动画循环调用; 监听画面变化,更新渲染画面
【18】实战——了解gsap动画库基本使用和原理
了解gsap动画库基本使用和原理
【17】实战——three.js通过Clock跟踪时间处理动画
通过Clock跟踪时间处理动画
【16】实战——应用requestAnimationFrame
应用requestAnimationFrame 传入时间参数,控制物体动画效果
【15】实战——物体的缩放与旋转
本文代码是设置立方体缩放和旋转
【14】实战——three.js控制物体移动
让圆柱体在X轴来返运动
【13】实战——添加坐标轴辅助器
实战——添加坐标轴辅助器
【12】实战——轨道控制器查看物体
示例:<template> <div class="container" ref="container">
【11】实战—使用three.js渲染第一个场景和物体
实战——three.js渲染第一个场景和物体
【10】three进阶——动画系统(Animation system)
three进阶——动画系统(Animation system)
【09】three进阶——矩阵变换(Matrix transformations)
Three.js使用matrix编码3D变换 —— 平移(位置),旋转和缩放。 Object3D的每个实例都有一个matrix,用于存储该对象的位置,旋转和比例。
【08】three进阶——如何使用后期处理(How to use post-processing)
?很多three.js应用程序是直接将三维物体渲染到屏幕上的。有时,你或许希望应用一个或多个图形效果,例如景深、发光、胶片微粒或是各种类型的抗锯齿。后期处理是一种被广泛使用、用于来实现这些效果的方式。
【07】three进阶——如何创建VR内容(How to create VR content)
Three.js是大多数开发者首次接触的WebGL 3D库,Threejs库的出现解决了底层的渲染细节和复杂的数据结构,可以支持如一个房间级别,或一个楼层级别的渲染,或符合特殊要求的大量同类模型的渲染。
【06】three进阶——如何废置对象?
为了提高性能,并避免应用程序中的内存泄露,一个重要的方面是废置未使用的类库实体。每当你创建一个three.js中的实例时,都会分配一定数量的内存。然而,three.js会创建在渲染中所必需的特定对象。
【05】three进阶——如何更新场景、材质、纹理、相机信息?
three.js如何更新场景、材质、纹理、相机信息?
【04】three.js载入3D模型方式和help
3D模型的格式有成千上万种可供选择,但每一种格式都具有不同的目的、用途以及复杂性。 虽然 three.js已经提供了多种导入工具, 但是选择正确的文件格式以及工作流程将可以节省很多时间,以及避免遭受很多挫折。
【03】three.js画线和创建文字
假设业务场景只需要画一个圆或者画一条线,而不是一个线框模型,或者说不是一个Mesh(网格)。 那么第一步我们要做的,是设置好renderer(渲染器)、scene(场景)和camera(相机)
【02】vue2中使用three.js绘制一个可移动的几何体【实战】
实战:在vue中使用three.js创建一个可控制旋转的几何体