加载等待动画（Loading）

示例

HTML

h1 Loading...
#loading

CSS

body
  margin: 0
  font-family: 'Lato'
  text-align: center
  background-color: LightGray
#loading
  position: absolute
  height: 50%
  width: 100%
  top: 0
h1
  position: absolute
  width: 100%
  top: 30%

JS

WebFont.load({
  google: {
    families: ['Lato']
  }
});

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);
$('#loading').append(renderer.domElement);

var icos = new THREE.Mesh(new THREE.CubeGeometry(0.5, 0.5, 0.5), new THREE.MeshPhongMaterial({
  ambient: 0xffffff, 
  color: 0xffffff, 
  specular: 0x000000,
  emissive: 0x000000,
  shininess: 100, 
  shading: THREE.FlatShading
}));
scene.add(icos);

var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set( 0, 1, 0 );
scene.add( directionalLight );

var t = 0;
function render() {
  requestAnimationFrame(render);
  icos.rotation.x += 0.1;
  icos.rotation.y += 0.1;
  icos.rotation.z += 0.1;
  t += 0.1;
  camera.position.x = icos.position.x + 5 * Math.cos(t);
  camera.position.z = icos.position.z + 5 * Math.sin(t);
  camera.lookAt(icos.position);
  renderer.render(scene, camera);
}
render();