以下主要代码:
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(75, window.innerWidth / window.innerHeight, 1, 1000); // 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, 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() { } // RENDER 渲染 render() { // ... 渲染代码块 ... } // 实现游戏帧循环 loop() { }}
调试也没发现问题
依旧不显示。
网页版没有问题。
问题在哪儿啊?微信小游戏不支持threejs吗? 或者有教程吗?
经典的跳一跳就是用three写, 你能提供复现问题的简单代码片段吗?(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)如何制作麻烦看一下链接,这种我们更方便进行问题排查