微信小游戏 使用 THREE开发,调试没有报错,组件也渲染了 依旧不显示文字?

小游戏 企业微信 微信支付 小程序 文章 2020-07-30 20:59 909 0 全屏看文

AI助手支持GPT4.0

微信小游戏 使用 THREE开发,调试没有报错,组件也渲染了 依旧不显示文字?

 以下主要代码:

import * as THREE from 'libs/three.js'// import  'libs/spe.min.js'// import  'libs/symbol.js'import  'renderers/Projector.js'import  'renderers/CanvasRenderer.js'import  'libs/stats.min.js'let ctx   = canvas.getContext('webgl')let scenelet rendererlet mthislet group// ... 其它变量/常量 .../** * 游戏主函数 */export default class Main {  constructor() {    mthis=this;     // 场景      this.scene = new THREE.Scene();          // 透视摄像头      this.camera = new THREE.PerspectiveCamera(75window.innerWidth / window.innerHeight, 11000);      // webGL渲染器     // 同时指定canvas为小游戏暴露出来的canvas      this.renderer = new THREE.WebGLRenderer({          canvas: canvas      });      this.start()     }  start() {    var loader = new THREE.FontLoader();    console.log(loader);    var font = loader.load(      // resource URL      'http://localhost/threejs-demo/public/examples/fonts/helvetiker_regular.typeface.json',          // onLoad callback      function ( font {        mthis.init( font );      },           );            } init( font ) {    // Get text from hash    var theText = "your scorre is 10 ";    var hash = document.location.hash.substr( 1 );    if ( hash.length !== 0 ) {      theText = hash;    }    var geometry = new THREE.TextGeometry( theText, {      font: font,      size10,      height10,                });    geometry.computeBoundingBox();    var materials = [      new THREE.MeshBasicMaterial( { color0x000000} ),      new THREE.MeshBasicMaterial( { color0xffffff} )    ];    var mesh = new THREE.Mesh( geometry, materials );    mesh.position.x = 0;    mesh.position.y = 0;    mesh.position.z = 0;    mesh.rotation.x = 0;    mesh.rotation.y = 0 ;    this.scene.add( mesh );        this.renderer.render(this.scene, this.camera);     console.log(this.scene);    console.log(canvas);    console.log(this);       }  // UPDATE 更新  update() {  }  // RENDER 渲染  render() {    // ... 渲染代码块 ...  }  // 实现游戏帧循环  loop() {     }}


调试也没发现问题

依旧不显示。


网页版没有问题。

问题在哪儿啊?微信小游戏不支持threejs吗? 或者有教程吗?

The main codes are as follows: import * as THREE from 'libs/ three.js '// import  'libs/ spe.min.js '// import  'libs/ symbol.js 'import  'renderers/ Projector.js 'import  'renderers/ CanvasRenderer.js 'import  'libs/ stats.min.js 'let ctx   =  canvas.getContext ('webgl ') let scenelet rendererlet mthislet group / /... Other variables / constants... / * * game main function Number * / export default class main {constructor() {mthis = this; / / scenario this.scene  = new  THREE.Scene (); / / perspective camera this.camera  = new  THREE.PerspectiveCamera (75,  window.innerWidth  /  window.innerHeight , 1, 1000); / / webgl render / / at the same time, specify canvas as the canvas exposed by the game this.renderer  = new  THREE.WebGLRenderer ({          canvas: canvas      });       this.start ()     }  start() {    var loader = new  THREE.FontLoader ();     console.log (loader);     var font =  loader.load (      // resource URL      ' http://localhost/threejs-demo/public/examples/fonts/helvetiker_ regular.typeface.json ',          // onLoad callback      function ( font ) {         mthis.init ( font );      },           );            } init( font ) {    // Get text from hash    var theText = "your scorre is 10 ";     var hash =  document.location.hash .substr( 1 );    if (  hash.length  !== 0 ) {      theText = hash;    }    var geometry = new  THREE.TextGeometry ( theText, {      font: font,      size: 10,      height: 10,                });     geometry.computeBoundingBox ();     var materials = [      new  THREE.MeshBasicMaterial ( { color: 0x000000} ),      new  THREE.MeshBasicMaterial ( { color: 0xffffff} )    ];    var mesh = new  THREE.Mesh ( geometry, materials );     mesh.position .x = 0;     mesh.position .y = 0;     mesh.position .z = 0;      mesh.rotation .x = 0;     mesh.rotation .y = 0 ;     this.scene.add ( mesh );         this.renderer.render ( this.scene , this.camera );      console.log ( this.scene );     console.log (canvas);     console.log (this); } / / update update update() {} / / render render render() {/ /... Render code block...} / / debug the game frame loop loop() {}} and no problem is found. There is no problem with the web version. What's the problem? Does wechat games not support threejs? Or is there a tutorial?

回答:

Forever:

经典的跳一跳就是用three写, 你能提供复现问题的简单代码片段吗?(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)如何制作麻烦看一下链接,这种我们更方便进行问题排查

-EOF-

AI助手支持GPT4.0