HTML5 3D旋转地球canvas动画特效

代码语言:html

所属分类:三维

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/clay.min.js"></script>
    <script type="text/javascript">

        function Earth() {
            var stage = new Clay.Stage(800, 600);
            var world = stage.getWorld();
            var camera = stage.getCamera();

            camera.set(0, 0, 0);
            camera.setResolution(800, 600);
            camera.setTarget(new Clay.Vector(-100, 0, 100));

            window.onresize = function() {
                stage.resizeTo(
                    800, 600
                );
            };

            window.onresize();
            Clay.Collada.load('//repo.bfw.wiki/bfwrepo/image/earth.xml', function (scene) {
                scene.init(stage);

                var earth = new Clay.Texture('//repo.bfw.wiki/bfwrepo/image/earthmap1k.jpg', stage);

                var clouds = new Image();
                clouds.src = '//repo.bfw.wiki/bfwrepo/image/earthclouds1k.png';

                var dark = new Image();
                dark.src = '//repo.bfw.wiki/bfwrepo/image/darkside.png';

                var waiting = setInterval(function() {
                    if (earth.complete && clouds.complete && dark.complete) {
                        clearInterval(waiting);
                        play();
                    }
                },
                    1000);

                function play.........完整代码请登录后点击上方下载按钮下载查看

网友评论0