Browser Three.js场景在Safari 11.0.2中不渲染

我试图确定为什么在Safari 11.0.2 OSX 10.12.6中不渲染Three.js场景

/** *生成具有背景色的场景对象 **/ 函数getScene{ var场景=新的三个场景； scene.background=new THREE.Color0x111111； 返回场景； } /** *生成要在场景中使用的摄影机。摄像机参数： *[0]视野：标识场景的部分 *在任何时间都可见，单位为度 *[1]纵横比：标识图像的纵横比 *场景的宽度/高度 *[2]近剪裁平面：比近剪裁平面更近的对象 *剪裁平面将从场景中剔除 *[3]远剪裁平面：比远剪裁平面更远的对象 *剪裁平面将从场景中剔除 **/ 功能获取照相机{ var aspectRatio=window.innerWidth/window.innerHeight； var摄像机=新的3.PerspectiveCamera75，aspectRatio，0.11000； camera.position.set0150400； camera.lookAtscene.position； 返回摄像机； } /** *生成要在场景中使用的灯光。灯光参数： *[0]：灯光的十六进制颜色 *[1]：灯光强度/强度的数值 *[2]：距离强度为0的灯光的距离 *@param{obj}scene：当前场景对象 **/ 函数getLightscene{ var灯=[]； 灯[0]=新的三点灯0xffffff，0.6，0； 灯光[0].position.set 100200100； 场景。添加灯光[0]； var ambientLight=new THREE.AmbientLight0x111111； scene.addambientLight； 返回灯； } /** *生成要在场景中使用的渲染器 **/ 函数getRenderer{ //使用渲染器创建画布 var renderer=new THREE.WebGLRenderer{antialas:true}； //添加对视网膜显示的支持 renderer.setPixelRatiowindow.devicePixelRatio； //指定画布的大小 renderer.setSizewindow.innerWidth，window.innerHeight； //将画布添加到DOM中 document.body.appendChildrender.doElement； 返回渲染器； } /** *生成要在场景中使用的控件 *@param{obj}camera：用于场景的三个.js摄影机 *@param{obj}渲染器：场景的三个.js渲染器 **/ 函数getControlscamera，渲染器{ var controls=new THREE.TrackballControlscamera，renderer.domElement； controls.zoomSpeed=0.4； 控制点速度=0.4； 返回控制； } /** *吃草 **/ 函数getPlanescene，loader{ var texture=loader.load'grass.jpg'； texture.wrapps=texture.wrapT=THREE.RepeatWrapping； 纹理。重复。设置10，10； var材料=新的三网格基本材料{ 贴图：纹理，边：三。双面 }; var geometry=新的三个平面几何体1000、1000、10、10； var平面=新的三个。网格几何体，材质； 平面位置y=-0.5； 平面旋转x=Math.PI/2； scene.addplane； 返回平面； } /** *添加背景 **/ 函数getBackgroundscene，loader{ var-imagePrefix=； 变量方向=[‘右’、‘左’、‘上’、‘下’、‘前’、‘后’]； var imageSuffix='.bmp'； var geometry=新的3.BoxGeometry 1000、1000、1000； var materialArray=[]； 对于var i=0；i<6；i++ materialArray.push new THREE.Mesh基本材质{ map:loader.loadimagePrefix+方向[i]+图像后缀， 侧面：三。背面 }; var sky=新的三个网格几何体、材质阵列； scene.addsky； } /** *添加字符 **/ 函数getSpherescene{ var几何=新的三倍比球法30,12,9； var材质=新的3.0网格材质{ 颜色：0xd0901d， 发射信号：0xaf752a， 三面，双面， 平面阴影：对 }; var sphere=新的三个。网格几何体，材质； //为平移和旋转创建一个组 var sphereGroup=新的三个组； sphereGroup.addsphere sphereGroup.position.set0,24100； scene.addsphereGroup； 返回[球体，球体组]； } /** *存储所有当前按下的键 **/ 函数addListeners{ window.addEventListener'keydown'，函数E{ 按[e.key.toUpperCase]=true； } window.addEventListener'keyup'，函数e{ 按[e.key.toUpperCase]=false； } } /** *更新球体的位置 **/ 函数移动球{ var delta=clock.getDelta；//秒 var moveDistance=200*delta；//每秒200像素 var rotateAngle=Math.PI/2*delta；//PI/2弧度每秒90度 //向前/向后/向左/向右移动 如果按下['W']{ sphere.RotateOnAxis新三个矢量31,0,0，-rotateAngle sphereGroup.translateZ—移动距离； } 如果按下['S'] sphereGroup.translateZ移动距离； 如果按下['Q'] sphereGroup.translateX—移动距离； 如果按下['E'] sphereGroup.translateX移动距离； //向左/向右/向上/向下旋转 var rotation_矩阵=新的3.Matrix4.identity； 如果按下['A'] sphereGroup.RotateOnAxis新三个矢量30,1,0，rotateAngle； 如果按下['D'] 旋转球群 新三个。矢量30,1,0，-旋转角度； 如果按下['R'] sphereGroup.RotateOnAxis新三个矢量31,0,0，rotateAngle； 如果按下['F'] sphereGroup.RotateOnAxis新三个矢量31,0,0，-rotateAngle； } /** *跟随球体 **/ 功能移动摄像机{ var relativeCameraOffset=新的三个向量30,50200； var cameraOffset=relativeCameraOffset.ApplyMatrix x4SphereGroup.matrixWorld； camera.position.x=cameraOffset.x； camera.position.y=cameraOffset.y； camera.position.z=cameraOffset.z； camera.lookAtsphereGroup.position； } //渲染循环 函数渲染{ requestAnimationFramerender； renderer.renderscene，摄影机； 活动球； 移动摄像机； }; //陈述 var={}； var时钟=新的三个时钟； //全球的 var scene=getScene； var-camera=getCamera； var light=getLightscene； var renderer=getRenderer； //添加网格 var loader=新的3.TextureLoader； var floor=getPlaneSecene，加载程序； var background=getBackgroundscene，loader； var sphereData=getSpherescene； var sphere=sphereData[0]； var sphereGroup=sphereData[1]； addListeners； 提供 正文{边距：0；溢出：隐藏；} 画布{宽度：100%；高度：100%；} 这个。希望苹果能解决这个问题

有几个工作循环。easist似乎要将主体或画布的背景色设置为黑色

/** *生成具有背景色的场景对象 **/ 函数getScene{ var场景=新的三个场景； scene.background=new THREE.Color0x111111； 返回场景； } /** *生成要在场景中使用的摄影机。摄像机参数： *[0]视野：标识场景的部分 *在任何时间都可见，单位为度 *[1]纵横比：标识图像的纵横比 *场景的宽度/高度 *[2]近剪裁平面：比近剪裁平面更近的对象 *剪裁平面将从场景中剔除 *[3]远剪裁平面：比远剪裁平面更远的对象 *剪裁平面将从场景中剔除 **/ 功能获取照相机{ var aspectRatio=window.innerWidth/window.innerHeight； var摄像机=新的3.PerspectiveCamera75，aspectRatio，0.11000； camera.position.set0150400； camera.lookAtscene.position； 返回摄像机； } /** *生成要在场景中使用的灯光。灯光参数： *[0]：灯光的十六进制颜色 *[1]：灯光强度/强度的数值 *[2]：距离强度为0的灯光的距离 *@param{obj}scene：当前场景对象 **/ 函数getLightscene{ var灯=[]； 灯[0]=新的三点灯0xffffff，0.6，0； 灯光[0].position.set 100200100； 场景。添加灯光[0]； var ambientLight=new THREE.AmbientLight0x111111； scene.addambientLight； 返回灯； } /** *生成要在场景中使用的渲染器 **/ 函数getRenderer{ //使用渲染器创建画布 var renderer=new THREE.WebGLRenderer{antialas:true}； //添加对视网膜显示的支持 renderer.setPixelRatiowindow.devicePixelRatio； //指定画布的大小 renderer.setSizewindow.innerWidth，window.innerHeight； //将画布添加到DOM中 document.body.appendChildrender.doElement； 返回渲染器； } /** *生成要在场景中使用的控件 *@param{obj}camera：用于场景的三个.js摄影机 *@param{obj}渲染器：场景的三个.js渲染器 **/ 函数getControlscamera，渲染器{ var controls=new THREE.TrackballControlscamera，renderer.domElement； controls.zoomSpeed=0.4； 控制点速度=0.4； 返回控制； } /** *吃草 **/ 函数getPlanescene，loader{ var texture=loader.load'grass.jpg'； texture.wrapps=texture.wrapT=THREE.RepeatWrapping； 纹理。重复。设置10，10； var材料=新的三网格基本材料{ 贴图：纹理，边：三。双面 }; var geometry=新的三个平面几何体1000、1000、10、10； var平面=新的三个。网格几何体，材质； 平面位置y=-0.5； 平面旋转x=Math.PI/2； scene.addplane； 返回平面； } /** *添加背景 **/ 函数getBackgroundscene，loader{ var-imagePrefix=； 变量方向=[‘右’、‘左’、‘上’、‘下’、‘前’、‘后’]； var imageSuffix='.bmp'； var geometry=新的3.BoxGeometry 1000、1000、1000； var materialArray=[]； 对于var i=0；i<6；i++ materialArray.push new THREE.Mesh基本材质{ map:loader.loadimagePrefix+方向[i]+图像后缀， 侧面：三。背面 }; var sky=新的三个网格几何体、材质阵列； scene.addsky； } /** *添加字符 **/ 函数getSpherescene{ var几何=新的三倍比球法30,12,9； var材质=新的3.0网格材质{ 颜色：0xd0901d， 发射信号：0xaf752a， 三面，双面， 平面阴影：对 }; var sphere=新的三个。网格几何体，材质； //为平移和旋转创建一个组 var sphereGroup=新THRE E.小组； sphereGroup.addsphere sphereGroup.position.set0,24100； scene.addsphereGroup； 返回[球体，球体组]； } /** *存储所有当前按下的键 **/ 函数addListeners{ window.addEventListener'keydown'，函数E{ 按[e.key.toUpperCase]=true； } window.addEventListener'keyup'，函数e{ 按[e.key.toUpperCase]=false； } } /** *更新球体的位置 **/ 函数移动球{ var delta=clock.getDelta；//秒 var moveDistance=200*delta；//每秒200像素 var rotateAngle=Math.PI/2*delta；//PI/2弧度每秒90度 //向前/向后/向左/向右移动 如果按下['W']{ sphere.RotateOnAxis新三个矢量31,0,0，-rotateAngle sphereGroup.translateZ—移动距离； } 如果按下['S'] sphereGroup.translateZ移动距离； 如果按下['Q'] sphereGroup.translateX—移动距离； 如果按下['E'] sphereGroup.translateX移动距离； //向左/向右/向上/向下旋转 var rotation_矩阵=新的3.Matrix4.identity； 如果按下['A'] sphereGroup.RotateOnAxis新三个矢量30,1,0，rotateAngle； 如果按下['D'] sphereGroup.RotationAxis新的三个矢量30,1,0，-rotateAngle； 如果按下['R'] sphereGroup.RotateOnAxis新三个矢量31,0,0，rotateAngle； 如果按下['F'] sphereGroup.RotateOnAxis新三个矢量31,0,0，-rotateAngle； } /** *跟随球体 **/ 功能移动摄像机{ var relativeCameraOffset=新的三个向量30,50200； var cameraOffset=relativeCameraOffset.ApplyMatrix x4SphereGroup.matrixWorld； camera.position.x=cameraOffset.x； camera.position.y=cameraOffset.y； camera.position.z=cameraOffset.z； camera.lookAtsphereGroup.position； } //渲染循环 函数渲染{ requestAnimationFramerender； renderer.renderscene，摄影机； 活动球； 移动摄像机； }; //陈述 var={}； var时钟=新的三个时钟； //全球的 var scene=getScene； var-camera=getCamera； var light=getLightscene； var renderer=getRenderer； //添加网格 var loader=新的3.TextureLoader； var floor=getPlaneSecene，加载程序； var background=getBackgroundscene，loader； var sphereData=getSpherescene； var sphere=sphereData[0]； var sphereGroup=sphereData[1]； addListeners； 提供 正文{边距：0；溢出：隐藏；} 画布{宽度：100%；高度：100%；背景：黑色；} 这个。希望苹果能解决这个问题

有几个工作循环。easist似乎要将主体或画布的背景色设置为黑色

/** *生成具有背景色的场景对象 **/ 函数getScene{ var场景=新的三个场景； scene.background=new THREE.Color0x111111； 返回场景； } /** *生成要在场景中使用的摄影机。摄像机参数： *[0]视野：标识场景的部分 *在任何时间都可见，单位为度 *[1]纵横比：标识图像的纵横比 *场景的宽度/高度 *[2]近剪裁平面：比近剪裁平面更近的对象 *剪裁平面将从场景中剔除 *[3]远剪裁平面：比远剪裁平面更远的对象 *剪裁平面将从场景中剔除 **/ 功能获取照相机{ var aspectRatio=window.innerWidth/window.innerHeight； var摄像机=新的3.PerspectiveCamera75，aspectRatio，0.11000； camera.position.set0150400； camera.lookAtscene.position； 返回摄像机； } /** *生成要在场景中使用的灯光。灯光参数： *[0]：灯光的十六进制颜色 *[1]：灯光强度/强度的数值 *[2]：距离强度为0的灯光的距离 *@param{obj}scene：当前场景对象 **/ 函数getLightscene{ var灯=[]； 灯[0]=新的三点灯0xffffff，0.6，0； 灯光[0].position.set 100200100； 场景。添加灯光[0]； var ambientLight=new THREE.AmbientLight0x111111； scene.addambientLight； 返回灯； } /** *生成要在场景中使用的渲染器 **/ 函数getRenderer{ //使用渲染器创建画布 var renderer=new THREE.WebGLRenderer{antialas:true}； //添加对视网膜显示的支持 renderer.setPixelRatiowindow.devicePixelRatio； //指定画布的大小 renderer.setSizewindow.innerWidth，window.innerHeight； //将画布添加到DOM中 document.body.appendChildrender.doElement； 返回渲染器； } /** *生成要在场景中使用的控件 *@param{obj}camera：用于场景的三个.js摄影机 *@param{obj}渲染器：场景的三个.js渲染器 **/ 函数getControlscamera，渲染器{ var controls=new THREE.TrackballControlscamera，renderer.domElement； controls.zoomSpeed=0.4； 控制点速度=0.4； 返回控制； } /** *吃草 **/ 函数getPlanescene，loader{ var texture=loader.load'grass.jpg'； texture.wrapps=texture.wrapT=THREE.RepeatWrapping； 纹理。重复。设置10，10； var材料=新的三网格基本材料{ 贴图：纹理，边：三。双面 }; var geometry=新的三个平面几何体1000、1000、10、10； var平面=新的三个。网格几何体，材质； 平面位置y=-0.5； 平面旋转x=Math.PI/2； scene.addplane； 返回平面； } /** *添加背景 **/ 函数getBackgroundscene，loader{ var-imagePrefix=； 变量方向=[‘右’、‘左’、‘上’、‘下’、‘前’、‘后’]； var imageSuffix='.bmp'； var geometry=新的3.BoxGeometry 1000、1000、1000； var materialArray=[]； 对于var i=0；i<6；i++ materialArray.push new THREE.Mesh基本材质{ map:loader.loadimagePrefix+方向[i]+图像后缀， 侧面：三。背面 }; var sky=新的三个网格几何体、材质阵列； scene.addsky； } /** *添加字符 **/ 函数getSpherescene{ var几何=新的三倍比球法30,12,9； var材质=新的3.0网格材质{ 颜色：0xd0901d， 发射信号：0xaf752a， 三面，双面， 平面阴影：对 }; var sphere=新的三个。网格几何体，材质； //为平移和旋转创建一个组 var sphereGroup=新的三个组； sphereGroup.addsphere sphereGroup.position.set0,24100； scene.addsphereGroup； 返回[球体，球体组]； } /** *存储所有当前按下的键 **/ 函数addListeners{ window.addEventListener'keydown'，函数E{ 按[e.key.toUpperCase]=true； } window.addEventListener'keyup'，函数e{ 按[e.key.toUpperCase]=false； } } /** *更新球体的位置 **/ 函数移动球{ var delta=clock.getDelta；//秒 var moveDistance=200*delta；//每秒200像素 var rotateAngle=Math.PI/2*delta；//PI/2弧度每秒90度 //向前/向后/向左/向右移动 如果按下['W']{ sphere.RotateOnAxis新三个矢量31,0,0，-rotateAngle sphereGroup.translateZ—移动距离； } 如果按下['S'] sphereGroup.translateZ移动距离； 如果按下['Q'] sphereGroup.translateX—移动距离； 如果按下['E'] sphereGroup.translateX移动距离； //向左/向右/向上/向下旋转 var rotation_矩阵=新的3.Matrix4.identity； 如果按下['A'] sphereGroup.RotateOnAxis新三个矢量30,1,0，rotateAngle； 如果按下['D'] sphereGroup.RotationAxis新的三个矢量30,1,0，-rotateAngle； 如果按下['R'] sphereGroup.RotateOnAxis新三个矢量31,0,0，rotateAngle； 如果按下['F'] sphereGroup.RotateOnAxis新三个矢量31,0,0，-rotateAngle； } /** *跟随球体 **/ 功能移动摄像机{ var relativeCameraOffset=新的三个向量30,50200； var cameraOffset=relativeCameraOffset.ApplyMatrix x4SphereGroup.matrixWorld； camera.position.x=cameraOffset.x； camera.position.y=cameraOffset.y； camera.position.z=cameraOffset.z； camera.lookAtsphereGroup.position； } //渲染循环 函数渲染{ requestAnimationFramerender； renderer.renderscene，摄影机； 活动球； 移动摄像机； }; //陈述 var={}； var时钟=新的三个时钟； //全球的 var scene=getScene； var-camera=getCamera； var light=getLightscene； var renderer=getRenderer； //添加网格 var loader=新的3.TextureLoader； var floor=getPlaneSecene，加载程序； var background=getBackgroundscene，loader； var sphereData=getSpherescene； var sphere=sphereData[0]； var sphereGroup=sphereData[1]； addListeners； 提供 正文{边距：0；溢出：隐藏；} 画布{宽度：100%；高度：100%；背景：黑色；}

---

感谢@gman，感谢你在WebGL性能提示上的精彩视频，它教会了我很多！我通常在SO帖子中发布代码，但这里讨论的是影响shadertoy.com上所有代码片段的更广泛的浏览器问题，因此认为不需要特定的代码示例。在任何情况下，您是否立即开始搜索Safari浏览器错误，或者在确定这可能是浏览器错误之前是否使用了其他诊断工具？我正试图了解更多关于WebGL hiccups调查过程的信息。在答案中添加了一些细节，因为它们不适合这里。我使用了此修复，一切都很完美！现在Safari 11.0.3和OSX 10.13.3的屏幕都是黑色的！还有别的吗？如果运行此解决方案中包含的代码段，也会看到黑屏。在以前的版本中，一切都很好。我刚刚发现，如果我不在全屏模式下移动Safari窗口，当我松开按钮时，我会看到不到一秒钟的图形。感谢@gman，感谢你在WebGL性能提示上的精彩视频，它教会了我很多！我通常在SO帖子中发布代码，但这里讨论的是影响shadertoy.com上所有代码片段的更广泛的浏览器问题，因此认为不需要特定的代码示例。在任何情况下，您是否立即开始搜索Safari浏览器错误，或者在de之前是否使用了其他诊断工具

---

确定这可能是一个浏览器错误？我正试图了解更多关于WebGL hiccups调查过程的信息。在答案中添加了一些细节，因为它们不适合这里。我使用了此修复，一切都很完美！现在Safari 11.0.3和OSX 10.13.3的屏幕都是黑色的！还有别的吗？如果运行此解决方案中包含的代码段，也会看到黑屏。在以前的版本中，一切都很好。我刚刚发现，如果我不在全屏模式下移动Safari窗口，当我松开按钮时，我会看到不到一秒钟的图形。