Javascript OffscreenCanvas.getContext（）.fillText（）生成颠倒的文本。如何翻转它们？

我使用offscreencavas.getContext.fillText生成一些文本，然后使用offscreencavas.transferToImageBitmap获取贴图，但当我将其用作threejs项目的纹理时，它们会翻转过来。请查看显示字母R如何错误显示的图像

我想我可以使用createImageBitmap和flipY选项来改变文本的方向，但是我从这个函数中什么也得不到。没有崩溃，但不显示文本

你能告诉我其他的窍门吗

---

Set.flipY=在您的threejs纹理上为false。由于涉及扫描线光栅的历史原因，OpenGL纹理在默认情况下垂直翻转。

使用OffscreenCanvas并将其传递给THREE.CanvaTexture在worker中似乎工作正常。设置texture.flipY=false也适用于默认值为true的情况

在下面的示例中，texture.flipY=false被注释掉，但如果取消注释，您将看到纹理翻转

//Three.js-OffscreenCanvas //从https://threejsfundamentals.org/threejs/threejs-offscreencanvas.html “使用严格的”；//eslint禁用线 函数main{/*eslint一致返回：0*/ const canvas=document.querySelector'c'； 如果！canvas.transferControlToOffscreen{ canvas.style.display='none'； document.querySelector'noOffscreenCanvas'。style.display=； 回来 } const offscreen=canvas.transferControlToOffscreen； const worker=新workerNetworkerBlob； worker.postMessage{type:'main'，canvas:offscreen}，[offscreen]； 函数发送大小{ worker.postMessage{ 键入：“大小”， 宽度：canvas.clientWidth， 高度：canvas.clientHeight， }; } addEventListener'resize'，sendSize； 发送大小； } 主要的 // --- //为辅助脚本创建blob，以便代码片段/JSFiddle/Codepen的内容可以自包含 // 函数getWorkerBlob{ 常量idsToUrls=[]； const scriptElements=[…document.querySelectorAll'script[type=x-worker]']； 对于scriptElements的常量scriptElement{ 让text=scriptElement.text； 对于idsToUrls的常量{id，url}{ text=text.splitid.joinurl； } constblob=newblob[text]，{type:'application/javascript'}； const url=url.createObjectURLblob； const id=scriptElement.id； idsToUrls.push{id，url}； } 返回idsToUrls.pop.url； } 身体{ 保证金：0； } c{ 宽度：100vw； 高度：100vh； 显示：块； } noOffscreenCanvas{ 显示器：flex； 宽度：100vw； 高度：100vh； 对齐项目：居中； 证明内容：中心； 背景：红色； 颜色：白色； } “使用严格的”；//eslint禁用线 /*全球进口许可证，三份*/ 进口文件https://threejsfundamentals.org/threejs/resources/threejs/r112/build/three.min.js'; 常量状态={ 宽度：300，//画布默认值 高度：150，//画布默认值 }; 函数主数据{ const{canvas}=数据； const renderer=new THREE.WebGLRenderer{canvas}； state.width=canvas.width； state.height=canvas.height； 常数fov=75； const aspect=2；//画布默认值 常数近=0.1； 常数far=100； const-camera=新的3.PerspectiveCamerafov、aspect、near、far； 摄像机位置z=4； const scene=新的三个场景； { 常量颜色=0xFFFFFF； 常数强度=1； 恒光=新的三向光颜色、强度； light.position.set-1、2、4； scene.addlight； } 常数boxWidth=1； const-boxHeight=1； 常数boxDepth=1； const geometry=新的三个.BoxGeometryboxWidth、boxHeight、boxDepth； const offscreenCanvas=新offscreenCanvas 256； const ctx=offscreenCanvas.getContext'2d'； ctx.fillStyle='FDB'； ctx.fillRect0，0，256，256； ctx.font='200px粗体无衬线'； ctx.textAlign='中心'； ctx.textb基线='中间'； ctx.fillStyle='666'； ctx.fillText'F'，128，128； const纹理=新的三个。CanvasTextureoffscreenCanvas； //texture.flipY=false； 函数makeInstancegeometry，color，x{ const material=新的3.0网格材质{ 贴图：纹理， }; const cube=新的三个。网格几何体，材质； scene.addcube； 立方体位置x=x； 返回立方体； } 常数立方=[ makeInstancegeometry，0x44aa88，0， makeInstancegeometry，0x8844aa，-2， makeInstancegeometry，0xaa8844，2， ]; 函数resizeRenderToDisplaySizeRenderer{ const canvas=renderer.domeElement； const width=state.width； const height=state.height； const needResize=canvas.width！==width | | canvas.height！==height； 如果需要，调整大小{ renderer.setSizewidth，height，false； } 返回需要调整大小； } 函数渲染时间{ 时间*=0.001； 如果ResizeRenderToDisplaySizeRenderer{ camera.aspect=state.width/state.height； camera.updateProjectionMatrix； } cubes.forEachcube，ndx=>{ 恒速=1+ndx*.1； 常数 rot=时间*速度； 立方体旋转x=旋转； cube.rotation.y=rot； }; renderer.renderscene，摄影机； requestAnimationFramerender； } requestAnimationFramerender； } 函数大小数据{ state.width=data.width； state.height=data.height； } 常量处理程序={ 主要的 大小 }; self.onmessage=function{ const fn=handlers[e.data.type]； 如果！fn{ 抛出新错误“类型没有处理程序：”+e.data.type； } fne.数据； }; 不支持Offscreencavas

---

three.js表示flipY不适用于ImageBitmap。我无论如何都要测试它，但它并没有像预期的那样工作。three.js依赖于底层的createImageBitmap来设置flipY。。不是你的图像位图，你也不需要transferinagetobitmap垃圾。只需使用THREE.canvasTexture您的canvasI可能应该突出屏幕外的方法，这基本上意味着整个THREE.js内容都发生在web worker中。THREE.CanvasTexture需要访问该文档，而web worker无法访问该文档。所以，它会崩溃。这就是整个问题的出发点。顺便说一句，如果我在前面的画布中使用three.js，一切都会完美地工作。但我需要的是如何在屏幕外完成。3.在Chrome的一名工人中，CanvaTexture通过了一个OffscreenCanvas考试，似乎工作得很好。AFAIK Firefox仍然不支持OffscreenCavastank。你说得对。我没有意识到我可以直接把越洋的蛇传给CanvasTexture。我被CanvaTexture签名的3.js文档误导了……canvas:HTMLElement。。。。嗯，事后看来，我应该知道签名只是一个暗示，而不是强类型合同。