行星介绍html页面布局,html5 canvas宇宙中行星运动特效

特效描述：html5 canvas 宇宙中 行星运动特效。html5彩色的星球动画、宇宙中行星运行背景动画特效。

代码结构

1. 引入JS

2. HTML代码

var scene, camera, renderer, sphere, sphere2, torus, torus2;

var shape = [];

function init () {

var t = THREE;

scene = new t.Scene();

camera = new t.PerspectiveCamera(105,window.innerWidth/window.innerHeight, 1,5000);

camera.position.z = 2000;

renderer = new t.WebGLRenderer({alpha:true});

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.shadowMap.enabled = true;

renderer.shadowMap.type = THREE.PCFSoftShadowMap;

renderer.setClearColor( 0xffffff, 0);

renderer.shadowMapSoft = true;

renderer.autoClear = false;

document.body.appendChild(renderer.domElement);

window.addEventListener("resize", function (argument) {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

})

var controls = new THREE.OrbitControls( camera );

}

function createObj() {

var sphereMaterial = new THREE.MeshPhongMaterial({

color : new THREE.Color("#fff"),

emissiv