vue 项目中引用three.js demo作为登录页的背景遇到的坑

先上效果图其实就是觉得 iview 2.0 的官网的首页这个动画挺好看的, 移到自己的项目上官网demo地址接下来是遇到的坑1打开源码可以看到3个大大的script标签<script type="x-shader/x-vertex" id="vertexshader">attribute float scale;void main() {ve...

weixin_45455422

3742人浏览 · 2019-08-15 12:49:13

weixin_45455422 · 2019-08-15 12:49:13 发布

先上效果图
在这里插入图片描述
其实就是觉得 iview 2.0 的官网的首页这个动画挺好看的, 移到自己的项目上
官网demo地址
接下来是遇到的坑

1

打开源码可以看到3个大大的script标签

		<script type="x-shader/x-vertex" id="vertexshader">
			attribute float scale;
			void main() {
				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
				gl_PointSize = scale * ( 300.0 / - mvPosition.z );
				gl_Position = projectionMatrix * mvPosition;
			}
		</script>
		
		<script type="x-shader/x-fragment" id="fragmentshader">
			uniform vec3 color;
			void main() {
				if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.475 ) discard;
				gl_FragColor = vec4( color, 1.0 );
			}
		</script>

这两个script标签我一开始是想在vue 中的动态生成–> 像这样

const script = document.creatElement('script')
script.type = 'x-shader/x-vertex'
script.id = 'fragmentshader'
script.textContent = `
void main() {
				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
				gl_PointSize = scale * ( 300.0 / - mvPosition.z );
				gl_Position = projectionMatrix * mvPosition;
			}`
body.document.appendChild('script')

但是!!!
这样动态插入的结果就是在

vertexShader: document.getElementById( 'vertexshader' ).textContent,

document.getElementById( ‘vertexshader’ ) = null
自然而然就会报错了

解决办法
那就只能放在vue 项目中的index.html中了,

<!DOCTYPE html>
<html style="font-size: 50px">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script type="text/javascript" src="./static/qiniu1.x/qiniu.min.js"></script>
    <link rel="shortcut icon" href="./static/favicon.ico"/>
    <!--<script src="http://webapi.amap.com/maps?v=1.4.8&key=1811521a87ef706155ff7cb020619c81"></script>-->
    <title>花忆-平台管理</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <!--<script src="/static/tx_webim_1.7/webim.js"></script>-->
    <!--读取图片信息-->
    <script type="text/javascript" src="./static/exifJs/exif.js"></script>

    <!--登录页动画相关-->
    <script type="x-shader/x-vertex" id="vertexshader">
    attribute float scale;
    void main() {
      vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
      gl_PointSize = scale * ( 300.0 / - mvPosition.z );
      gl_Position = projectionMatrix * mvPosition;
    }
    </script>
    <!--登录页动画相关-->
    <script type="x-shader/x-fragment" id="fragmentshader">
    			uniform vec3 color;
    			void main() {
    				if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.475 ) discard;
    				gl_FragColor = vec4( color, 1.0 );
    			}
    </script>
  </body>
</html>

二

首先当然是 npm i three -S啦
然后就是在组件中引用啦
但是
import THREE from 'three'这样引用是不可以的,
需要这样引用import * as THREE from 'three'

三

是我自己犯彪的一个错误导致的
我是把官网的第三个script标签直接Ctrl + C Ctrl + v 到自己的vue 组件中

然后编译的时候就会在控制台报这个错误

 WARNING  Compiled with 1 warnings                                                                                                                                               12:26:38

 warning  in ./src/components/common/loginAnimate.vue

21:2-16 "export 'default' (imported as '__vue_script__') was not found in '!!babel-loader!../../../node_modules/vue-loader/lib/selector?type=script&index=0!./loginAnimate.vue'

我TM 这是啥错误, CSDN上有个兄弟说是因为引入了两个script标签导致的, 我眼睛都看瞎了也没有找到还有另外一个script 标签
百度全网也没有找到问题的解决办法
只能搬出GOOGLE了
在这个问题下边找到了这样一句话
We couldn’t see the whole project you mentioned. But I guess this error means you don’t export anything in script.
简而言之就是我他吗的在script 中没有export default (因为script 标签是我复制过来的)

export default {
    name: 'loginAnimate'
  }

加上这个 OK FINE

在这里插入图片描述
我是智障

四

在这里插入图片描述
这一条白边看到没, 因为这5px 导致右边出现滚动条, 难受啊难受╮(╯﹏╰）╭
参考了另一个兄弟用div包图片导致div下边缘多出几px的边距
在样式中添加

#loginAnimate canvas{
    /*设置display 为 block 可以消除下方5px 的边距!!!*/
    display: block!important;
    width: 100%!important;
    height: 100% !important;
  }

dispaly: block就可以了

五

修改点点的颜色

var material = new THREE.ShaderMaterial({
      uniforms: {
        color: {value: new THREE.Color(0x097bdb)},
      },
      vertexShader: document.getElementById('vertexshader').textContent,
      fragmentShader: document.getElementById('fragmentshader').textContent
    });

是在这里修改
背景颜色我暂时还没弄,有点急做其他的事情.

六

修改鼠标位置和角度的我是参考了
iview 首页的底部的canvas粒子动画是怎么实现的?有这种框架么？或者有什么思路求指导

七

在这里插入图片描述
登录后要移除动画啦
刚开始是想着用isLogin来判断
如果isLogin == true 的时候就把动画的display = none
可是发现isLogin 数据更新不及时需要刷新页面也就是this.$router.go(0)
但是这样效果很不好,页面会卡顿

解决:
脑袋秀逗了, 直接在登录成功的回调函数中移除这个元素就好了

let loginAnimate = document.getElementById('loginAnimate')
 // loginAnimate.parentNode.removeChild(loginAnimate)
loginAnimate.remove()

两种方法都可以的

总结
以上就是新人在vue 中简单使用three.js 遇到的坑, 如有错误之处,请大家指出.

另外分享一个网站 http://i-remember.fr/en/ 挺有趣, 不忙的时候可以去看看

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^