问一下小游戏能加载gltf模型文件吗？
用小游戏引入three.js的json模型时，动画出不来，请问有办法解决吗？我用小游戏IDE引入three.js的json动画模型时，模型可以出来，动画怎么都出不来，请问有谁遇到过相同的问题吗？ ----------------------------------------------------------------------------------------------------------------- var loader = new THREE.JSONLoader(); loader.load('http://image.nardiaoyu.com/video/2018/2/11/neex7hh.js', function (geometry) { var material = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0xffffff, shininess: 20, morphTargets: true, vertexColors: THREE.FaceColors, flatShading: true }); var mesh = new THREE.Mesh(geometry, material); var s = 0.35; mesh.scale.set(s, s, s); mesh.position.y = 15; mesh.rotation.y = -1; mesh.castShadow = true; mesh.receiveShadow = true; scene.add(mesh); console.log("mesh", mesh) mixer = new THREE.AnimationMixer(mesh); mixer.clipAction(geometry.animations[0]).setDuration(1).play(); console.log("mixer", mixer) mixers.push(mixer); console.log("mixers", mixers) for (var i = 0; i < mixers.length; i++) { console.log("mixers.length", i) } }); ----------------------------------------------------------------------------- animate() { requestAnimationFrame(this.animate.bind(this), canvas); this.render() //console.log("aaaaa") //stats.update(); } render() { var delta = clock.getDelta(); for (var i = 0; i < mixers.length; i++) { //console.log("mixers.length", mixers.length) mixers[i].update(delta); //console.log("t", t)* }
2018-10-18问一下，您使用过three.js在小游戏里成功加载过gltf模型吗？
Canvas的大小和真机实际的屏幕显示范围不一致。我创建了一个小游戏项目，在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);[代码][代码] [代码][代码]}[代码][代码]}[代码][图片] [图片] [图片]
2018-10-18
获得过 0 次赞
回答过的问题获得 0 次赞
分享过的文章/案例获得 0 次赞
评论与回复获得 0 次赞