如何解决Safari上三个js在我的网页上触发的错误?

我的朋友经营着一个在线广播电台,所以为了他的生日,我为他制作了一个网页。我是一个新的javascript,所以对我来说是一个很好的学习经验。经过一番摸索,我成功地让它在台式机和手机上顺利运行。但是,我在I手机上测试失败了,昨天我给他介绍的时候,也没有成功!

所以我在Browserstack上给自己弄了个免费账号,发现了Safari上产生的错误,但我不知道该如何去解决。

这里是网页的链接。

这个网站的问题

先写代码再写下面的错误。


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> The Hatch Radio Station </title>
        <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
        <style>
            body {
                margin: 0;
                overflow: hidden;
                display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
                display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
                display: -ms-flexbox;  /* TWEENER - IE 10 */
                display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
                display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
                flex-direction: column;
                justify-content: center;
                background: black;
                color: white;
                font-size: 1cm;
                font-family: 'Anton', sans-serif;
            }
            .horizcontainer {
                display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
                display: -ms-flexbox;  /* TWEENER - IE 10 */
                display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
                display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
                flex-direction: row;
                justify-content: center;
            }
            #c {
                width:100vh;
                height:100vh;
            }
            .overlay {
                position: absolute;
                width:100%;
                height:100%;
                color: white;
                display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
                display: -ms-flexbox;  /* TWEENER - IE 10 */
                display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
                display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
                flex-direction: column;
                justify-content: center;
            }
            #Schedule {
                font-size: 0.5cm;
            }
        </style>
        <script src="https://threejs.org/build/three.js"> </script>
    </head>
    <body>
        <div class="horizcontainer">
                <canvas id="c">
                </canvas>
        </div>
        <div class="overlay">
            <div>
                THE HATCH
            </div>
            <div id="Schedule">
                Next Live Session:  Martin Robinson @ 8:00pm 3rd May
            </div>
            <iframe id="player" width="400px" height="50" src="https://s1.citrus3.com:2000/AudioPlayer/TheHatch?mount=/stream&"></iframe>
        </div>

    </body>
    <script>


        class Section {
            constructor(zpos, sectionlist){
                let hatchsize = sectionlist.hatchsize
                let wallthickness = sectionlist.wallthickness
                let sectionsize = sectionlist.sectionsize
                let ladderoffsetfromwall = sectionlist.ladderoffsetfromwall
                let ladderwidth = sectionlist.ladderwidth
                let ladderheight = sectionlist.ladderheight
                let material = sectionlist.material
                let ladderhorizwidth = hatchsize - (2 * (ladderoffsetfromwall + wallthickness))
                this.allobjects = []

                this.right = new THREE.BoxGeometry(wallthickness, hatchsize, sectionsize);
                this.rightwall = new THREE.Mesh(this.right, material);
                scene.add(this.rightwall)
                this.rightwall.position.x = hatchsize /2

                this.left = new THREE.BoxGeometry(wallthickness, hatchsize, sectionsize);
                this.leftwall = new THREE.Mesh(this.left, material);
                scene.add(this.leftwall);
                this.leftwall.position.x = (hatchsize / 2) * -1

                this.ttop = new THREE.BoxGeometry(hatchsize, wallthickness, sectionsize);
                this.ttopwall = new THREE.Mesh(this.ttop, material);
                scene.add(this.ttopwall);
                this.ttopwall.position.y = hatchsize / 2

                this.bottom = new THREE.BoxGeometry(hatchsize, wallthickness, sectionsize);
                this.bottomwall = new THREE.Mesh(this.bottom, material);
                scene.add(this.bottomwall);
                this.bottomwall.position.y = (hatchsize / 2) * -1

                this.leftladdergeom = new THREE.BoxGeometry(ladderwidth, ladderheight, sectionsize);
                this.leftladder = new THREE.Mesh(this.leftladdergeom, material);
                scene.add(this.leftladder);
                this.leftladder.position.y = ((hatchsize / 2) * -1) + wallthickness
                this.leftladder.position.x = ((hatchsize / 2) * -1) + wallthickness + ladderoffsetfromwall

                this.rightladdergeom = new THREE.BoxGeometry(ladderwidth, ladderheight, sectionsize);
                this.rightladder = new THREE.Mesh(this.rightladdergeom, material);
                scene.add(this.rightladder);
                this.rightladder.position.y = ((hatchsize / 2) * -1) + wallthickness
                this.rightladder.position.x = ((hatchsize / 2)) - wallthickness - ladderoffsetfromwall

                this.horizladdergeom = new THREE.BoxGeometry(ladderhorizwidth, ladderheight, ladderwidth);
                this.horizladder = new THREE.Mesh(this.horizladdergeom, material);
                scene.add(this.horizladder);
                this.horizladder.position.y = ((hatchsize / 2) * -1) + wallthickness

                var hue = Math.floor(Math.random() * 360).toString()
                var color = new THREE.Color("hsl(" + hue + ", 100%, 50%)");
                this.light = new THREE.PointLight(color, 1, 0, 1000)
                let innergap = (hatchsize - (1 * wallthickness))
                let lightposx = (Math.random() * innergap) - (innergap / 2)
                let lightposy = (Math.random() * innergap) - (innergap / 2)
                this.light.position.set(lightposx, lightposy, 0)
                scene.add(this.light);

                this.allobjects.push(this.rightwall)
                this.allobjects.push(this.leftwall)
                this.allobjects.push(this.ttopwall)
                this.allobjects.push(this.bottomwall)
                this.allobjects.push(this.leftladder)
                this.allobjects.push(this.rightladder)
                this.allobjects.push(this.horizladder)

                this.translatez(zpos)
                this.randomise()
                this.light.position.z += zpos
            }

            translatez(zamount){
                this.allobjects.map((anobject) => {
                    anobject.position.z += zamount
                })
            }

            randomise(){
                this.allobjects.map((anobject) => {
                    if(anobject.type == "Mesh"){
                        let xscale = (Math.random() / 10) - 0.05 + 1
                        let yscale = (Math.random() / 10) - 0.05 + 1
                        anobject.scale.set(xscale, yscale, 1)
                        let rotate = (Math.random() /10) - 0.05
                        anobject.rotation.z = rotate
                    }       
                })
                var hue = Math.floor(Math.random() * 360).toString()
                var color = new THREE.Color("hsl(" + hue + ", 100%, 50%)");
                this.light.color = color
            }
        }

        class Hatch {
            constructor(numsections){
                this.hatchsize = 1; // xy size of hatch
                this.wallthickness = 0.1
                this.sectionsize = 0.37; // depth of each section
                this.ladderoffsetfromwall = 0.178
                this.ladderwidth = 0.078
                this.ladderheight = 0.078
                this.material = new THREE.MeshPhongMaterial({color: 0x696969});
                this.sections = []
                this.numsections = numsections
                this.firstsectionindex = 0
                this.overlap = 0.1
                this.generatesections()
            }

            addsection(){
                let zpositionofnew = (this.sections.length * (this.sectionsize - this.overlap ) * -1) + this.overlap  
                this.sections.push(new Section(zpositionofnew, this))
            }

            generatesections(){
                for (var i = 0; i < this.numsections; i++) {
                    this.addsection()
                    this.sections[i].light.intensity /= (this.numsections - i)
                }
            }

            translatez(zamount){
                this.sections.map((asection => {asection.translatez(zamount)}))
            }

            rotate(){
                let firstsection = this.sections[this.firstsectionindex]
                if (firstsection.bottomwall.position.z + (this.sectionsize / 2) > camera.position.z + 0.2){
                    this.firstsectionindex += 1
                    if (this.firstsectionindex == this.sections.length) {
                        this.firstsectionindex = 0
                    }
                    firstsection.translatez(this.sections.length * (this.sectionsize - this.overlap ) * -1) + this.overlap          
                    firstsection.randomise()
                }
            }
        }   

        class Cyclic {
            constructor(period, range) {
                this.period = period
                this.range = range
            }

            getval(numiterations) {
                // numiterations will be big Int16Array
                let yposition = numiterations % this.period
                let yangle = Math.sin((Number(yposition) / this.period) * Math.PI * 2)
                return  yangle * this.range
            }
        }

        const canvas = document.querySelector('#c');
        const renderer = new THREE.WebGLRenderer({canvas});
        renderer.setPixelRatio( 1 );

        // change fontsize
        let reldist = 0
        if (canvas.clientHeight > canvas.clientWidth) {
            reldist = canvas.clientWidth
        }
        else {
            reldist = canvas.clientHeight
        }

        const fov = 75;
        const aspect = 1;  // the canvas default
        const near = 0.1;
        const far = 100;
        const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

        camera.aspect = canvas.clientWidth / canvas.clientHeight;
        camera.updateProjectionMatrix()
        camera.position.z = 1;

        const scene = new THREE.Scene();

        myhatch = new Hatch(35)

        renderer.render(scene, camera);

        let numiterations = 0
        ycyclic = new Cyclic(10 * 7, 0.037)
        xcyclic = new Cyclic(31 * 6, 0.015)
        angcyclic = new Cyclic(27 * 7, 0.022)
        advancecamera = function() {
            numiterations += 1
            camera.position.y = ycyclic.getval(numiterations)
            camera.position.x = xcyclic.getval(numiterations)
            camera.rotation.z = angcyclic.getval(numiterations)
            camera.aspect = canvas.clientWidth / canvas.clientHeight;
            camera.updateProjectionMatrix()
            myhatch.translatez(0.006)
            myhatch.rotate()
            renderer.render(scene, camera);
        };

        setInterval(advancecamera, 17)

    </script>
</html>

First error

Second error and how it looks on I Phone

解决方案:

你正在为你的场景添加35个点光源。每个光源都需要一定数量的制服。因此,出现错误信息也就不足为奇了。too many uniforms 弹出了。

所以你肯定要减少点灯的数量。也可以考虑使用 BoxBufferGeometry 而不是 BoxGeometry 这将加快您的应用程序的启动时间,并减少内存消耗。

此外,使用 requestAnimationFrame() 来控制你的动画循环,而不是 setInterval() 这其实是不好的做法)。

本文来自投稿,不代表实战宝典立场,如若转载,请注明出处:https://www.shizhanbaodian.com/12449.html

(0)
上一篇 4天前
下一篇 4天前

相关推荐

发表评论

登录后才能评论