前端开发网页three.js:3D宇宙特效

网页前端界面开发|网页前端开发和网页美工的关系|前端网页开发html5

THREE.js有一个插件可以控制摄像机

html 代码

<!DOCTYPE html>

<html>

<head>

<title>web前端开发和网页设计:three.js</title>

<style>

body {

margin: 0;

}

body,

html {

overflow: hidden;

}

body,

html,

.canvasbox {

width: 100%;

height: 100%;

}

/* 坐标系 */

.zuobiaoxi {

position: absolute;

display: table;

right: 3px;

top: 3px;

font-size: 12px;

z-index: 1;

}

.zuobiaoxi,

.zuobiaoxi h6 {

color: #fff;

}

.zuobiaoxi h6,

.zuobiaoxi p {

margin: 2px 0;

}

.zuobiaoxi h6 {

font-size: 12px;

font-weight: normal;

}

</style>

</head>

<body>

<h6>摄像机坐标</h6>

<p>X:

</p>

<p>Y:

</p>

<p>Z:

</p>

</div>

/**

* @author qiao / https://github.com/qiao

* @author mrdoob / http://mrdoob.com

* @author alteredq / http://alteredqualia.com/

* @author WestLangley / http://github.com/WestLangley

* @author erich666 / http://erichaines.com

// This set of controls performs orbiting, dollying (zooming), and panning. Unlike TrackballControls, it maintains the “up” direction object.up (+Y by default). Orbit – left mouse / touch: one finger move Zoom – middle mouse, or mousewheel / touch: two finger spread or squish Pan – right mouse, or arrow keys / touch: three finter swipe

THREE.OrbitControls = function (object, domElement) { this.object = object; this.domElement = (domElement !== undefined) ? domElement : document; this.enabled = true; this.target = new THREE.Vector3(); this.minDistance = 0; this.maxDistance = Infinity; this.minZoom = 0; this.maxZoom = Infinity; this.minPolarAngle = 0; this.maxPolarAngle = Math.PI; this.minAzimuthAngle = -Infinity; this.maxAzimuthAngle = Infinity; this.enableDamping = false; this.dampingFactor = 0.25; this.enableZoom = true; this.zoomSpeed = 1.0; this.enableRotate = true; this.rotateSpeed = 1.0; this.enablePan = true; this.keyPanSpeed = 7.0; this.autoRotate = false; this.autoRotateSpeed = 2.0; this.enableKeys = true; this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 }; this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT }; this.target0 = this.target.clone(); this.position0 = this.object.position.clone(); this.zoom0 = this.object.zoom; this.getPolarAngle = function () { return phi }; this.getAzimuthalAngle = function () { return theta }; this.reset = function () { scope.target.copy(scope.target0); scope.object.position.copy(scope.position0); scope.object.zoom = scope.zoom0; scope.object.updateProjectionMatrix(); scope.dispatchEvent(changeEvent); scope.update(); state = STATE.NONE }; this.update = function () { var offset = new THREE.Vector3(); var quat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.Vector3(0, 1, 0)); var quatInverse = quat.clone().inverse(); var lastPosition = new THREE.Vector3(); var lastQuaternion = new THREE.Quaternion(); return function () { var position = scope.object.position; offset.copy(position).sub(scope.target); offset.applyQuaternion(quat); spherical.setFromVector3(offset); if (scope.autoRotate && state === STATE.NONE) { rotateLeft(getAutoRotationAngle()) } spherical.theta += sphericalDelta.theta; spherical.phi += sphericalDelta.phi; spherical.theta = Math.max(scope.minAzimuthAngle, Math.min(scope.maxAzimuthAngle, spherical.theta)); spherical.phi = Math.max(scope.minPolarAngle, Math.min(scope.maxPolarAngle, spherical.phi)); spherical.makeSafe(); spherical.radius *= scale; spherical.radius = Math.max(scope.minDistance, Math.min(scope.maxDistance, spherical.radius)); scope.target.add(panOffset); offset.setFromSpherical(spherical); offset.applyQuaternion(quatInverse); position.copy(scope.target).add(offset); scope.object.lookAt(scope.target); if (scope.enableDamping === true) { sphericalDelta.theta *= (1 – scope.dampingFactor); sphericalDelta.phi *= (1 – scope.dampingFactor) } else { sphericalDelta.set(0, 0, 0) } scale = 1; panOffset.set(0, 0, 0); if (zoomChanged || lastPosition.distanceToSquared(scope.object.position) > EPS || 8 * (1 – lastQuaternion.dot(scope.object.quaternion)) > EPS) { scope.dispatchEvent(changeEvent); lastPosition.copy(scope.object.position); lastQuaternion.copy(scope.object.quaternion); zoomChanged = false; return true } return false } }(); this.dispose = function () { scope.domElement.removeEventListener(‘contextmenu’, onContextMenu, false); scope.domElement.removeEventListener(‘mousedown’, onMouseDown, false); scope.domElement.removeEventListener(‘mousewheel’, onMouseWheel, false); scope.domElement.removeEventListener(‘MozMousePixelScroll’, onMouseWheel, false); scope.domElement.removeEventListener(‘touchstart’, onTouchStart, false); scope.domElement.removeEventListener(‘touchend’, onTouchEnd, false); scope.domElement.removeEventListener(‘touchmove’, onTouchMove, false); document.removeEventListener(‘mousemove’, onMouseMove, false); document.removeEventListener(‘mouseup’, onMouseUp, false); document.removeEventListener(‘mouseout’, onMouseUp, false); window.removeEventListener(‘keydown’, onKeyDown, false); }; var scope = this; var changeEvent = { type: ‘change’ }; var startEvent = { type: ‘start’ }; var endEvent = { type: ‘end’ }; var STATE = { NONE: -1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY: 4, TOUCH_PAN: 5 }; var state = STATE.NONE; var EPS = 0.000001; var spherical = new THREE.Spherical(); var sphericalDelta = new THREE.Spherical(); var scale = 1; var panOffset = new THREE.Vector3(); var zoomChanged = false; var rotateStart = new THREE.Vector2(); var rotateEnd = new THREE.Vector2(); var rotateDelta = new THREE.Vector2(); var panStart = new THREE.Vector2(); var panEnd = new THREE.Vector2(); var panDelta = new THREE.Vector2(); var dollyStart = new THREE.Vector2(); var dollyEnd = new THREE.Vector2(); var dollyDelta = new THREE.Vector2(); function getAutoRotationAngle() { return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed } function getZoomScale() { return Math.pow(0.95, scope.zoomSpeed) } function rotateLeft(angle) { sphericalDelta.theta -= angle } function rotateUp(angle) { sphericalDelta.phi -= angle } var panLeft = function () { var v = new THREE.Vector3(); return function panLeft(distance, objectMatrix) { v.setFromMatrixColumn(objectMatrix, 0); v.multiplyScalar(-distance); panOffset.add(v) } }(); var panUp = function () { var v = new THREE.Vector3(); return function panUp(distance, objectMatrix) { v.setFromMatrixColumn(objectMatrix, 1); v.multiplyScalar(distance); panOffset.add(v) } }(); var pan = function () { var offset = new THREE.Vector3(); return function (deltaX, deltaY) { var element = scope.domElement === document ? scope.domElement.body : scope.domElement; if (scope.object instanceof THREE.PerspectiveCamera) { var position = scope.object.position; offset.copy(position).sub(scope.target); var targetDistance = offset.length(); targetDistance *= Math.tan((scope.object.fov / 2) * Math.PI / 180.0); panLeft(2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix); panUp(2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix) } else if (scope.object instanceof THREE.OrthographicCamera) { panLeft(deltaX * (scope.object.right – scope.object.left) / scope.object.zoom / element.clientWidth, scope.object.matrix); panUp(deltaY * (scope.object.top – scope.object.bottom) / scope.object.zoom / element.clientHeight, scope.object.matrix) } else { console.warn(‘WARNING: OrbitControls.js encountered an unknown camera type – pan disabled.’); scope.enablePan = false } } }(); function dollyIn(dollyScale) { if (scope.object instanceof THREE.PerspectiveCamera) { scale /= dollyScale } else if (scope.object instanceof THREE.OrthographicCamera) { scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom * dollyScale)); scope.object.updateProjectionMatrix(); zoomChanged = true } else { console.warn(‘WARNING: OrbitControls.js encountered an unknown camera type – dolly/zoom disabled.’); scope.enableZoom = false } } function dollyOut(dollyScale) { if (scope.object instanceof THREE.PerspectiveCamera) { scale *= dollyScale } else if (scope.object instanceof THREE.OrthographicCamera) { scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom / dollyScale)); scope.object.updateProjectionMatrix(); zoomChanged = true } else { console.warn(‘WARNING: OrbitControls.js encountered an unknown camera type – dolly/zoom disabled.’); scope.enableZoom = false } } function handleMouseDownRotate(event) { rotateStart.set(event.clientX, event.clientY) } function handleMouseDownDolly(event) { dollyStart.set(event.clientX, event.clientY) } function handleMouseDownPan(event) { panStart.set(event.clientX, event.clientY) } function handleMouseMoveRotate(event) { rotateEnd.set(event.clientX, event.clientY); rotateDelta.subVectors(rotateEnd, rotateStart); var element = scope.domElement === document ? scope.domElement.body : scope.domElement; rotateLeft(2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed); rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed); rotateStart.copy(rotateEnd); scope.update() } function handleMouseMoveDolly(event) { dollyEnd.set(event.clientX, event.clientY); dollyDelta.subVectors(dollyEnd, dollyStart); if (dollyDelta.y > 0) { dollyIn(getZoomScale()) } else if (dollyDelta.y < 0) { dollyOut(getZoomScale()) } dollyStart.copy(dollyEnd); scope.update() } function handleMouseMovePan(event) { panEnd.set(event.clientX, event.clientY); panDelta.subVectors(panEnd, panStart); pan(panDelta.x, panDelta.y); panStart.copy(panEnd); scope.update() } function handleMouseUp(event) { } function handleMouseWheel(event) { var delta = 0; if (event.wheelDelta !== undefined) { delta = event.wheelDelta } else if (event.detail !== undefined) { delta = -event.detail } if (delta > 0) { dollyOut(getZoomScale()) } else if (delta < 0) { dollyIn(getZoomScale()) } scope.update() } function handleKeyDown(event) { switch (event.keyCode) { case scope.keys.UP: pan(0, scope.keyPanSpeed); scope.update(); break; case scope.keys.BOTTOM: pan(0, -scope.keyPanSpeed); scope.update(); break; case scope.keys.LEFT: pan(scope.keyPanSpeed, 0); scope.update(); break; case scope.keys.RIGHT: pan(-scope.keyPanSpeed, 0); scope.update(); break } } function handleTouchStartRotate(event) { rotateStart.set(event.touches[0].pageX, event.touches[0].pageY) } function handleTouchStartDolly(event) { var dx = event.touches[0].pageX – event.touches[1].pageX; var dy = event.touches[0].pageY – event.touches[1].pageY; var distance = Math.sqrt(dx * dx + dy * dy); dollyStart.set(0, distance) } function handleTouchStartPan(event) { panStart.set(event.touches[0].pageX, event.touches[0].pageY) } function handleTouchMoveRotate(event) { rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY); rotateDelta.subVectors(rotateEnd, rotateStart); var element = scope.domElement === document ? scope.domElement.body : scope.domElement; rotateLeft(2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed); rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed); rotateStart.copy(rotateEnd); scope.update() } function handleTouchMoveDolly(event) { var dx = event.touches[0].pageX – event.touches[1].pageX; var dy = event.touches[0].pageY – event.touches[1].pageY; var distance = Math.sqrt(dx * dx + dy * dy); dollyEnd.set(0, distance); dollyDelta.subVectors(dollyEnd, dollyStart); if (dollyDelta.y > 0) { dollyOut(getZoomScale()) } else if (dollyDelta.y < 0) { dollyIn(getZoomScale()) } dollyStart.copy(dollyEnd); scope.update() } function handleTouchMovePan(event) { panEnd.set(event.touches[0].pageX, event.touches[0].pageY); panDelta.subVectors(panEnd, panStart); pan(panDelta.x, panDelta.y); panStart.copy(panEnd); scope.update() } function handleTouchEnd(event) { } function onMouseDown(event) { if (scope.enabled === false) { return } event.preventDefault(); if (event.button === scope.mouseButtons.ORBIT) { if (scope.enableRotate === false) { return } handleMouseDownRotate(event); state = STATE.ROTATE } else if (event.button === scope.mouseButtons.ZOOM) { if (scope.enableZoom === false) { return } handleMouseDownDolly(event); state = STATE.DOLLY } else if (event.button === scope.mouseButtons.PAN) { if (scope.enablePan === false) { return } handleMouseDownPan(event); state = STATE.PAN } if (state !== STATE.NONE) { document.addEventListener(‘mousemove’, onMouseMove, false); document.addEventListener(‘mouseup’, onMouseUp, false); document.addEventListener(‘mouseout’, onMouseUp, false); scope.dispatchEvent(startEvent) } } function onMouseMove(event) { if (scope.enabled === false) { return } event.preventDefault(); if (state === STATE.ROTATE) { if (scope.enableRotate === false) { return } handleMouseMoveRotate(event) } else if (state === STATE.DOLLY) { if (scope.enableZoom === false) { return } handleMouseMoveDolly(event) } else if (state === STATE.PAN) { if (scope.enablePan === false) { return } handleMouseMovePan(event) } } function onMouseUp(event) { if (scope.enabled === false) { return } handleMouseUp(event); document.removeEventListener(‘mousemove’, onMouseMove, false); document.removeEventListener(‘mouseup’, onMouseUp, false); document.removeEventListener(‘mouseout’, onMouseUp, false); scope.dispatchEvent(endEvent); state = STATE.NONE } function onMouseWheel(event) { if (scope.enabled === false || scope.enableZoom === false || (state !== STATE.NONE && state !== STATE.ROTATE)) { return } event.preventDefault(); event.stopPropagation(); handleMouseWheel(event); scope.dispatchEvent(startEvent); scope.dispatchEvent(endEvent) } function onKeyDown(event) { if (scope.enabled === false || scope.enableKeys === false || scope.enablePan === false) { return } handleKeyDown(event) } function onTouchStart(event) { if (scope.enabled === false) { return } switch (event.touches.length) { case 1: if (scope.enableRotate === false) { return } handleTouchStartRotate(event); state = STATE.TOUCH_ROTATE; break; case 2: if (scope.enableZoom === false) { return } handleTouchStartDolly(event); state = STATE.TOUCH_DOLLY; break; case 3: if (scope.enablePan === false) { return } handleTouchStartPan(event); state = STATE.TOUCH_PAN; break; default: state = STATE.NONE }if (state !== STATE.NONE) { scope.dispatchEvent(startEvent) } } function onTouchMove(event) { if (scope.enabled === false) { return } event.preventDefault(); event.stopPropagation(); switch (event.touches.length) { case 1: if (scope.enableRotate === false) { return } if (state !== STATE.TOUCH_ROTATE) { return; } handleTouchMoveRotate(event); break; case 2: if (scope.enableZoom === false) { return } if (state !== STATE.TOUCH_DOLLY) { return; } handleTouchMoveDolly(event); break; case 3: if (scope.enablePan === false) { return } if (state !== STATE.TOUCH_PAN) { return; } handleTouchMovePan(event); break; default: state = STATE.NONE } } function onTouchEnd(event) { if (scope.enabled === false) { return } handleTouchEnd(event); scope.dispatchEvent(endEvent); state = STATE.NONE } function onContextMenu(event) { event.preventDefault() } scope.domElement.addEventListener(‘contextmenu’, onContextMenu, false); scope.domElement.addEventListener(‘mousedown’, onMouseDown, false); scope.domElement.addEventListener(‘mousewheel’, onMouseWheel, false); scope.domElement.addEventListener(‘MozMousePixelScroll’, onMouseWheel, false); scope.domElement.addEventListener(‘touchstart’, onTouchStart, false); scope.domElement.addEventListener(‘touchend’, onTouchEnd, false); scope.domElement.addEventListener(‘touchmove’, onTouchMove, false); window.addEventListener(‘keydown’, onKeyDown, false); this.update() }; THREE.OrbitControls.prototype = Object.create(THREE.EventDispatcher.prototype); THREE.OrbitControls.prototype.constructor = THREE.OrbitControls; Object.defineProperties(THREE.OrbitControls.prototype, { center: { get: function () { console.warn(‘THREE.OrbitControls: .center has been renamed to .target’); return this.target } }, noZoom: { get: function () { console.warn(‘THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.’); return !this.enableZoom }, set: function (value) { console.warn(‘THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.’); this.enableZoom = !value } }, noRotate: { get: function () { console.warn(‘THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.’); return !this.enableRotate }, set: function (value) { console.warn(‘THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.’); this.enableRotate = !value } }, noPan: { get: function () { console.warn(‘THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.’); return !this.enablePan }, set: function (value) { console.warn(‘THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.’); this.enablePan = !value } }, noKeys: { get: function () { console.warn(‘THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.’); return !this.enableKeys }, set: function (value) { console.warn(‘THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.’); this.enableKeys = !value } }, staticMoving: { get: function () { console.warn(‘THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.’); return !this.constraint.enableDamping }, set: function (value) { console.warn(‘THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.’); this.constraint.enableDamping = !value } }, dynamicDampingFactor: { get: function () { console.warn(‘THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.’); return this.constraint.dampingFactor }, set: function (value) { console.warn(‘THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.’); this.constraint.dampingFactor = value } } });

</script>

(function (canvasbox, _window) {

/* 基础 */

