![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
threejs
pengpai123
qq:1217272252
展开
-
Three.js实现深度拾取功能
threejs自带的接口实现坐标拾取一般使用射线法,该方法属于几何计算,通过使用Ray创建射线与geometry通过某个加速结构(bvh或者kdTree),最终与确定的一个三角形进行相交测试这种方法有如下优点:计算结果精确,由于属于几何计算,射线拾取的精度非常高返回的信息详细,不仅可以计算当前拾取点的坐标,也可以返回当前三角形所属于的mesh,当前点的uv等…。。。。。同样精度高带来的另一个问题便是性能消耗大,如果遇到稍微复杂的场景,整个计算过程将十分耗时,鼠标移动过程中的坐标拾取更是无法做到,原创 2021-06-24 22:16:33 · 1985 阅读 · 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 · 2625 阅读 · 0 评论 -
使用Threejs和shaderMaterial给plane贴图
搞了一段时间的threejs,最近想慢慢学习threejs中的shader用法,最然threejs中有TextureLoader很简单的就可以进行贴图,不过为了学习shader嘛,就写写喽!,俺也是初学,写的烂还望包容哈 1、使用shader给plane进行贴图 最终效果如下图所示: 完整代码如下:<!DOCTYPE html PUBLIC原创 2017-02-20 23:02:05 · 6801 阅读 · 0 评论 -
使用shaderMaterial实现平行光下的高光效果
代码如下:“` 无标题文档 varying vec2 vUv; varying vec3 vNormal; void main(){ vUv = uv; vNormal = normal; vec4 mvPosition = mod原创 2017-02-25 20:18:03 · 1064 阅读 · 0 评论 -
Threejs根据鼠标动态改变controls的target(缩放中心点)
好久没更新博客了,记下一笔 最近看到很多公司的产品的鼠标交互部分,controls的缩放中心不是固定的,比如这个,这个鼠标的交互方式跟我们平常用到的OrbitControls或者TrackballControls都不一样,特别是缩放时,它的target不是固定的,最近研究了一下: 废话不多说,先上图: 普通的缩放操作 优化后的缩放操作 代原创 2017-04-26 16:32:36 · 11626 阅读 · 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 · 1138 阅读 · 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 · 3878 阅读 · 0 评论 -
使用threejs实现模型爆炸效果
使用threejs实现模型爆炸效果这个效果是以mesh为单位进行位置偏移,具体代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>modelLoader</title><原创 2018-11-28 15:59:44 · 14396 阅读 · 32 评论