如何解决Safari上三个js在我的网页上触发的错误？
问题描述 投票：0回答：1
我的朋友经营着一个在线广播电台，所以为了他的生日，我为他制作了一个网页。我是一个新的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>
1个回答
1
投票
投票
你正在为你的场景添加35个点光源。每个光源都需要一定数量的制服。因此，出现错误信息也就不足为奇了。too many uniforms 弹出了。
所以你肯定要减少点灯的数量。也可以考虑使用 BoxBufferGeometry 而不是 BoxGeometry 这将加快您的应用程序的启动时间，并减少内存消耗。
此外，使用 requestAnimationFrame() 来控制你的动画循环，而不是 setInterval() 这其实是不好的做法）。
最新问题
- 按钮未完全变成图像
- 使用 length() 在 dplyr 中过滤后获取元素数量
- AWS Lambda：Dotnet 6 API 在部署后间歇性需要 15 秒才能连接到 RDS
- 汇编语言中用户输入的字符数
- 图标未加载到反应本机项目中
- UUID 与长主键
- 如何在LightningChartJS中显示竖排文本
- 如何在iPhone/iPad上模仿Photo.app倾斜交互？
- 使用 sqlalchemy 在 postgres 中查找最少 4 列（计算的 sqlalchemy 模型属性）
- 如何在Python中添加环境变量到路径？
- 如何确保自主无人机（UAV）系统的最大安全性？
- 在Python中对group by的结果应用转换函数
- 如何在Python中将列表中的整数相加（对数字列表求和）？
- 同一 div 标签内所有文本单词的 XPath？
- 如何在 Jetpack Compose 中向 TextField 添加不可编辑的后缀（后缀）？
- 如何将Flutter应用中拍摄的图片保存到计算机目录并发送到Flask服务器？
- Speingboot httpclient 添加重复的 cookie 标头
- 任何人都可以帮助我如何为同一 div 标签内的所有文本单词编写 xpath
- 重置启动计时器 - unity
- 如何在Qt中打印pdf文件
© www.soinside.com 2019 - 2024. All rights reserved.