3d旋转

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

/**
 * Create spherical spiral for given turns with almost same gap distance
 * @see [Archimedean Spherical Spiral]{@link http://en.wikipedia.org/wiki/Spiral#Spherical_spiral}
 * @param {number} turns - Times of turns around z-axis
 * @param {number} [count=800] - Number of points on spiral
 * @param {number} [radius=1] - Radius of sphere
 * @returns {Point[]} - Points (r,θ,φ) of spiral in spherical coordinates
 */
function createSphericalSpiral(turns, count, radius) {
  'use strict';
  // Spherical coordinate system in mathematics
  // (radial distance r, azimuthal angle θ, polar angle φ)
  // @see [Spherical coordinate system]{@link http://en.wikipedia.org/wiki/Spherical_coordinate_system}
  count = count || 800;
  radius = radius || 1;
  var step = 2 / count;
  var phi, theta, point, points = [];
  for (var i = -1; i <= 1; i += step) {
    phi = Math.acos(i);
    theta = 2 * turns * phi % (2 * Math.PI);
    point = {
      'radius': radius,
      'theta': theta,
      'phi': phi
    };
    points.push(point);
  }
  return points;
}

/**
 * Convert from spherical coordinates (r,θ,φ) to Cartesian coordinates (x,y,z)
 * @see {@link http://en.wikipedia.org/wiki/Spherical_coordinate_system#Cartesian_coordinates}
 * @param {{radius:number,theta:number,phi:number}} point - Point in spherical coordinates
 * @returns {{x:number,y:number,z:number}} - Point in Cartesian coordinates
 */
function convert2xyz(point) {
  'use strict';
  var x = point.radius * Math.sin(point.phi) * Math.sin(point.theta);
  var y = point.radius * Math.sin(point.phi) * Math.cos(point.theta);
  var z = point.radius * Math.cos(point.phi);
  return {
    'x': x,
    'y': y,
    'z': z
  };
}

// useage
// var spiral = createSphericalSpiral(10, 1000);
// spiralInXYZ = spiral.map(convert2xyz);
/**
 * draw spherical spiral by d3 3.0
 * load http://d3js.org/d3.v3.min.js first
 */
var spiral = createSphericalSpiral(10, 400);

function convert2GeoProjection(point) {
  var longitude = point.theta * 180 / Math.PI;
  var latitude = point.phi * 180 / Math.PI - 90;
  return [longitude, latitude];
}

var width = 600,
  height = 600,
  speed = 0.01,
  start = Date.now();

var canvas = d3.select('body').append('canvas')
  .attr('width', width)
  .attr('height', height);
var context = canvas.node().getContext('2d');

var projection = d3.geo.orthographic()
  .scale(width / 2.2)
  .clipAngle(90)
  .translate([width / 2, height / 2])
  .precision(0.5);

var path = d3.geo.path()
  .projection(projection)
  .context(context);

var sphere = {
  type: 'Sphere'
};
var graticule = d3.geo.graticule();
var grid = graticule();

var spiralPositions = spiral.map(convert2GeoProjection);
var spiralLine = {
  'type': 'LineString',
  'coordinates': spiralPositions
};
var spiralMultiPoint = {
  'type': 'MultiPoint',
  'coordinates': spiralPositions
};

d3.timer(function() {
  projection.rotate([speed * (Date.now() - start), -15, -10]);

context.clearRect(0, 0, width, height);

context.beginPath();
  path(sphere);
  context.fillStyle = '#fff';
  context.fill();

context.beginPath();
  path(grid);
  context.lineWidth = 0.5;
  context.strokeStyle = '#999';
  context.stroke();

context.beginPath();
  path(spiralLine);
  context.lineWidth = 1.5;
  context.strokeStyle = '#F00';
  context.stroke();

context.beginPath();
  path(spiralMultiPoint);
  context.fillStyle = '#F00';
  context.fill();
}, 1000);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg