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

代码语言：html

所属分类：三维

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

下面为部分代码预览，完整代码请点击下载或在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 != -1) {
            this.messageTypes[message].splice(i, 1);
          }
        }
      } else {
        delete this.messageTypes[message];
      }
    }
    publish(message) {
      var subscribers = this.messageTypes[message];
      if (subscribers) {
        for (var i = 0; i < subscribers.length; i++) {
          var args = [];
          for (var j = 0; j < arguments.length - 1; j++) {
            args.push(arguments[j + 1]);
          }
          subscribers[i].callback.apply(subscribers[i].subscriber, args);
        }
      }
    }
    findSubscriber(subscribers, subscriber) {
      for (var i = 0; i < subscribers.length; i++) {
        if (subscribers[i] == subscriber) {
          return i;
        }
      }
      return -1;
    }
  }

  app.toolkit.three.R = class extends app.toolkit.three.Publisher {
    config() {
      return {
        keyUp: null,
        keyDown: null,
        keyPress: null,
        mouseMove: null,
        mouseDown: null,
        mouseUp: null,
        mouseScroll: null
      }
    }
    constructor(config) {
      super(config);
      this._objects = [];
      this._handleKeyUp = config && config.hasOwnProperty('keyUp') ? config.keyUp : this.config().keyUp;
      this._handleKeyDown = config && config.hasOwnProperty('keyDown') ? config.keyDown : this.config().keyDown;
      this._handleKeyPress = config && config.hasOwnProperty('keyPress') ? config.keyPress : this.config().keyPress;
      this._handleMouseMove = config && config.hasOwnProperty('mouseMove') ? config.mouseMove : this.config().mouseMove;
      this._handleMouseDown = config && config.hasOwnProperty('mouseDown') ? config.mouseDown : this.config().mouseDown;
      this._handleMouseUp = config && config.hasOwnProperty('mouseUp') ? config.mouseUp : this.config().mouseUp;
      this._handleMouseScroll = config && config.hasOwnProperty('mouseScroll') ? config.mouseScroll : this.config().mouseScroll;
      this._overObject = null;
      this._clickedObject = null;
    }
    get hook() {
      return this._hook;
    }
    get renderer() {
      return this._renderer;
    }
    get scene() {
      return this._scene;
    }
    get camera() {
      return this._camera;
    }
    get root() {
      return this._root;
    }
    get projector() {
      return this._projector;
    }
    get objects() {
      return this._objects;
    }
    get handleKeyUp() {
      return this._handleKeyUp;
    }
    get handleKeyDown() {
      return this._handleKeyDown;
    }
    get handleKeyPress() {
      return this._handleKeyPress;
    }
    get handleMouseMove() {
      return this._handleMouseMove;
    }
    get handleMouseDown() {
      return this._handleMouseDown;
    }
    get handleMouseUp() {
      return this._handleMouseUp;
    }
    get handleMouseScroll() {
      return this._handleMouseScroll;
    }
    get clickedObject() {
      .........完整代码请登录后点击上方下载按钮下载查看