如何解决 Safari 上三个 js 在我的网页上触发的错误？
How do I resolve errors on Safari that three js are triggering on my web page?
我的朋友经营着一个在线广播电台，所以我为他的生日创建了一个网页。我是 javascript 的新手，所以这对我来说是一次很好的学习经历。经过一系列摆弄之后，我设法让它在台式机和移动设备上顺利运行。但是，我在我的手机上测试失败，当我昨天把它展示给他时，它没有用！
所以我在 Browserstack 上获得了一个免费帐户，并发现了 Safari 上产生的错误，但我不知道如何修复它们。
这里是link页面：
先编码，后错误。
<!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>
您正在为场景添加 35 个点光源。每个光源都需要一定数量的制服。因此，弹出错误消息 too many uniforms 也就不足为奇了。
所以你肯定要减少点光源的数量。还可以考虑使用 BoxBufferGeometry 而不是 BoxGeometry，这将加快应用程序的启动时间并减少内存消耗。
此外，使用 requestAnimationFrame() 来控制动画循环而不是 setInterval()（这实际上是一种不好的做法）。
我的朋友经营着一个在线广播电台，所以我为他的生日创建了一个网页。我是 javascript 的新手，所以这对我来说是一次很好的学习经历。经过一系列摆弄之后，我设法让它在台式机和移动设备上顺利运行。但是，我在我的手机上测试失败，当我昨天把它展示给他时，它没有用！
所以我在 Browserstack 上获得了一个免费帐户，并发现了 Safari 上产生的错误，但我不知道如何修复它们。
这里是link页面：
先编码，后错误。
<!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>
您正在为场景添加 35 个点光源。每个光源都需要一定数量的制服。因此，弹出错误消息 too many uniforms 也就不足为奇了。
所以你肯定要减少点光源的数量。还可以考虑使用 BoxBufferGeometry 而不是 BoxGeometry，这将加快应用程序的启动时间并减少内存消耗。
此外，使用 requestAnimationFrame() 来控制动画循环而不是 setInterval()（这实际上是一种不好的做法）。