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

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

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

html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=”utf-8″>
    <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>
    <div class=”canvasbox” id=”canvasbox”></div>
    <div class=”zuobiaoxi”>
        <h6>摄像机坐标</h6>
        <p>X:
            <span id=”zuobiao-x”></span>
        </p>
        <p>Y:
            <span id=”zuobiao-y”></span>
        </p>
        <p>Z:
            <span id=”zuobiao-z”></span>
        </p>
    </div>
    <script src=”https://cdn.bootcss.com/three.js/r76/three.min.js”></script>
    <script src=”https://cdn.bootcss.com/stats.js/r16/Stats.min.js”></script>
    <script>/*控制摄像机的插件*/
        /**
         * @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>
    <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宇宙特效》
» 本文链接地址:https://www.rokub.com/4810.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!