zdog实现三维立体动画，并应用到vue项目中去

最新推荐文章于 2024-07-23 15:45:06 发布

IT守门员

最新推荐文章于 2024-07-23 15:45:06 发布

阅读量801

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_50958442/article/details/126320493

版权

1.进入zdog官方网站

在这里附上链接https://zzz.dog/

zdog官网界面

2.下载原型代码

在这里选择一个你自己感兴趣的3D立体模型，然后点进去

然后就会出来原型代码，这里我们点击下载整个原型代码

模型下载

下载完成之后，代码结构如图所示

目录结构

3.将html项目改写为vue项目

首先在vue自带的全局html文件中引入zdog所需要的zdog文件(这里有个点需要注意，我们的js文件需要放在body下面，等到页面渲染完成后在渲染zdog模型，否则会出现模型加载不出来的情况)，这里有两个js文件，一个是直接引入，另一个需要将js文件放在一个目录下，并且采用相对位置引入此js文件。

新建一个vue文件，然后我们将原型代码dist目录下的html文件，css文件合并到vue项目中，以下是合并前和合并后的代码。

html文件

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Zdog - Happy town</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
  <canvas class="illo"></canvas>
  <p><a href="https://dribbble.com/shots/3611306-Happy-Town">Original design by Alex Pasquarella</a></p>
  <p>Click &amp; drag to rotate</p>
  <p><button class="reset-button">Reset</button></p>
</div>
<!-- partial -->
  <script src='https://unpkg.com/zdog@1/dist/zdog.dist.js'></script><script  src="./script.js"></script>

</body>
</html>

css文件

html { height: 100%; }

body {
  min-height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  font-family: sans-serif;
  text-align: center;
  cursor: move;
}

canvas {
  display: block;
  margin: 0px auto 20px;
}

a { color: #5AE; }
a:hover { color: #247; }

合并改写后的vue文件(html文件和css文件在项目中不再需要)

<template>

<div class="container">
  <canvas class="illo"></canvas>
  
 <p style="margin-left: 640px;margin-top:-50px"><a href="http://login" @click.prevent="login">enter to e-life to login </a></p>
    
</div>

</template>

<script>

export default {
    name: 'index1',
  
    data(){
        return {
             
    }
},

   methods:{
    login(){
        this.$router.push({name:'login'})
    }
   }

 
}


</script>

<style scoped>
html { height: 100%; }

body {
  min-height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  font-family: sans-serif;
  text-align: center;
  cursor: move;
}

canvas {
  display: block;
  margin: 0px auto 20px;
}

a { color: #5AE; }
a:hover { color: #247; }

</style>