以下主要代码:
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 scene
let renderer
let mthis
let 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)如何制作麻烦看一下链接,这种我们更方便进行问题排查