zdog实现太阳系行星运行动画效果-html代码-BFW代码库

zdog实现太阳系行星运行动画效果

代码语言：html

所属分类：动画

代码描述：zdog实现太阳系行星运行动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
	display: grid;
	place-items: center;
	height: 100vh;
	background: #1b262c
}
</style>

</head>
<body translate="no">
<canvas id="z-dog"></canvas>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>

<script>
const illo = new Zdog.Illustration({
  element: '#z-dog',
  dragRotate: true,
  zoom: 0.7,
  resize: "fullscreen",
  rotate: {
    x: 90,
    y: -9.2 } });



const orbitColor = '#fff',orbitSize = 0.1;

const planets = [
{
  name: 'mercury',
  color: '#bbbbbb',
  size: 10,
  orbitDiameter: 380,
  velocity: 0.03 },

{
  name: 'venus',
  color: '#ffa36c',
  size: 7,
  orbitDiameter: 450,
  velocity: 0.02 },

{
  name: 'earth',
  color: '#3282b8',
  size: 15,
  orbitDiameter: 550,
  velocity: 0.015,
  satellites: [
  {
    name: 'moon',
    color: '#eee',
    velocity: 0.015,
    size: 5,
    orbitDiameter: 30 }] },



{
  name: 'mars',
  color: '#ff5722',
  size: 12,
  orbitDiameter: 700,
  velocity: 0.01 },

{
  name: 'jupiter',
  color: '#ba7967',
  size: 65,
  orbitDiameter: 1000,
  velocity: 0.0065 },

{
  name: 'saturn',
  color: '#feceab',
  size: 50,
  orbitDiameter: 1400,
  velocity: 0.0025 },

{
  name: 'uranus',
  color: '#b2ebf2',
  size: 30,
  orbitDiameter: 1800,
  velocity: 0.001 },

{
  name: 'neptune',
  color: '#318fb5',
  size: 30,
  orbitDiameter: 2000,
  ve.........完整代码请登录后点击上方下载按钮下载查看