three实现多窗体共享的三维小球旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现多窗体共享的三维小球旋转动画效果代码，打开新的窗体，新增小球会实时显示。

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

<!DOCTYPE html>
<html lang="en">

<head>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.124.js"></script>
    <style type="text/css">
        *
                        {
                                margin: 0;
                                padding: 0;
                        }
    </style>
</head>

<body>

    <script type="module" >
        
        class WindowManager 
{
        #windows;
        #count;
        #id;
        #winData;
        #winShapeChangeCallback;
        #winChangeCallback;
        
        constructor ()
        {
                let that = this;

                // event listener for when localStorage is changed from another window
                addEventListener("storage", (event) => 
                {
                        if (event.key == "windows")
                        {
                                let newWindows = JSON.parse(event.newValue);
                                let winChange = that.#didWindowsChange(that.#windows, newWindows);

                                that.#windows = newWindows;

                                if (winChange)
                                {
                                        if (that.#winChangeCallback) that.#winChangeCallback();
                                }
                        }
                });

                // event listener for when current window is about to ble closed
                window.addEventListener('beforeunload', function (e) 
                {
                        let index = that.getWindowIndexFromId(that.#id);

                        //remove this window from the list and update local storage
                        that.#windows.splice(index, 1);
                        that.updateWindowsLocalStorage();
                });
        }

        // check if theres any changes to the window list
        #didWindowsChange (pWins, nWins)
        {
                if (pWins.length != nWins.length)
                {
                        return true;
                }
                else
                {
                        let c = false;

                        for (let i = 0; i < pWins.length; i++)
                        {
                                if (pWins[i].id != nWins[i].id) c = true;
                        }

                        return c;
                }
        }

        // initiate current window (add metadata for custom data to store with each window instance)
        init (metaData)
        {
                this.#windows = JSON.parse(localStorage.getItem("windows")) || [];
                this.#count= localStorage.getItem("count") || 0;
                this.#count++;

                this.#id = this.#count;
                let shape = this.getWinShape();
                this.#winData = {id: this.#id, shape: shape, metaData: metaData};
                this.#windows.push(this.#winData);

                localStorage.setItem("count", this.#count);
                this.updateWindowsLocalStorage();
        }

        getWinShape ()
        {
                let shape = {x: window.screenLeft, y: window.screenTop, w: window.innerWidth, h: window.innerHeight};
                return shape;
        }

        getWindowIndexFromId (id)
        {
                let index = -1;

                for (let i = 0; i < this.#windows.length; i++)
                {
                        if (this.#windows[i].id == id) index = i;
                }

                return index;
        }

        updateWindowsLocalStorage ()
        {
                localStorage.setItem("windows", JSON.stringify(this.#windows));
        }

        update ()
        {
                //console.log(step);
                let winShape = this.getWinShape();

                //console.log(winShape.x, winShape.y);

                if (winShape.x != this.#winData.shape.x ||
                        winShape.y != this.#winData.shape.y ||
                        winShape.w != this.#winData.shape.w ||
                        winShape.h != this.#winData.shape.h)
                {
                        
                        this.#winData.shape = winShape;

                        let index = this.getWindowIndexFromId(this.#id);
                        this.#windows[index].shape = winShape;

                        //console.log(windows);
                        if (this.#winShapeChangeCallback) this.#winShapeChangeCallback();
                        this.updateWindowsLocalStorage();
                }
        }

        setWinShapeChangeCallback (callback)
        {
                this.#winShapeChangeCallback = callback;
        }

        setWinChangeCallback (callback)
        {
                this.#winChangeCallback = callback;
        }

        getWindows ()
        {
                return this.#windows;
        }

        getThisWindowData ()
        {
                return this.#winData;
        }

        getThisWindowID ()
        {
                return this.#id;
        }
}



const t = THREE;
let camera, scene, renderer, world;
let near, far;
let pixR = window.devicePixelRatio ? window.devicePixelRatio : 1;
let cubes = [];
let sceneOffsetTarget = {x: 0, y: 0};
let sceneOffset = {x: 0, y: 0};

let today = new Date();
today.setHours(0);
today.setMinutes(0);
today.setSeconds(0);
today.setMilliseconds(0);
today = today.getTime();

let internalTime = getTime();
let windowManager;
let initialized = false;

// get time in seconds since beginning of the day (so that all windows use the same time)
function getTime ()
{
        return (new Date().getTime() - today) / 1000.0;
}


if (new URLSearchParams(window.location.search).get("clear"))
{
        localStorage.clear();
}
else
{       
        // this code is essential to circumvent that some browsers preload the content of some pages before you actually hit the url
        document.addEventListener("visibilitychange", () => 
        {
                if (document.visibilityState != 'hidden' && !initialized)
                {
                        init().........完整代码请登录后点击上方下载按钮下载查看