多图合成360旋转效果-html代码-BFW代码库

多图合成360旋转效果

代码语言：html

所属分类：三维

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ZIM 360 View at 49% Original Code</title>
</head>
<body translate="no">
    <script src='http://repo.bfw.wiki/bfwrepo/js/createjs_min.js'></script>
    <script src='http://repo.bfw.wiki/bfwrepo/js/zim.js'></script>

    <script>
        const scaling = "fit"; // this will resize to fit inside the screen dimensions
        const width = 1024;
        const height = 768;
        const color = light;
        const outerColor = darker;

        // as of ZIM 5.5.0 you do not need to put zim before ZIM functions and classes
        const assets = "bike.jpg";
        const path = "http://editor.bfw.wiki/bfwrepo/files/";
        const frame = new Frame(scaling, width, height, color, outerColor, assets, path);
        frame.on("ready", function () {
            zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

            let stage = frame.stage;
            let stageW = frame.width;
            let stageH = frame.height;

            // thanks massimo at https://codepen.io/_massimo/pen/zVYVNb
            // for the initial code and assets
            // it has been completely recoded in ZIM at 49%
            // of course the CreateJS and ZIM library adds lots of code
            // but we don't have to code it ;-)

            // this will be the object we swipe on to spin bike
            // if we made the swipe object the stage (this is common)
            // then swiping the sliders would swipe the bike ;-)
            // so use a sized backing the same color as the stage
            // there is a clear color - but it is not interactive
            // unless expand() is set on object
            // or specifically expand(0) to keep hitArea same
            // but white color is fine
            const bikeBacking = new Rectangle(stageW, 470, white).center().sha();

            const bike = new Sprite(frame.asset("bike.jpg"), 34).center();

            const slider = new Slider(0, 33, null, null, 500, 1, grey).
            sca(.7).
            center().
            mov(0, 200).
            change(function () {
                bike.frame = slider.currentValue;
            });

            // to animate the sprite at different speeds use a ZIM Dynamo
            const dynamo = new Dynamo(bike, 60);
            var dir = 1; // used to keep track of direction
            fps(20); // set a starting fps - see the fps() function below
            dynamo.pause(); // pause the dynamo to start

            const swiper = new Swiper({
                swipeOn: bikeBacking,
                target: bike,
                property: "frame",
                sensitivity: .1,
                damp: .3,
                min: 0,
                max: 33,
                factor: -1,
                loop: true
            });

            swiper.enabled = false; // turn off the swiper to start

            const tabs = new Tabs({
                width: 650,
                height: 60,
                tabs: [&.........完整代码请登录后点击上方下载按钮下载查看