var scene, camera, renderer, states, controls;

var initCamera; // 初始化照相机

// 太阳、水、金、地、火、木、土、土星环、天、天王星环、海王星

var taiyang, shui, jin, di, huo, mu, tu, tu_huan, tian, tian_huan, hai;

(function () {

// 场景

scene = new THREE.Scene();

// 照相机

initCamera = function () {

camera = new THREE.PerspectiveCamera(60, canvasbox.clientWidth / canvasbox.clientHeight, 1, 1000);

}

initCamera();

camera.position.set(250, 250, 250);

camera.lookAt({

x: 0,

y: 0,

z: 0

});

// 渲染器

renderer = new THREE.WebGLRenderer();

renderer.setSize(canvasbox.clientWidth, canvasbox.clientHeight);

renderer.clear(0xffffff);

canvasbox.appendChild(renderer.domElement);

// 监视器

states = new Stats();

document.body.appendChild(states.domElement);

states.domElement.style.position = “absolute”;

states.domElement.style.left = 0;

states.domElement.style.top = 0;

controls = new THREE.OrbitControls(camera);

})();

/* 光照 */

(function () {

var huanjing = new THREE.AmbientLight(0x8f8f8f);

scene.add(huanjing);

})();

/* 宇宙背景 */

(function (PIC2) {

var yuzhou_geometr = new THREE.PlaneGeometry(500, 500, 1, 1);

var yuzhou_material = new THREE.MeshBasicMaterial({

map: THREE.ImageUtils.loadTexture(“http://www.w3cfuns.com/attachment/extend/notes/pics/201605/12/212412k1141w4h1nt1fftd.jpg”),

side: THREE.DoubleSide

});

var yuzhou = [];

for (var i = 0; i < 6; i++) {

yuzhou.push(new THREE.Mesh(yuzhou_geometr, yuzhou_material));

scene.add(yuzhou[i]);

}

// 正面

yuzhou[0].position.set(0, 0, 250);

// 反面

yuzhou[1].position.set(0, 0, -250);

// 左面

yuzhou[2].position.set(-250, 0, 0);

yuzhou[2].rotation.set(0, PIC2, 0);

// 右面

yuzhou[3].position.set(250, 0, 0);

yuzhou[3].rotation.set(0, PIC2, 0);

// 上面

yuzhou[4].position.set(0, 250, 0);

yuzhou[4].rotation.set(PIC2, 0, 0);

// 下面

yuzhou[5].position.set(0, -250, 0);

yuzhou[5].rotation.set(PIC2, 0, 0);

})(Math.PI / 2);

/* 星球 */

(function () {

// 太阳

(function () {

var taiyang_geometry = new THREE.SphereGeometry(32, 100, 100);

var taiyang_material = new THREE.MeshLambertMaterial({

emissive: 0xe65f05,

map: THREE.ImageUtils.loadTexture(“http://www.w3cfuns.com/attachment/extend/notes/pics/201605/12/212414y669k6hq6yq9yoyd.jpg”),

side: THREE.DoubleSide,

color: 0xffffff

});

taiyang = new THREE.Mesh(taiyang_geometry, taiyang_material);

scene.add(taiyang);

taiyang.position.set(0, 0, 0);

var taiyang_light = new THREE.PointLight(0xffffff, 1, 350);

taiyang_light.position.set(0, 0, 0);

scene.add(taiyang_light);

})();

// 水星

(function () {

var shui_geometry = new THREE.SphereGeometry(1, 100, 100);

var shui_material = new THREE.MeshLambertMaterial({

map: THREE.ImageUtils.loadTexture(“http://www.w3cfuns.com/attachment/extend/notes/pics/201605/12/212414pff85jucjf2fc5aj.jpg”),

side: THREE.DoubleSide,

});

shui = new THREE.Mesh(shui_geometry, shui_material);

scene.add(shui);

shui.position.set(0, 0, 35);

})();

// 金星

(function () {

var jin_geometry = new THREE.SphereGeometry(2, 100, 100);

var jin_material = new THREE.MeshLambertMaterial({

map: THREE.ImageUtils.loadTexture(“http://www.w3cfuns.com/attachment/extend/notes/pics/201605/12/212413v1pqsfp17046np69.jpg”),

side: THREE.DoubleSide,

});

jin = new THREE.Mesh(jin_geometry, jin_material);

scene.add(jin);

jin.position.set(0, 0, 42);

})();

// 地球

(function () {

var di_geometry = new THREE.SphereGeometry(4, 100, 100);

var di_material = new THREE.MeshLambertMaterial({

map: THREE.ImageUtils.loadTexture(“http://www.w3cfuns.com/attachment/extend/notes/pics/201605/12/212412na5paf7hzrp710pg.jpg”),

side: THREE.DoubleSide,

});

di = new THREE.Mesh(di_geometry, di_material);

scene.add(di);

di.position.set(0, 0, 55);

})();

// 火星

(function () {

var huo_geometry = new THREE.SphereGeometry(5, 100, 100);

var huo_material = new THREE.MeshLambertMaterial({

map: THREE.ImageUtils.loadTexture(“http://www.w3cfuns.com/attachment/extend/notes/pics/201605/12/212412p6qt9qgqzo1t96nd.jpg”),

side: THREE.DoubleSide,

});

huo = new THREE.Mesh(huo_geometry, huo_material);

scene.add(huo);

huo.position.set(0, 0, 70);

})();

// 木星

(function () {

var mu_geometry = new THREE.SphereGeometry(17, 100, 100);

var mu_material = new THREE.MeshLambertMaterial({

map: THREE.ImageUtils.loadTexture(“http://www.w3cfuns.com/attachment/extend/notes/pics/201605/12/212413y6svmlc52tv288mp.jpg”),

side: THREE.DoubleSide,

});

mu = new THREE.Mesh(mu_geometry, mu_material);

scene.add(mu);

mu.position.set(0, 0, 100);

mu.rotation.set(0, 20, 0);

})();

// 土星

(function () {

var tu_geometry = new THREE.SphereGeometry(11, 100, 100);

var tu_material = new THREE.MeshLambertMaterial({

map: THREE.ImageUtils.loadTexture(“http://www.w3cfuns.com/attachment/extend/notes/pics/201605/12/212416s4xwrvkw0ar6wutu.jpg”),

side: THREE.DoubleSide,

});

tu = new THREE.Mesh(tu_geometry, tu_material);

scene.add(tu);

tu.position.set(0, 0, 140);

tu.rotation.set(0.5, 0, 0);

// 土星环

var tu_huan_geometry = new THREE.CylinderGeometry(14, 22, 0, 100, 100, true);

var tu_huan_material = new THREE.MeshLambertMaterial({

map: THREE.ImageUtils.loadTexture(“http://www.w3cfuns.com/attachment/extend/notes/pics/201605/12/212416ikv311fsy7vif3km.jpg”),

side: THREE.DoubleSide,

});

tu_huan = new THREE.Mesh(tu_huan_geometry, tu_huan_material);

scene.add(tu_huan);

tu_huan.position.set(0, 0, 140);

tu_huan.rotation.set(0.5, 0, 0);

})();

// 天王星

(function () {

var tian_geometry = new THREE.SphereGeometry(9, 100, 100);

var tian_material = new THREE.MeshLambertMaterial({

map: THREE.ImageUtils.loadTexture(“http://www.w3cfuns.com/attachment/extend/notes/pics/201605/12/212414q44z3zeaaenqerbh.jpg”),

side: THREE.DoubleSide,

});

tian = new THREE.Mesh(tian_geometry, tian_material);

scene.add(tian);

tian.position.set(0, 0, 170);

tian.rotation.set(0, 0, 0.3);

// 天王星环

var tian_huan_geometry = new THREE.CylinderGeometry(10, 12, 0, 100, 100, true);

var tian_huan_material = new THREE.MeshLambertMaterial({

map: THREE.ImageUtils.loadTexture(“http://www.w3cfuns.com/attachment/extend/notes/pics/201605/12/212415e2vkzfvkyjijb386.jpg”),

side: THREE.DoubleSide,

});

tian_huan = new THREE.Mesh(tian_huan_geometry, tian_huan_material);

scene.add(tian_huan);

tian_huan.position.set(0, 0, 170);

tian_huan.rotation.set(0, 0, 0.3);

})();

// 海王星

(function () {

var hai_geometry = new THREE.SphereGeometry(6, 100, 100);

var hai_material = new THREE.MeshLambertMaterial({

map: THREE.ImageUtils.loadTexture(“http://www.w3cfuns.com/attachment/extend/notes/pics/201605/12/212412utl29a6tzaucac6l.jpg”),

side: THREE.DoubleSide,

});

hai = new THREE.Mesh(hai_geometry, hai_material);

scene.add(hai);

hai.position.set(0, 0, 192);

})();

/*坐标系

// 画线x

(function(){

var geometry = new THREE.Geometry();

var material = new THREE.LineBasicMaterial( { vertexColors: true } );

var color = new THREE.Color( 0xffffff );

// 线的材质可以由2点的颜色决定

var p1 = new THREE.Vector3(200, 0, 0);

var p2 = new THREE.Vector3(0, 0, 0);

geometry.vertices.push(p1);

geometry.vertices.push(p2);

geometry.colors.push(color, color);

var line = new THREE.Line( geometry, material, THREE.LinePieces );

scene.add(line);

})();

// 画线y

(function(){

var geometry = new THREE.Geometry();

var material = new THREE.LineBasicMaterial( { vertexColors: true } );

var color = new THREE.Color( 0x7cfc00 );

// 线的材质可以由2点的颜色决定

var p1 = new THREE.Vector3(0, 200, 0);

var p2 = new THREE.Vector3(0, 0, 0);

geometry.vertices.push(p1);

geometry.vertices.push(p2);

geometry.colors.push(color, color);

var line = new THREE.Line( geometry, material, THREE.LinePieces );

scene.add(line);

})();

// 画线z

(function(){

var geometry = new THREE.Geometry();

var material = new THREE.LineBasicMaterial( { vertexColors: true } );

var color = new THREE.Color( 0x00ffff );

// 线的材质可以由2点的颜色决定

var p1 = new THREE.Vector3(0, 0, 200);

var p2 = new THREE.Vector3(0, 0, 0);

geometry.vertices.push(p1);

geometry.vertices.push(p2);

geometry.colors.push(color, color);

var line = new THREE.Line( geometry, material, THREE.LinePieces );

scene.add(line);

})();

/* 初始化 */

(function () {

var PI2 = 2 * Math.PI; // 弧度的最大值

var zuobiaoxi = [ // 显示坐标系的信息

document.getElementById(“zuobiao-x”), // X

document.getElementById(“zuobiao-y”), // Y

document.getElementById(“zuobiao-z”) // Z

];

// 自转

function zizhuan() {

taiyang.rotation.y = taiyang.rotation.y + 0.01 >= 2 * PI2 ? 0 : taiyang.rotation.y + 0.01; // 太阳自转

shui.rotation.y = shui.rotation.y + 0.1 >= 2 * PI2 ? 0 : shui.rotation.y + 0.1; // 水星自转

jin.rotation.y = jin.rotation.y + 0.05 >= 2 * PI2 ? 0 : jin.rotation.y + 0.05; // 金星自转

di.rotation.y = di.rotation.y + 0.05 >= 2 * PI2 ? 0 : di.rotation.y + 0.05; // 地球自转

huo.rotation.y = huo.rotation.y + 0.03 >= 2 * PI2 ? 0 : huo.rotation.y + 0.03; // 火星自转

mu.rotation.y = mu.rotation.y + 0.003 >= 2 * PI2 ? 0 : mu.rotation.y + 0.003; // 木星自转

tu.rotation.y = tu.rotation.y + 0.01 >= 2 * PI2 ? 0 : tu.rotation.y + 0.01; // 土星自转

tian.rotation.y = tian.rotation.y + 0.005 >= 2 * PI2 ? 0 : tian.rotation.y + 0.005; // 天王自转

hai.rotation.y = hai.rotation.y + 0.003 >= 2 * PI2 ? 0 : hai.rotation.y + 0.003; // 海王星自转

}

// 定义角度

var shui_deg, jin_deg, di_deg, huo_deg, mu_deg, tu_deg, tian_deg, hai_deg;

shui_deg = jin_deg = di_deg = huo_deg = mu_deg = tu_deg = tian_deg = hai_deg = 0;

// 公转

function gongzhuan() {

// 水星

shui_deg = shui_deg + 0.1 >= PI2 ? 0 : shui_deg + 0.1;

shui.position.set(35 * Math.sin(shui_deg), 0, 35 * Math.cos(shui_deg));

// 金星

jin_deg = jin_deg + 0.07 >= PI2 ? 0 : jin_deg + 0.07;

jin.position.set(42 * Math.sin(jin_deg), 0, 42 * Math.cos(jin_deg));

// 地球

di_deg = di_deg + 0.03 >= PI2 ? 0 : di_deg + 0.03;

di.position.set(55 * Math.sin(di_deg), 0, 55 * Math.cos(di_deg));

// 火星

huo_deg = huo_deg + 0.01 >= PI2 ? 0 : huo_deg + 0.01;

huo.position.set(70 * Math.sin(huo_deg), 0, 70 * Math.cos(huo_deg));

// 木星

mu_deg = mu_deg + 0.002 >= PI2 ? 0 : mu_deg + 0.002;

mu.position.set(100 * Math.sin(mu_deg), 0, 100 * Math.cos(mu_deg));

// 土星

tu_deg = tu_deg + 0.0009 >= PI2 ? 0 : tu_deg + 0.0009;

tu.position.set(140 * Math.sin(tu_deg), 0, 140 * Math.cos(tu_deg));

tu_huan.position.set(140 * Math.sin(tu_deg), 0, 140 * Math.cos(tu_deg));

// 天王星

tian_deg = tian_deg + 0.0005 >= PI2 ? 0 : tian_deg + 0.0005;

tian.position.set(170 * Math.sin(tian_deg), 0, 170 * Math.cos(tian_deg));

tian_huan.position.set(170 * Math.sin(tian_deg), 0, 170 * Math.cos(tian_deg));

// 海王星

hai_deg = hai_deg + 0.0003 >= PI2 ? 0 : hai_deg + 0.0003;

hai.position.set(192 * Math.sin(hai_deg), 0, 192 * Math.cos(hai_deg));

}

// 显示信息

function displayXYZ() {

zuobiaoxi[0].innerHTML = parseInt(camera.position.x); // 摄像机X

zuobiaoxi[1].innerHTML = parseInt(camera.position.y); // 摄像机Y

zuobiaoxi[2].innerHTML = parseInt(camera.position.z); // 摄像机Z

}

// 窗口改变事件

function windowChange() {

var x = camera.position.x,

y = camera.position.y,

z = camera.position.z;

initCamera();

controls = new THREE.OrbitControls(camera);

camera.position.set(x, y, z);

camera.lookAt({

x: 0,

y: 0,

z: 0

});

renderer.setSize(canvasbox.clientWidth, canvasbox.clientHeight);

displayXYZ();

}

// 动画

function animate() {

states.begin();

zizhuan();

gongzhuan();

renderer.clear();

renderer.render(scene, camera);

states.end();

requestAnimationFrame(animate);

}

// 初始化

function init() {

displayXYZ();

_window.addEventListener(“resize”, windowChange, false);

controls.addEventListener(“change”, displayXYZ, false);

requestAnimationFrame(animate);

}

init();

})();

})(document.getElementById(“canvasbox”), window);

</script>

</body>

</html>

网页设计前端开发自学网|网页前端开发面试|炫酷的前端开发网页作品

前端开发网页three.js:3D宇宙特效

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发