threejs
关注
分享
扫一扫
pengpai123
qq:1217272252
展开
-
Three.js实现深度拾取功能
threejs自带的接口实现坐标拾取一般使用射线法，该方法属于几何计算，通过使用Ray创建射线与geometry通过某个加速结构(bvh或者kdTree)，最终与确定的一个三角形进行相交测试这种方法有如下优点：计算结果精确，由于属于几何计算，射线拾取的精度非常高返回的信息详细，不仅可以计算当前拾取点的坐标，也可以返回当前三角形所属于的mesh，当前点的uv等…。。。。。同样精度高带来的另一个问题便是性能消耗大，如果遇到稍微复杂的场景，整个计算过程将十分耗时，鼠标移动过程中的坐标拾取更是无法做到，原创 2021-06-24 22:16:33 · 2160 阅读 · 1 评论 -
使用shaderMaterial实现环境光与漫反射光
上次咱们使用shaderMaterial实现纹理贴图，之后进一步拓展，在之前的基础上加上平行光与漫反射光的效果。 代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="htt原创 2017-02-24 20:31:27 · 2712 阅读 · 0 评论 -
使用Threejs和shaderMaterial给plane贴图
搞了一段时间的threejs，最近想慢慢学习threejs中的shader用法，最然threejs中有TextureLoader很简单的就可以进行贴图，不过为了学习shader嘛，就写写喽！，俺也是初学，写的烂还望包容哈 1、使用shader给plane进行贴图 最终效果如下图所示： 完整代码如下：<!DOCTYPE html PUBLIC原创 2017-02-20 23:02:05 · 6899 阅读 · 0 评论 -
使用shaderMaterial实现平行光下的高光效果
代码如下：“` 无标题文档 varying vec2 vUv; varying vec3 vNormal; void main(){ vUv = uv; vNormal = normal; vec4 mvPosition = mod原创 2017-02-25 20:18:03 · 1109 阅读 · 0 评论 -
Threejs根据鼠标动态改变controls的target（缩放中心点）
好久没更新博客了，记下一笔 最近看到很多公司的产品的鼠标交互部分，controls的缩放中心不是固定的，比如这个，这个鼠标的交互方式跟我们平常用到的OrbitControls或者TrackballControls都不一样，特别是缩放时，它的target不是固定的，最近研究了一下： 废话不多说，先上图： 普通的缩放操作 优化后的缩放操作 代原创 2017-04-26 16:32:36 · 11867 阅读 · 5 评论 -
使用Controls进行zoom事件时，不改变指定物体在视野中的大小（一）
代码：<!DOCTYPE html><html lang="en"> <head> <title>three.js webgl - transform controls</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-原创 2017-04-26 17:02:37 · 1191 阅读 · 0 评论 -
Sprite在视野中保持大小不变
当前threejs版本为：99threejs的SpriteMaterial新增属性sizeAttenuation，文档上的解释是Whether the size of the sprite is attenuated by the camera depth. (Perspective camera only.) Default is true.，呈现的效果就是，无论鼠标放大还是缩小，sprite...原创 2018-11-19 16:26:43 · 4109 阅读 · 0 评论 -
使用threejs实现模型爆炸效果
使用threejs实现模型爆炸效果这个效果是以mesh为单位进行位置偏移，具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>modelLoader</title><原创 2018-11-28 15:59:44 · 14716 阅读 · 32 评论