本文介绍一个补间动画库tweenjs的基本用法，配合threejs可以实现很多动画效果。 tweenjs动画效果就是使一个对象在一定时间内从一个状态到另外一个状态 // position = {x: 1}var tween = new TWEEN.Tween(position). ...
Hello World
Posted on
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in ...
threejs学习之路（十八）- 字体实例
Posted on
|
Edited on
|
In
js
这是一个生成字体形状的例子 TextGeometry之前在学习几何形状时提到过一种字体形状，但是没有详细学习，现在我们边学习，边做一个例子 TextGeometry(text : String, parameters : Object) text — 将要显示的文本。parameters — 包含有 ...
threejs学习之路（十七）- 渲染性能监视
Posted on
|
Edited on
|
In
js
本文简单介绍一个监控渲染性能数据的库stats.js，可以用来测试webgl代码的渲染性能 引入脚本<!-- cnd地址：https://www.bootcdn.cn/stats.js/ --><script src="https://cdn.bootcss.com/stats.j ...
threejs学习之路（十六）-- 辅助对象
Posted on
|
Edited on
|
In
js
threejs提供了很多有用的辅助工具用来帮助我们创建3D场景。 箭头对象ArrowHelper(dir : Vector3, origin : Vector3, length : Number, hex : Number, headLength : Number, headWidth : Numb ...
threejs学习之路（十五）-- 控制器
Posted on
|
Edited on
|
In
js
threejs提供多种控制器用于控制场景转换 设备方向控制器DeviceOrientationControls 基于移动设备的旋转方向控制相机方向 拖拽控制器DragControls 场景中的拖拽监听交互 var controls = new THREE.DragControls( objects, ...
threejs学习之路（十四）-- 阴影
Posted on
|
Edited on
|
In
js
光与影的艺术，有光就要有阴影，才符合我们的现实世界，threejs中用LightShadow添加阴影。 阴影基类构造函数： LightShadow( camera : Camera ) camera - 在光的世界里。这用于生成场景的深度图;从光的角度来看，其他物体背后的物体将处于阴影中。 基类有以 ...
threejs学习之路（十三）-- 光源
Posted on
|
Edited on
|
In
js
终于来了一个有意思的东西，光~ 有了光，物体和场景才会有层次感，才更接近现实三维世界。 光光本身也是一种3D对象，光源的基类Light继承自3DObject。 Light( color : Integer, intensity : float ) color - (可选参数) 16进制表示光的颜色。 ...
threejs学习之路（十二）-- 空间
Posted on
|
Edited on
|
In
js
根据前面学到的知识，总结一下场景空间 物体空间3D对象所占的空间就两个指标，物体的位置position和物体的大小size，当然缩放、平移、旋转也会改变物体在场景中的空间。总之，物体最终渲染到场景上会在一定的位置上占据一定的视图大小。 物体的大小没什么说的，我们来稍微研究一下位置 世界坐标和相对坐标 ...
threejs学习之路（十一）-- 纹理
Posted on
|
Edited on
|
In
js
纹理可以看做一个贴图 Texture创建一个纹理贴图，将其应用到一个表面，或者作为反射/折射贴图。 Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding ) im ...