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

1.进入zdog官方网站

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

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>

4.实现效果

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

三维立体动画制作_三维立体动画制作相比传统方式的特点
三维立体动画制作是利用计算机软件建立起虚拟的环境,设计模型以及场景,再根据需要表现的效果,设定模型的动画参数.运动轨迹和方向等.三维立体动画制作相比传统方式具有众多的特点,艺虎动画做出了以下总结: 三 ...
三维立体动画制作技巧
三维动画制作技术要求比较高,掌握技巧才能制作得更加完美,视频工厂为大家分享三维立体动画制作技巧. 一.调查沟通在三维动画制作之前,要与客户沟通需求.客户的企业文化背景以及客户的产品特色等信息.通过内 ...
在vue项目中使用gsap，实现极佳的2d动画效果
在vue项目中使用gsap,实现极佳的2d动画效果一.GSAP是什么? 二.使用步骤 1.引入库 2.在vue中使用 3.vue组件使用gsap完整代码总结一.GSAP是什么? GSAP全称是G ...
vue项目中使用百度地图轨迹动画
在上篇博客中,介绍了如何在vue项目中集成百度地图,这篇博客主要是说如何在vue项目中使用轨迹动画在项目开发过程中,比如你需要实时的观察一个人的行走路线,行走过程. 这个时候我们就需要在地图上使用 ...
Vue项目中particles的使用，来实现屏幕飘浮小星星动画（满天星）
Vue项目中particles的使用,来实现屏幕飘浮小星星动画(满天星) 下载包可采用npm/cnpm npm/cnpm install particles.js --save 这里附上git地址:h ...
在vue项目中使用Lottie动画(随看随用)
前言: Lottie是一个IOS,Android和React Native库,可以实时渲染动画,动画被转化成JSON文件,节省了很多资源,允许应用程序像使用静态图像一样轻松使用动画.网上也有丰富的动画 ...
VUE项目中集成AnimateCSS动画（2020.6.28 亲测可用）
目录在 Vue 项目中使用 animate.css 第一步:安装第二步:引入及使用第三步:页面中使用(相比网上搜到的教程,有改动的地方) 如何找到想要的动画题外话 vue 方式给元素绑定进入动 ...
Vue项目中如何使用动画特效
一.安装在命令行中执行:使用npm或者cnpm安装 npm install animate.css --save 或 cnpm install animate.css --save 二.引入在ma ...
html中购物车小球飞入的效果,vue项目中css3实现加入购物车小球抛物线飞入动画效果...
学习Vue中在做移动端商城练习项目时,记录css3实现加入购物车抛物线小球飞入动画效果.下面会介绍我在项目中实现抛物运动的简单方法. 知识点:css3动画(抛物线运动).vue动态绑定事件(控制小球出 ...

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

1.进入zdog官方网站

2.下载原型代码

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

4.实现效果

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

最新文章

热门文章