三维环旋转

更多有趣示例 尽在 知屋安砖社区

示例

HTML

<div class="interface">
		<div class="text text-made">Made with <span class="love"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path id="favorite-2-icon" d="M450.703,124.225C410.233,41.419,287.288,47.821,256,119.967c-31.288-72.146-154.233-78.548-194.703,4.257C13.59,221.837,124.309,314.82,256,448.014C387.691,314.82,498.41,221.837,450.703,124.225z"/></svg>
		</span> by <a href="https://twitter.com/nicolasdnl" target="_blank" class="text-link">Nicolas Daniel</a></div>
		<div class="text text-inspiration">Inspired by <a href="http://gif.flrn.nl/post/112245334424" target="_blank" class="text-link">gif.flrn.nl</a></div>
	</div>

CSS

@import "lesshat";

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.interface {
	position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
	z-index: 111;
}

canvas {
	position: absolute;
	top: 0;
	left: 0;
}

.text {
	.opensans;
	font-size: 14px;
	color: #fff;
}

.text-made {
	position: absolute;
	bottom: 22px;
	left: 22px;
}

.text-inspiration {
	position: absolute;
	bottom: 22px;
	right: 22px;
}

.text-link {
	position: relative;

	color: #fff;
	font-weight: 600;
	text-decoration: none;

	&:after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 1px;

		background-color: #fff;

		.transition(width 0.2s ease-out);
	}

	&:hover {
		&:after {
			width: 100%;
		}
	}
}

.love svg {
	width: 12px;
	height: 12px;
	fill: #F44336;
}

.opensans {
	font-family : "Open Sans";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.dg.ac {
  z-index: 999 !important;
}

JS

var Gif = function(callback) { this.init(function(){callback();}); };
var p = Gif.prototype;

/**
	 * Parameters
	 */
p.rings = [];
p.colors = [0xe44231, 0x008080, 0xfead13, 0xe44231, 0x008080, 0xfead13, 0xe44231, 0x008080, 0xfead13];

/**
	 * Initialisation
	 */
p.init = function() {
  p.initScene();
  p.initEventListeners();
};

p.initEventListeners = function() {
  p.renderer.domElement.addEventListener('mousedown', p.onMouseDown);
  p.renderer.domElement.addEventListener('mousemove', p.onMouseMove);
  p.renderer.domElement.addEventListener('mouseup', p.onMouseUp);
}

/**
	 * Init scene
	 */
p.initScene = function() {
  p.scene = new THREE.Scene();
  p.initCamera();
  p.initLights();
  p.initRenderer();

  p.createRings();
  p.initControls();

  p.render();
};

p.initCamera = function() {
  // p.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  p.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 1000 );
  p.camera.position.y = 5;
  p.camera.position.z = -200;
  p.camera.updateProjectionMatrix();
  p.camera.lookAt(this.scene.position);
};

p.initRenderer = function(callback) {
  p.renderer = new THREE.WebGLRenderer({antialias: true});
  p.renderer.setSize( window.innerWidth, window.innerHeight );
  p.renderer.setClearColor( 0x262626, 1 );
  p.renderer.domElement.id = "canvas3d";
  document.body.appendChild(p.renderer.domElement);
};

p.initLights = function() {
  var light = new THREE.DirectionalLight( 0xffffff, 1 );
  light.position.set( -55, 10, 40 );
  p.scene.add( light );
  var light = new THREE.DirectionalLight( 0xffffff, 1 );
  light.position.set( 55, -55, 55 );
  p.scene.add( light );
  var light = new THREE.DirectionalLight( 0xffffff, 1 );
  light.position.set( 50, 50, 0 );
  p.scene.add( light );
  var light = new THREE.DirectionalLight( 0xffffff, 0.4 );
  light.position.set( 0, 10, 0 );
  p.scene.add( light );
};

p.initControls = function() {
  var gui = new dat.GUI();
  var Configuracion=function(){
    this.color1 = "#e44231";
    this.color2 = "#21a5ad";
    this.color3 = "#fead13";
  }
  var conf = new Configuracion();

  var control1 = gui.addColor( conf, 'color1');
  var control2 = gui.addColor( conf, 'color2');
  var control3 = gui.addColor( conf, 'color3');
  control1.onChange(p.changeColor.bind(this,0));
  control2.onChange(p.changeColor.bind(this,1));
  control3.onChange(p.changeColor.bind(this,2));
};

p.changeColor = function(index, colorValue) {
  colorValue=colorValue.replace( '#','0x' );
  p.rings[index].material.color.setHex(colorValue);
  p.rings[index+3].material.color.setHex(colorValue);
  p.rings[index+6].material.color.setHex(colorValue);
};

p.createRings = function() {
  p.ringGroup = new THREE.Group();
  p.scene.add(p.ringGroup);


  p.tl = new TimelineMax({repeat: -1, delay: 1});
  for (var i = 0 ; i<9 ; ++i ) {
    var pts = [
      new THREE.Vector3(30+i*20,0,20),//top left
      new THREE.Vector3(30+i*20-10,0,20),//top right
      new THREE.Vector3(30+i*20-10,0,-20),//bottom right
      new THREE.Vector3(30+i*20,0,-20),//bottom left
      new THREE.Vector3(30+i*20,0,20)//back to top left - close square path
    ];
    p.geometry = new THREE.LatheGeometry( pts, 50 );
    p.material = new THREE.MeshLambertMaterial({color : p.colors[i], shading: THREE.FlatShading});
    p.ring = new THREE.Mesh(p.geometry, p.material);
    p.ring.position.z = 24;
    p.ring.overdraw = true;
    p.ring.doubleSided = true;
    p.ringGroup.add(p.ring);
    p.rings.push(p.ring);

    p.tl.to(p.ring.rotation, 4, {x: Math.PI, y: 2*Math.PI, ease: Expo.easeInOut}, 0.2*i);
  }
};

p.render = function() {
  requestAnimationFrame(p.render);
  p.renderer.render(p.scene, p.camera);
};

p.onMouseMove = function(e) {
  if (!p.mouseDown) {
    return;
  }

  e.preventDefault();

  var deltaX = e.clientX - p.mouseX,
      deltaY = e.clientY - p.mouseY;
  p.mouseX = e.clientX;
  p.mouseY = e.clientY;
  p.rotateScene(deltaX, deltaY);
}

p.onMouseDown = function(e) {
  e.preventDefault();

  p.mouseDown = true;
  p.mouseX = e.clientX;
  p.mouseY = e.clientY;
}

p.onMouseUp = function(e) {
  e.preventDefault();

  p.mouseDown = false;
}

p.rotateScene = function(deltaX, deltaY) {
  p.scene.rotation.y += deltaX / 50;
  p.scene.rotation.x += deltaY / 50;
}

window.Gif = Gif;
var gif = new Gif();