摘要:
场景: THREE.Scene(); 场景辅助坐标模型: THREE.AxesHelper(20); 相机: THREE.PerspectiveCamera()// 透视相机 THREE.OrthographicCamera()// 正交相机 渲染器: THREE.WebGLRenderer() / 阅读全文
摘要:
requestAnimationFrame 切换页面时, 之前定时的内容还会继续执行. 所以 要注意处理动画函数内容,否则会出现死循环. 遇到的问题: 我在两个页面都有使用 requestAnimationFrame 加载动画,所以排查的时候花了不少时间, 要是你只有一个动画函数的话, 排查应该没有 阅读全文
摘要:
需求: 1、一个列表滑动效果为360 旋转 准备: 1、css 基础 2、Css 动画基础animation 3、transform-style 概念 4 transform 概念 5 JavaScript 基础 过程描述: 1、创建一组DIV 父子div 2、调整子级div的Y轴 以及 Z轴(y: 阅读全文
摘要:
需求: 1、实现元素跟随指定物体位置进行位置变化 实现方案: 1 Sprite 精灵 2 cavans 画图后创建模型贴图 3 CSS2DRenderer渲染方式 4 直接创建元素,在动画函数内计算元素位置 目前所了解到的以上的方案都可实现,但还需根据实际的使用场景选择使用 1,2 两种实际是一种方 阅读全文
摘要:
更改路由传递的参数: const query = JSON.parse(JSON.stringify(this.$route.query)) // 获取路由参数信息 query.id = Name //改变参数 this.$router.push({path:this.$route.path,que 阅读全文
摘要:
原文:https://blog.csdn.net/dear_zx/article/details/82785250 防止链接丢失,复制一下 兼容iphone4/4s: @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2 阅读全文
摘要:
直接复制的内容: 原著:https://www.cnblogs.com/q767498226/p/11099884.html 报错解决:https://blog.csdn.net/weixin_46728614/article/details/106779406 一. virtualenv虚拟环境 阅读全文
摘要:
需求: 1、使用一张长图、分别播放这张长图的不同位置 来达到动态内容的目的 解决方案: 1、纹理创建并指定重复方向:this.texture.wrapS = this.texture.wrapT = THREE.RepeatWrapping; 2、设定纹理显示范围(就是你的图片要显示的一格动画范围) 阅读全文
摘要:
需求: 根据鼠标点击位置相机进行相应的移动, 方案: 1、实际要解决的问题就是 相机以及相机朝向位置 的坐标更新 2、使用 TWEEN 组件 优化两个点切换的补间动画 3、获取鼠标点击的位置 获取鼠标点击的位置的话,就是通过获取点击到的模型,然后会有一个参数叫 point 这个坐标就是点击的点在场景 阅读全文
摘要:
需求: 拖动场景内的模型 方案: 增加控制器DragControls 1、引入控制器 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; import { TransformControls } fro 阅读全文