我创建了一个小游戏项目，在canvas.height、canvas.width得到的值和window.innerHeight、window.innerWidth、SystemInfo.windowHeight、SystemInfo.windowWidth是一样的，但是这些方法获得的屏幕尺寸和真机上的实际屏幕值不一致。，我用的是HuaWei M9 手机，真实屏幕尺寸是1920:1080，但是在小游戏环境下的到的永远是768:732，而且在Canvas上绘制东西显示的东西右侧和下侧面会被裁剪，这是为什么？但在模拟器中屏幕大小和选定的模拟器是一样的，也不会出现裁剪现象。 babylon.min.js可以在wx5952a4b12e404513这小程序的提交目录下得到。 [代码]import BABYLON from [代码][代码]'./libs/babylon.min'[代码][代码]// import Music from './runtime/music'[代码][代码]import GameInfo from [代码][代码]'./runtime/gameinfo'[代码][代码]var[代码] [代码]self;[代码][代码]/**[代码][代码] [代码][代码]* 游戏主函数[代码][代码] [代码][代码]*/[代码][代码]export [代码][代码]default[代码] [代码]class Main {[代码][代码]  [代码][代码];[代码][代码]  [代码][代码]scene;[代码][代码]  [代码][代码]engine;[代码][代码]  [代码][代码]camera;[代码][代码]  [代码][代码]touchInput;[代码][代码]  [代码][代码]gameinfo;[代码][代码]  [代码][代码]dirCount;[代码][代码]  [代码][代码]constructor() {[代码][代码]    [代码][代码]self = [代码][代码]this[代码][代码];[代码][代码]    [代码][代码]var[代码] [代码]red, green, blue, yellow;[代码][代码]    [代码][代码]var[代码] [代码]width = canvas.width;[代码][代码]    [代码][代码]var[代码] [代码]height = canvas.height;[代码][代码]    [代码][代码]console.log([代码][代码]'canvas size:'[代码] [代码]+ height + [代码][代码]' '[代码] [代码]+ width);[代码][代码]    [代码][代码]console.log([代码][代码]'window size:'[代码] [代码]+ window.innerHeight + [代码][代码]' '[代码] [代码]+ window.innerWidth);[代码][代码]    [代码] [代码]    [代码][代码]var[代码] [代码]SystemInfo = wx.getSystemInfoSync();[代码][代码]    [代码][代码]console.log([代码][代码]'SystemInfo:'[代码] [代码]+ SystemInfo);[代码][代码]    [代码][代码]console.log([代码][代码]' .SDKVersion:'[代码] [代码]+ SystemInfo.SDKVersion);[代码][代码]    [代码][代码]console.log([代码][代码]' .batteryLevel:'[代码] [代码]+ SystemInfo.batteryLevel);[代码][代码]    [代码][代码]console.log([代码][代码]' .benchmarkLevel:'[代码] [代码]+ SystemInfo.benchmarkLevel);[代码][代码]    [代码][代码]console.log([代码][代码]' .brand:'[代码] [代码]+ SystemInfo.brand);[代码][代码]    [代码][代码]console.log([代码][代码]' .devicePixelRatio:'[代码] [代码]+ SystemInfo.devicePixelRatio);[代码][代码]    [代码][代码]console.log([代码][代码]' .fontSizeSetting:'[代码] [代码]+ SystemInfo.fontSizeSetting);[代码][代码]    [代码][代码]console.log([代码][代码]' .language:'[代码] [代码]+ SystemInfo.language);[代码][代码]    [代码][代码]console.log([代码][代码]' .model:'[代码] [代码]+ SystemInfo.model);[代码][代码]    [代码][代码]console.log([代码][代码]' .pixelRatio:'[代码] [代码]+ SystemInfo.pixelRatio);[代码][代码]    [代码][代码]console.log([代码][代码]' .platform:'[代码] [代码]+ SystemInfo.platform);[代码][代码]    [代码][代码]console.log([代码][代码]' .screenHeight:'[代码] [代码]+ SystemInfo.screenHeight);[代码][代码]    [代码][代码]console.log([代码][代码]' .screenWidth:'[代码] [代码]+ SystemInfo.screenWidth);[代码][代码]    [代码][代码]console.log([代码][代码]' .statusBarHeight:'[代码] [代码]+ SystemInfo.statusBarHeight);[代码][代码]    [代码][代码]console.log([代码][代码]' .system:'[代码] [代码]+ SystemInfo.system);[代码][代码]    [代码][代码]console.log([代码][代码]' .version:'[代码] [代码]+ SystemInfo.version);[代码][代码]    [代码][代码]console.log([代码][代码]' .windowHeight:'[代码] [代码]+ SystemInfo.windowHeight);[代码][代码]    [代码][代码]console.log([代码][代码]' .windowWidth:'[代码] [代码]+ SystemInfo.windowWidth);[代码]  [代码]    [代码][代码]//创建2DCanvas和2D上下文[代码][代码]    [代码][代码]var[代码] [代码]canvas_2d = wx.createCanvas([代码][代码]'canvas_2d'[代码][代码]);[代码][代码]    [代码][代码]var[代码] [代码]ctx = canvas_2d.getContext([代码][代码]'2d'[代码][代码]);[代码][代码]    [代码][代码]//加载巴比伦3D引擎（使用默认的Canvas）[代码][代码]    [代码][代码]var[代码] [代码]engine = self.engine = [代码][代码]new[代码] [代码]BABYLON.Engine(canvas, [代码][代码]true[代码][代码]);[代码] [代码]    [代码][代码]canvas.width = width;[代码][代码]    [代码][代码]canvas.height = height;[代码][代码]    [代码][代码]canvas_2d.width = width;[代码][代码]    [代码][代码]canvas_2d.height = height;[代码][代码]    [代码][代码]console.log([代码][代码]'canvas_2d size:'[代码] [代码]+ canvas_2d.height + [代码][代码]' '[代码] [代码]+ canvas_2d.width);[代码][代码]    [代码][代码]// 通过引擎创建基本场景[代码][代码]    [代码][代码]var[代码] [代码]scene = self.scene = [代码][代码]new[代码] [代码]BABYLON.Scene(engine);[代码][代码]    [代码][代码]scene.clearColor = [代码][代码]new[代码] [代码]BABYLON.Color3(0.5, 0.8, 0.9);[代码] [代码]    [代码][代码]//设置场景的动力(G重力, 基于Y轴)[代码][代码]    [代码][代码]scene.gravity = [代码][代码]new[代码] [代码]BABYLON.Vector3(0, -0.9, 0);[代码] [代码]    [代码][代码]//设置场景碰撞[代码][代码]    [代码][代码]scene.collisionsEnabled = [代码][代码]true[代码][代码];[代码][代码]    [代码][代码]var[代码] [代码]gameinfo = self.gameinfo = [代码][代码]new[代码] [代码]GameInfo();[代码][代码]    [代码][代码]// var music = new Music();[代码] [代码]    [代码][代码]//创建天空盒（其实就是个box）[代码][代码]    [代码][代码]var[代码] [代码]skybox = BABYLON.Mesh.CreateBox([代码][代码]"skyBox"[代码][代码], 100.0, scene);[代码][代码]    [代码][代码]var[代码] [代码]skyboxMaterial = [代码][代码]new[代码] [代码]BABYLON.StandardMaterial([代码][代码]"skyBox"[代码][代码], scene);[代码][代码]    [代码][代码]skybox.material = skyboxMaterial;[代码][代码]    [代码][代码]skyboxMaterial.reflectionTexture = [代码][代码]new[代码] [代码]BABYLON.CubeTexture([代码][代码]"https://www.babylonjs.com/assets/skybox/nebula"[代码][代码], scene);[代码][代码]    [代码][代码]//设置图片的坐标类型（天空盒）[代码][代码]    [代码][代码]skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;[代码][代码]    [代码][代码]//diffuseColor:漫反射颜色[代码][代码]    [代码][代码]skyboxMaterial.diffuseColor = [代码][代码]new[代码] [代码]BABYLON.Color3(0, 0, 0);[代码][代码]    [代码][代码]//specularColor:镜面反射颜色[代码][代码]    [代码][代码]skyboxMaterial.specularColor = [代码][代码]new[代码] [代码]BABYLON.Color3(0, 0, 0);[代码][代码]    [代码][代码]//不接受灯光渲染[代码][代码]    [代码][代码]skyboxMaterial.disableLighting = [代码][代码]true[代码][代码];[代码][代码]    [代码][代码]//反而不剔除[代码][代码]    [代码][代码]skyboxMaterial.backFaceCulling = [代码][代码]false[代码][代码];[代码] [代码]    [代码][代码]// BABYLON.SceneLoader.Append("https://www.babylonjs.com/Assets/DamagedHelmet/glTF/", "DamagedHelmet.gltf", scene, function (meshes) {[代码][代码]    [代码][代码]// });[代码] [代码]    [代码][代码]// 参数：名字，位置，所属场景[代码][代码]    [代码][代码]var[代码] [代码]camera = self.camera = [代码][代码]new[代码] [代码]BABYLON.FreeCamera([代码][代码]"FreeCamera"[代码][代码], [代码][代码]new[代码] [代码]BABYLON.Vector3(0, 0, -10), scene);[代码][代码]    [代码][代码]//给相机的目标设置特定的位置（相机总是朝向它的目标），在这个例子中设置为场景的原点[代码][代码]    [代码][代码]camera.setTarget(BABYLON.Vector3.Zero());[代码][代码]    [代码][代码]var[代码] [代码]touchInput = self.touchInput = [代码][代码]new[代码] [代码]BABYLON.FreeCameraTouchInput();[代码][代码]    [代码][代码]camera.inputs.add(touchInput);[代码][代码]    [代码][代码]touchInput.attachControl(canvas, [代码][代码]true[代码][代码]);[代码][代码]    [代码][代码]//将相机和画布关联[代码][代码]    [代码][代码]// camera.attachControl(canvas, true);[代码] [代码]    [代码][代码]// 创建基本光源, 目标位于 x:0,y:1,z:0 -(由天空出现)[代码][代码]    [代码][代码]var[代码] [代码]light = [代码][代码]new[代码] [代码]BABYLON.DirectionalLight([代码][代码]'light1'[代码][代码], [代码][代码]new[代码] [代码]BABYLON.Vector3(-5, -5, 5), scene);[代码]  [代码]    [代码][代码]// // 创建一个内置的“球”的形状,它的构造函数包括5个参数:名称、宽度、深度、细分,场景(例子中仅4个参数)[代码][代码]    [代码][代码]var[代码] [代码]sphere1 = BABYLON.Mesh.CreateSphere([代码][代码]'sphere1'[代码][代码], 16, 1, scene);[代码] [代码]    [代码][代码]red = [代码][代码]new[代码] [代码]BABYLON.StandardMaterial([代码][代码]"red"[代码][代码], scene);[代码][代码]    [代码][代码]red.diffuseColor = [代码][代码]new[代码] [代码]BABYLON.Color3(1, 0, 0); [代码][代码]//红[代码] [代码]    [代码][代码]sphere1.material = red;[代码]  [代码]    [代码][代码]var[代码] [代码]points = [];[代码][代码]    [代码][代码]for[代码] [代码]([代码][代码]var[代码] [代码]i = 0; i < 1000; i++) {[代码][代码]      [代码][代码]var[代码] [代码]point = [代码][代码]new[代码] [代码]BABYLON.Vector3();[代码][代码]      [代码][代码]point.x = 5 * Math.cos(i * 0.01 * 2 * Math.PI);[代码][代码]      [代码][代码]point.y = 1 * Math.cos(i * 0.05 * 2 * Math.PI);[代码][代码]      [代码][代码]point.z = 3 * Math.cos(i * 0.1 * 2 * Math.PI);[代码][代码]      [代码][代码]points.push(point);[代码][代码]    [代码][代码]}[代码] [代码]    [代码][代码]var[代码] [代码]lines = BABYLON.Mesh.CreateLines([代码][代码]"lines"[代码][代码], points, scene);[代码][代码]    [代码][代码]lines.color = [代码][代码]new[代码] [代码]BABYLON.Color3(1, 0, 0); [代码][代码]//红[代码]  [代码]    [代码][代码]wx.onTouchStart([代码][代码]this[代码][代码].onTouchStart);[代码][代码]    [代码][代码]wx.onTouchEnd([代码][代码]this[代码][代码].onTouchEnd);[代码] [代码]    [代码][代码]//一个特殊的顶点着色，没有任务矩阵变换[代码][代码]    [代码][代码]BABYLON.Effect.ShadersStore[[代码][代码]"hudVertexShader"[代码][代码]] = `[代码][代码]        [代码][代码]#ifdef GL_ES[代码][代码]        [代码][代码]precision highp float;[代码][代码]        [代码][代码]#endif[代码][代码]        [代码][代码]// Attributes[代码][代码]        [代码][代码]attribute vec3 position;[代码][代码]        [代码][代码]attribute vec2 uv;[代码][代码]        [代码][代码]// Normal[代码][代码]        [代码][代码]varying vec2 vUV;[代码][代码]        [代码][代码]void main(void) {[代码][代码]        [代码][代码]gl_Position = vec4(position, 1.0);[代码][代码]        [代码][代码]vUV = uv;[代码][代码]        [代码][代码]}           [代码][代码]    [代码][代码]`;[代码][代码]    [代码][代码]//最普通片元着色器，只有一个2D采样[代码][代码]    [代码][代码]BABYLON.Effect.ShadersStore[[代码][代码]"hudFragmentShader"[代码][代码]] = `[代码][代码]        [代码][代码]#ifdef GL_ES[代码][代码]        [代码][代码]precision highp float;[代码][代码]        [代码][代码]#endif[代码][代码]        [代码][代码]varying vec2 vUV;[代码][代码]        [代码][代码]// Refs[代码][代码]        [代码][代码]uniform sampler2D textureSampler;[代码][代码]        [代码][代码]void main(void) {[代码][代码]        [代码][代码]gl_FragColor = texture2D(textureSampler, vUV);[代码][代码]        [代码][代码]}    [代码][代码]    [代码][代码]`;[代码][代码]    [代码][代码]var[代码] [代码]hudMaterial = [代码][代码]new[代码] [代码]BABYLON.ShaderMaterial([代码][代码]"hud"[代码][代码], scene, {[代码][代码]      [代码][代码]vertexElement: [代码][代码]"hud"[代码][代码],[代码][代码]      [代码][代码]fragmentElement: [代码][代码]"hud"[代码][代码]    [代码][代码]},[代码][代码]      [代码][代码]{[代码][代码]        [代码][代码]needAlphaBlending: [代码][代码]true[代码][代码],[代码][代码]        [代码][代码]attributes: [[代码][代码]"position"[代码][代码], [代码][代码]"uv"[代码][代码]],[代码][代码]        [代码][代码]samplers: [[代码][代码]"textureSampler"[代码][代码]][代码][代码]      [代码][代码]});[代码][代码]    [代码][代码]var[代码] [代码]planeVertexData = BABYLON.VertexData.CreatePlane({ size: 2 });[代码][代码]//从-1，-1 到 1,1的简单平面覆盖整个3D空间[代码][代码]    [代码][代码]// delete planeVertexData.normals; [代码][代码]    [代码][代码]var[代码] [代码]hud = [代码][代码]new[代码] [代码]BABYLON.Mesh([代码][代码]"Hud"[代码][代码], scene);[代码][代码]//HUD网格对象[代码][代码]    [代码][代码]planeVertexData.applyToMesh(hud);[代码] [代码]    [代码][代码]//贴图大小和2D屏幕大小一致[代码][代码]    [代码][代码]var[代码] [代码]hudTexture = [代码][代码]new[代码] [代码]BABYLON.DynamicTexture([代码][代码]"dynamic texture"[代码][代码], { width: canvas_2d.width, height: canvas_2d.height }, scene, [代码][代码]true[代码][代码]);[代码][代码]    [代码][代码]var[代码] [代码]textureContext = hudTexture.getContext();[代码][代码]//贴图的绘制上下文[代码][代码]    [代码][代码]hud.material = hudMaterial;[代码][代码]    [代码][代码]hudMaterial.setTexture([代码][代码]"textureSampler"[代码][代码], hudTexture);[代码][代码]    [代码][代码]hudMaterial.backFaceCulling = [代码][代码]false[代码][代码]; [代码][代码]//关闭背面裁剪[代码][代码]    [代码][代码]hudMaterial.disableDepthWrite = [代码][代码]true[代码][代码];[代码][代码]//关闭写深度缓存[代码][代码]    [代码][代码]hudTexture.update();[代码][代码]//贴图更新[代码] [代码]    [代码][代码]window.onresize = (window, event)=>{[代码][代码]      [代码][代码]console.log([代码][代码]'window:'[代码] [代码]+ window );[代码][代码]      [代码][代码]console.log([代码][代码]'event:'[代码] [代码]+ event );[代码][代码]    [代码][代码]};[代码] [代码]    [代码][代码]// //在引擎中循环运行这个场景[代码][代码]    [代码][代码]var[代码] [代码]isUp = [代码][代码]true[代码][代码];[代码][代码]    [代码][代码]// var count = 0;[代码][代码]    [代码][代码]// var hitCount = 0;[代码][代码]    [代码][代码]// self.dirCount = 0;[代码][代码]    [代码][代码]engine.runRenderLoop([代码][代码]function[代码] [代码]() {[代码] [代码]      [代码][代码]// console.log('window size:' + window.innerHeight + ' ' + window.innerWidth);[代码][代码]      [代码][代码]// //在2DCanvas上绘制两个矩形[代码][代码]      [代码][代码]if[代码] [代码](isUp){[代码][代码]        [代码][代码]ctx.clearRect(0, 0, canvas_2d.width, canvas_2d.height);[代码][代码]        [代码][代码]ctx.fillStyle = [代码][代码]'blue'[代码][代码];[代码][代码]        [代码][代码]ctx.fillRect(0, 0, 100, 100);[代码][代码]        [代码][代码]ctx.fillStyle = [代码][代码]'red'[代码][代码];[代码][代码]        [代码][代码]ctx.fillRect(canvas_2d.width - 100, canvas_2d.height - 100, 100, 100);[代码][代码]        [代码][代码]// //将2DCanvas绘制贴图的上下文[代码][代码]        [代码][代码]textureContext.drawImage(canvas_2d, 0, 0);[代码][代码]        [代码][代码]//贴图更新[代码][代码]        [代码][代码]hudTexture.update();[代码][代码]        [代码][代码]//保证每一帧HUD都在[代码][代码]        [代码][代码]hud.position = [代码][代码]new[代码] [代码]BABYLON.Vector3(camera._currentTarget.x, camera._currentTarget.y, camera._currentTarget.z);[代码][代码]      [代码][代码]}[代码][代码]      [代码][代码]isUp = !isUp;[代码][代码]      [代码][代码]scene.render();[代码] [代码]    [代码][代码]});[代码][代码]  [代码][代码]}[代码][代码]  [代码][代码]offsetX;[代码][代码]  [代码][代码]offsetY;[代码][代码]  [代码][代码]onTouchStart(event) {[代码][代码]    [代码][代码]console.log(event);[代码][代码]    [代码][代码]let lastTouchPoint = event.changedTouches[0];[代码][代码]    [代码][代码]self.offsetX = lastTouchPoint.screenX;[代码][代码]    [代码][代码]self.offsetY = lastTouchPoint.screenY;[代码][代码]    [代码][代码]let x = event.touches[0].clientX[代码][代码]    [代码][代码]let y = event.touches[0].clientY[代码] [代码]    [代码][代码]// let area = self.gameinfo.btnArea[代码] [代码]    [代码][代码]// if (x >= area.startX[代码][代码]    [代码][代码]//   && x <= area.endX[代码][代码]    [代码][代码]//   && y >= area.startY[代码][代码]    [代码][代码]//   && y <= area.endY)[代码][代码]    [代码][代码]//   self.dirCount = 0;[代码][代码]  [代码][代码]}[代码][代码]  [代码][代码]onTouchEnd(event) {[代码][代码]    [代码][代码]console.log(event);[代码][代码]    [代码][代码]let lastTouchPoint = event.changedTouches[0];[代码][代码]    [代码][代码]self.offsetX = lastTouchPoint.screenX - self.offsetX;[代码][代码]    [代码][代码]self.offsetY = lastTouchPoint.screenY - self.offsetY;[代码][代码]    [代码][代码]self.camera.inputs.attached.touch._offsetX = self.offsetX;[代码][代码]    [代码][代码]self.camera.inputs.attached.touch._offsetY = self.offsetY;[代码] [代码]    [代码][代码]self.camera.inputs.attached.touch.touchAngularSensibility = 50000;[代码][代码]    [代码][代码]self.camera.inputs.attached.touch.touchMoveSensibility = 250;[代码]   [代码]    [代码][代码]// var target = camera.getTarget();[代码][代码]    [代码][代码]// target.x += this.offsetX;[代码][代码]    [代码][代码]// target.y += this.offsetY;[代码][代码]    [代码][代码]// camera.setTarget(target);[代码][代码]  [代码][代码]}[代码][代码]}[代码][图片] [图片] [图片]

