当用canvas渲染文字时出错

报了以下错误: THREE.WebGLState: TypeError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Overload resolution failed. at Object.texImage2D (three.js?t=wechat&s=1618569287467&v=d58a6b9e40015313318b57abd046fb5f:772) at uploadTexture (three.js?t=wechat&s=1618569287467&v=d58a6b9e40015313318b57abd046fb5f:811) at setTexture2D (three.js?t=wechat&s=1618569287467&v=d58a6b9e40015313318b57abd046fb5f:790) at WebGLTextures.safeSetTexture2D (three.js?t=wechat&s=1618569287467&v=d58a6b9e40015313318b57abd046fb5f:827) at SingleUniform.setValueT1 [as setValue] (three.js?t=wechat&s=1618569287467&v=d58a6b9e40015313318b57abd046fb5f:593) at Function.WebGLUniforms.upload (three.js?t=wechat&s=1618569287467&v=d58a6b9e40015313318b57abd046fb5f:678) at setProgram (three.js?t=wechat&s=1618569287467&v=d58a6b9e40015313318b57abd046fb5f:989) at WebGL1Renderer.WebGLRenderer.renderBufferDirect (three.js?t=wechat&s=1618569287467&v=d58a6b9e40015313318b57abd046fb5f:926) at renderObject (three.js?t=wechat&s=1618569287467&v=d58a6b9e40015313318b57abd046fb5f:949) at renderObjects (three.js?t=wechat&s=1618569287467&v=d58a6b9e40015313318b57abd046fb5f:949)

部分代码： `onLaunch() { this.canvas = (await getNode('#canvas'))[0].node; this.canvasText = (await getNode('#canvas-text'))[0].node; this.platform = new WechatPlatform(this.canvas); // webgl canvas

this.platform.enableDeviceOrientation('game'); // 开启DeviceOrientation THREE.PLATFORM.set(this.platform);

this.init(); this.animate(); } changeCanvas() { const ctx = this.canvasText.getContext('2d'); ctx.font = '16pt Arial'; ctx.fillStyle = 'orange'; ctx.fillRect(0, 0, this.canvasText.width, this.canvasText.height); ctx.fillStyle = 'white'; ctx.fillRect(10, 10, this.canvasText.width - 20, this.canvasText.height - 20); ctx.fillStyle = 'black'; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("踏得网", this.canvasText.width / 2, this.canvasText.height / 2); }

init() { this.renderer = new THREE.WebGL1Renderer({ antialias: true, // 抗锯齿 }); this.renderer.setSize(this.canvas.width, this.canvas.height);

this.scene = new THREE.Scene();

this.camera = new THREE.PerspectiveCamera(70, this.canvas.width / this.canvas.height, 1, 1000);
this.camera.position.z = 500;
this.scene.add(this.camera);

this.texture = new THREE.Texture(this.canvasText);
this.material = new THREE.MeshBasicMaterial({
  map: this.texture
});
const geometry = new THREE.BoxGeometry(200, 200, 200);
this.mesh = new THREE.Mesh(geometry, this.material);
this.scene.add(this.mesh);

}

animate() { THREE.$requestAnimationFrame(() => this.animate()); this.changeCanvas(); this.texture.needsUpdate = true; this.mesh.rotation.y += 0.01; this.renderer.render(this.scene, this.camera); }`

wxml: <Canvas type='2d' id='canvas-text' style={{ width:64px, height:64px}} /> <Canvas type='webgl' id='canvas' style={{ width: '750rpx', height: '750rpx'}} onTouchStart={e => this.handleToucheEvent(e)} onTouchMove={e => this.handleToucheEvent(e)} onTouchEnd={e => this.handleToucheEvent(e)} />

ps: 以上例子可以在html版本运行，附上html版本代码:

`<!DOCTYPE html>

three.js webgl - materials - canvas texture

three.js - webgl - canvas as a texture

click and draw in the white box

感谢作者！

deepkolos / three-platformize

当用canvas渲染文字时出错 #16