threejs实现一个三维太阳系行星围绕太阳公转自转效果代码

代码语言:html

所属分类:三维

代码描述:threejs实现一个三维太阳系行星围绕太阳公转自转效果代码

代码标签: three 太阳系 行星 公转 自转

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.61.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.mousewheel.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body{background:url(//repo.bfw.wiki/bfwrepo/image/607e4ca28879b.png) no-repeat;background-size:cover}
    </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div id="fiddleHook"></div>
    <!-- partial -->
    <script>
        (function(app) {
  "use strict";

  let metadata = {
    urls: {
      github: '',
      sun: {
        surfaceMaterial: '//repo.bfw.wiki/bfwrepo/images/universer/sunSurfaceMaterial.jpg',
        atmosphereMaterial: '//repo.bfw.wiki/bfwrepo/images/universer/sunAtmosphereMaterial.png'
      },
      mercury: {
        surfaceMaterial: '//repo.bfw.wiki/bfwrepo/images/universer/mercurySurfaceMaterial.jpg'
      },
      venus: {
        surfaceMaterial: '//repo.bfw.wiki/bfwrepo/image/5ec0779dc7b4d.png'
      },
      earth: {
        normalMaterial: '//repo.bfw.wiki/bfwrepo/images/universer/earthSurfaceNormal.jpg',
        surfaceMaterial: '//repo.bfw.wiki/bfwrepo/images/universer/earthSurface.jpg',
        specularMaterial: '//repo.bfw.wiki/bfwrepo/images/universer/earthSurfaceSpecular.jpg',
        cloudsMaterial: '//repo.bfw.wiki/bfwrepo/images/universer/earthAtmosphere.png'
      },
      moon: '//repo.bfw.wiki/bfwrepo/images/universer/moon.jpg',
      mars: {
        surfaceMaterial: '//repo.bfw.wiki/bfwrepo/images/universer/marsSurfaceMaterial.png'
      },
      jupiter: {
        surfaceMaterial: '//repo.bfw.wiki/bfwrepo/images/universer/jupiterSurfaceMaterial.jpg'
      },
      saturn: {
        surfaceMaterial: '//repo.bfw.wiki/bfwrepo/images/universer/saturnSurface.jpg',
        ringsMaterial: '//repo.bfw.wiki/bfwrepo/images/universer/saturnRings.png'
      },
      uranus: {
        surfaceMaterial: '//repo.bfw.wiki/bfwrepo/images/universer/uranusSurfaceMaterial.jpg'
      },
      neptune: {
        surfaceMaterial: '//repo.bfw.wiki/bfwrepo/images/universer/neptuneSurfaceMaterial.jpg'
      },
      pluto: {
        surfaceMaterial: '//repo.bfw.wiki/bfwrepo/images/universer/plutoSurfaceMaterial.jpg'
      },
    },
    consoleTag: 'H O U S E ~ f i d d l e s',
    constants: {
      SUN_SIZE_IN_EARTHS: 20,
      MOUSE_MOVE_TOLERANCE: 4,
      MAX_ROTATION_X: Math.PI / 2,
      MAX_CAMERA_Z: 10 * 50,
      MIN_CAMERA_Z: 10 * 3,
      EARTH_DISTANCE: 50,
      PLUTO_DISTANCE_IN_EARTHS: 77.2,
      EARTH_DISTANCE_SQUARED: 45000,
      EXAGGERATED_PLANET_SCALE: 5.55,
      MOON_DISTANCE_FROM_EARTH: 356400,
      MOON_PERIOD: 28,
      MOON_ROTATION_SPEED: 0.003,
      MOON_EXAGGERATE_FACTOR: 1.2,
      MOON_SIZE_IN_EARTHS: 1 / 3.7 * 1.2
    }
  };

  app.toolkit = app.toolkit || {};
  app.toolkit.three = app.toolkit.three || {};
  app.view = app.view || {};
  app.view.milkyway = app.view.milkyway || {};
  app.view.milkyway.saturn = app.view.milkyway.saturn || {};
  app.view.milkyway.earth = app.view.milkyway.earth || {};

  app.toolkit.three.Publisher = class {
    constructor() {
      this._messageTypes = {};
    }
    get messageTypes() {
      return this._messageTypes;
    }
    subscribe(message, subscriber, callback) {
      var subscribers = this.messageTypes[message];
      if (subscribers) {
        if (this.findSubscriber(subscribers, subscriber) != -1) {
          return;
        }
      } else {
        subscribers = [];
        this.messageTypes[message] = subscribers;
      }
      subscribers.push({
        subscriber: subscriber,
        callback: callback
      });
    }
    unsubscribe(message, subscriber, callback) {
      if (subscriber) {
        var subscribers = this.messageTypes[message];
        if (subscribers) {
          var i = this.findSubscriber(subscribers, subscriber, callback);
          if (i != -.........完整代码请登录后点击上方下载按钮下载查看

网友评论0