随笔分类 - three.js
three.js
摘要：需求: 要实现一个围栏效果的光墙 方案: 当前只介绍贴图实现方案,其他的材质,uv什么的 咱确实玩不来. 实现: 1.就是创建一个缓冲几何,然后通过计算哪个面贴图哪个面不贴图,(这个是我直接拷贝的别人的,只是实现了一个矩形效果,更多效果直接传入相应的二维坐标(x,z)就行) LightWallMod
阅读全文
摘要：需求: 1.需要在模型上实现 内容标记,扩散光圈,横向扫光效果. 方案: 通常就是通过更新材质信息来实现动画效果, 1.给材质加一个动态属性 2.接收这个动态属性去更新材质的数据(应该是这么理解,太多会导致性能问题么? 听说现在可以用GPU进行优化,没试过) 实现: 1.创建动画,并添加到模型上面
阅读全文
摘要：需求: 实现一个线条流动的效果, 实现方案:1. 贴图+管道+贴图偏移 方案(这里暂不做介绍) 2. 向量+弧线+模型 方案 实现: 1.获取到需要实现效果的路径顶点信息 var geometrys = new THREE.Geometry() var materialA = new THREE.M
阅读全文
摘要：需求： 1、选定某个对象后，给该对象一个整体轮廓效果。 需求插件：Three.js ，postprocessing，vue2 实现方案： 以前还是需要自己写的、现在可以直接用插件了，就是上面这个postprocessing插件，使用也蛮简单的，初始化好插件后、在需要使用的地方这样写就行 this.o
阅读全文
摘要：需求： 1、将鱼眼全景图 转换为three.js 可加载的六面立方体图片 资料查阅： 1、目前就找到这个地方有、可能是为父搜索的姿势不对 -->前往 2、图片包含内容 使用到的 python 库： 1、numpy 太大，这里用于处理图像矩阵变形，计算。 2、cv2 -- 太大， 只用到了 图像映射（
阅读全文
摘要：场景： THREE.Scene(); 场景辅助坐标模型： THREE.AxesHelper(20); 相机： THREE.PerspectiveCamera()// 透视相机 THREE.OrthographicCamera()// 正交相机 渲染器： THREE.WebGLRenderer() /
阅读全文
摘要：需求： １、实现元素跟随指定物体位置进行位置变化 实现方案： １ Sprite 精灵 2 cavans 画图后创建模型贴图 3 CSS2DRenderer渲染方式 4 直接创建元素,在动画函数内计算元素位置 目前所了解到的以上的方案都可实现,但还需根据实际的使用场景选择使用 1,2 两种实际是一种方
阅读全文
摘要：需求： 1、使用一张长图、分别播放这张长图的不同位置 来达到动态内容的目的 解决方案： 1、纹理创建并指定重复方向：this.texture.wrapS = this.texture.wrapT = THREE.RepeatWrapping; 2、设定纹理显示范围（就是你的图片要显示的一格动画范围）
阅读全文
摘要：需求： 根据鼠标点击位置相机进行相应的移动， 方案： 1、实际要解决的问题就是 相机以及相机朝向位置 的坐标更新 2、使用 TWEEN 组件 优化两个点切换的补间动画 3、获取鼠标点击的位置 获取鼠标点击的位置的话，就是通过获取点击到的模型，然后会有一个参数叫 point 这个坐标就是点击的点在场景
阅读全文
摘要：需求： 1、在场景内添加html元素并动态更新 2、html内容需跟随场景变化 方案： 新加方案：https://www.zhihu.com/question/49929467/answer/118602848 1、在场景内创建一个模型点（多个模型点最好分组，方便管理） 2、获取到模型点 3、创建h
阅读全文
摘要：参考地址：https://www.jianshu.com/p/d6e3b4b153bb https://www.jqhtml.com/10513.html 官方文档：https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md
阅读全文