被小程序音频播放的问题搞得郁闷了。 同样的MP3，Android可以播放，iOS就不行。后来发现是Bit Rate Mode不支持可变类型的。 Audio组件虽然不再维护了，但是使用没问题啊。 但是最新的6.7.2版本里直接就不支持了，所有音频在iOS里都无法播放。 好吧，我改用AudioContext。 onEnded,onTimeUpdate都没有作用。播放进度没办法更新。 忍，使用定时器进度自己设置。（定时器停止还有bug，那就不停止了，改用全程启动的） currentTime在播放下一首音乐，或者seek换位之后，在重新播放后还会跳到上次的位置。 用户体验我也不管了，能播放就行。 由于onEnded也没作用了，只能自己判断播放下一首。currentTime会跳到上一次末尾位置，再加时间控制。 总算可以顺畅播放下一首了。 换Android设备一看，播放结束后，currentTime和duration不相同。。。。。 已经不知道如何是好了。

为了增加分辨率,我会吧窗口宽高乘以像素密度后设置给Three的render let WIDTH = window.innerWidth* pixelRatio； let HEIGHT = window.innerHeight * pixelRatio； const renderer = new THREE.WebGLRenderer(context); renderer.setSize(WIDTH, HEIGHT); 开发工具和安卓真机都没有问题 但是ios端出现以下问题，进入不了游戏，一直在公共加载页，如下图 [图片] 打开vconsole发现： [图片] 如果不乘以系数，render.setSize设置原始窗口高度，ios上正常，但是会像素低 let WIDTH = window.innerWidth* 1； let HEIGHT = window.innerHeight * 1； const renderer = new THREE.WebGLRenderer(context); renderer.setSize(WIDTH, HEIGHT);

报错THREE.WebGLRenderer: WEBGL_depth_texture extension not supported，导致3d模型无法加载出来