请问导入的文件只能是glb吗 ？ 且只能导入线上文件是吧？

如题，使用hdr贴图，并赋予到材质上时，在较新机型上（小米10、iPhone11）等正常显示贴图；但在较旧机型上（测试了iPhone6s、荣耀20）上材质呈现全黑的状态。代码如下：

rgbe载入材质

var texture
new RGBELoader().load('somewebsite/royal_esplanade_1k.hdr', function (t) {
          texture = t
          texture.mapping = THREE.EquirectangularReflectionMapping;
});

进行材质赋值

gem.envMap = texture

微信小游戏开发 轨道控制器（OrbitControls）苹果真机无效

你好，如果模型大小不统一，可以使用包围盒自动计算显示的大小吗？

请问支持CSS2DObject吗？

使用 uniapp的 hbuilder创建 uniapp项目 运行到支付宝小程序 项目类型选择 淘宝小程序
在开发工具中查看一切正常 app.json 中 enableSkia 设置为true后 预览到手机时会遇到问题
THREE.$requestAnimationFrame会卡死闪退
使用canvas.requestAnimationFrame 代替 THREE.$requestAnimationFrame 后
renderer.render 时 貌似渲染位置不正确
textureLoader.load 加载图片资源 onload和onerror 都不会走

hbuilderX版本 3.1.2
小程序开发者工具版本 1.17.9
测试手机 小米MIX2S
手机淘宝版本 9.21.1

使用 npm 安装的 three-platformize 然后手动替换为github上的 three-platformize

@deepkolos 淘宝小程序渲染glb模型有周围有锯齿 这个有啥方案吗？

gltfLoader 导入 draco压缩过glTF文件时， 出现错误：

VM1970 WAService.js:2 ReferenceError: Worker is not defined
at DRACOLoader.js? [sm]:323
errorReport @ VM1970 WAService.js:2
thirdErrorReport @ VM1970 WAService.js:2
(anonymous) @ VM1970 WAService.js:2
I @ VM1970 WAService.js:2
o @ VM1970 WAService.js:2
(anonymous) @ VM1970 WAService.js:2
value @ VM1970 WAService.js:2
o @ VM1970 WAService.js:2
(anonymous) @ VM1970 WAService.js:2

Dracoloader 设置 draco_decoder 好像不起作用

1. should use this.canvasH and this.canvasH in line 67 and 73
2. in real machine test, extensions.get( 'EXT_blend_minmax' ); will return {}, extension.MIN_EXT and extension.MAX_EXT will be undefined

NULL

如题，在webgl下渲染是正常的，但使用VKsession加入到场景中，小程序出现闪退情况

OrbitControls双指缩放和h5表现，双指会卡
IOS比较明显的卡顿

Hi!

I found your code snippet here https://juejin.cn/post/6920981822864097288
It works great in the WeChat Dev Tools and on Android phones, but have you been able to get it to work on an iPhone?
It does not work on the iPhone 8 and 10 that I tested it on.

It appears the readPixels return all 0 values.

Thank you for your great work on three-platformize.

淘宝似乎没有 WXWebAssembly ，但是MeshOpt无法用，有其他办法吗，模型文件都比较大

根据说明文档中提供的升级方式，当升级到高版本时,在小程序中request方法不可用。

RT

import { OrbitControls } from "three-platformize/examples/jsm/controls/OrbitControls";
this.camera =new THREE.PerspectiveCamera(20, this.canvas.width / this.canvas.height, 1, 10000);
const renderer = (this.renderer = new THREE.WebGL1Renderer({
antialias: true,
alpha: true,
canvas: this.canvas,
}));
this.orbitControl = new OrbitControls(this.camera, renderer.domElement);
this.orbitControl.enableDamping = true;
this.orbitControl.dampingFactor = 0.05;

const onFrame = (timestamp) => {
// let start = Date.now()
const frame = session.getVKFrame(canvas.width, canvas.height);
if (frame) {
this.render(frame);
}
this.orbitControl?.update()
session.requestAnimationFrame(onFrame);
};
session.requestAnimationFrame(onFrame);

canvas绑定事件
onTX(e) {
this.platform.dispatchTouchEvent(e);
},

你好，作者。我在一个推送上看到了这篇文章，觉得特别好，但是对于微信小程序端的使用我还是不太了解。新增调用后，一直有报错，能否出一期微信小程序开发的过程，直接导入开发工具进行学习，不胜感激。

platform = new WechatPlatform(canvas);
THREE.PLATFORM.set(platform);

THREE.PLATFORM只能绑定一个？这样我多个canvas就没法同时绘图了。

在不同的页面中绘图，每个页面中都会调用THREE.PLATFORM.set(platform)，会出现以下问题：

同样的代码，加载demo自带的RobotExpressive.glb可以正常加载，但是加载我的model.glb时候却无法正常加载，不知道是否是模型大小问题，我的mode.glb文件大概1M大小，模型可以在·Online 3DViewer中正常打开，但在小程序中无法加载也没有别的错误提示。希望能得到帮助

VideoTexture 需要 video，但微信小程序的video不是原生的video，有什么办法支持 VideoTexture 吗？

https://github.com/deepkolos/three-platformize/issues/17
这个issue是上面issue的延伸。ios渲染会导致微信闪退，安卓渲染不出来。
真的神多坑。。
请问作者有实验过可以吗～有的话求指点一下～谢谢～

首次渲染结果：

react组件卸载，删除canvas后，再次添加canvas组件后结果；

我把微信调试工具里元素都设置 display=none了，渲染的mesh还在界面上，请问是内部哪个元素呈现画面的，怎么清理释放掉；我把我的canvas也隐藏了，也没用

import * as THREE from 'three-platformize';
import WechatPlatform from 'three-platformize/src/WechatPlatform';

three-platformize可以正常引入
提示Error: module "pages/index/three-platformize/src/WechatPlatform.js" is not defined

Maximum call stack size exceeded

请问下有 DRACOLoader 吗

看过源码 发现3DMloader 最终会使用 URL.createObjectURL（Blob） 来生成 rhino3dm.js 的本地路径， 看URL.js 里的 todo说 用wx.fileSystemManager 来做临时路径，不知道搞好了吗？

另外我的项目是用 UniAPP 做的， OrbitControls 却不生效， 不管官方的demo， 还是我自己的模型，都不能使用controls 调整相机的位置

以上都是 wechatPlatform 出现的问题， H5正常

在开发者工具一切正常，但是真机无法加载，已配置合法域名。

 try {
      texture1 = await textureLoader.loadAsync("https://xxxx/result-0.jpg")
    } catch (err) {
      wx.showToast({
        title: "加载失败",
        icon: "error",
        duration: 2000
      })
      wx.getRealtimeLogManager().error(err)
    }

catch到的error没看懂。。

[00:07:35]  {"timestamp":8743946.552416667,"type":"error","target":{"bindingScreen":0,"scale":1,"naturalWidth":5760,"complete":false,"naturalHeight":3240,"height":3240,"premultiplyAlpha":true,"width":5760,"instance":10761289472,"tagName":"IMG","nodeName":"IMG","uid":10761289472,"src":"https://xxxx/result-0.jpg","crossOrigin":"anonymous"},"currentTarget":{"bindingScreen":0,"scale":1,"naturalWidth":5760,"complete":false,"naturalHeight":3240,"height":3240,"premultiplyAlpha":true,"width":5760,"instance":10761289472,"tagName":"IMG","nodeName":"IMG","uid":10761289472,"src":"https://xxxx/result-0.jpg","crossOrigin":"anonymous"}}

https://developers.weixin.qq.com/s/P6cQcCmK7QvS
官方VK的demo 如果替换成three-platformize，用three-platformize的WebGLRenderer或者WebGL1Renderer函数渲染， 打开小程序会瞬间崩溃

报了以下错误:
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版本代码:

`

	<div id="info">
		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - canvas as a texture
		<div>click and draw in the white box</div>
	</div>
	<canvas id="canvas"></canvas>

	<script type="module">

		import * as THREE from '../build/three.module.js';

		var width = window.innerWidth,
			height = window.innerHeight / 2;
		var size = 128;
		var canvas = document.getElementById('canvas'),
			ctx = canvas.getContext('2d');

		var camera, scene, renderer, geometry, texture, mesh;

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

		function init() {
			renderer = new THREE.WebGLRenderer();
			renderer.setSize(width, height);
			document.body.appendChild(renderer.domElement);

			scene = new THREE.Scene();

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

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

			canvas.width = canvas.height = size;
		}

		function animate() {
			requestAnimationFrame(animate);

			changeCanvas();
			texture.needsUpdate = true;
			mesh.rotation.y += 0.01;
			renderer.render(scene, camera);
		}

		init();
		animate();

	</script>

</body>

感谢作者！

想在threejs 里用canvas渲染一个2d的文字，但总是报以下错误

THREE.WebGLState: TypeError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Overload resolution failed.

附上部分代码:
wxml:

<canvas type='2d' id='canvas-text' />
<canvas type='webgl' id='canvas' />

js:

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);
}

ps：以上例子能够在html版本运行（引入的是最新的three.js）
附上完整html代码:

		<!DOCTYPE html>
		<html lang="en">
			<head>
	<title>three.js webgl - materials - canvas texture</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link type="text/css" rel="stylesheet" href="main.css">
	<style>
		#drawing-canvas {
			position: absolute;
			background-color: #000000;
			top: 0px;
			right: 0px;
			z-index: 3000;
			cursor: crosshair;
			touch-action: none;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>

	<script type="module">

		import * as THREE from '../build/three.module.js';

		var width = window.innerWidth,
			height = window.innerHeight / 2;
		var size = 128;
		var canvas = document.getElementById('canvas'),
			ctx = canvas.getContext('2d');

		var camera, scene, renderer, geometry, texture, mesh;

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

		function init() {
			renderer = new THREE.WebGLRenderer();
			renderer.setSize(width, height);
			document.body.appendChild(renderer.domElement);

			scene = new THREE.Scene();

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

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

			canvas.width = canvas.height = size;
		}

		function animate() {
			requestAnimationFrame(animate);

			changeCanvas();
			texture.needsUpdate = true;
			mesh.rotation.y += 0.01;
			renderer.render(scene, camera);
		}

		init();
		animate();

	</script>

			</body>
		</html>

感谢作者！

screenshot 安卓机 截屏 会导致模型残缺破面, 目前只试了gltf

let geometry = new THREE.PlaneGeometry(2, 2);
let loader = new THREE.TextureLoader();
const texture = await loader.loadAsync(data);
const material = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide,
map: texture,
});

        texture.minFilter = THREE.LinearFilter;
        texture.flipY = false;
        texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
        let model = (this.model = new THREE.Mesh(geometry, material));
     
       model.rotation.set(-Math.PI / 2, 0, 0);

this.scene.add(model)

微信小程序模拟器中跑 three-platformize-demo-wechat，点击 GLTFLoader 后程序报错，debug了一下代码，错误发生在 XMLHttpRequest.js 中，如下截图

data 是 ArrayBuffer 类，但是 data instanceof ArrayBuffer 却返回false。

微信官方的 threejs 兼容库大概也有同样的问题，调用 THREE.FileLoader().load(...) 回调中的数据也是错的。

微信小程序android系统，透明材质会变黑。下面的glb文件可以复现问题 (ios、真机没问题，android是黑的)
https://cdn.haibao.uma.com/weapp/tmp/transparent.glb

OrbitControls 是在哪个包导入？

微信小游戏开发中使用，拖放控制器 DragControls安卓真机和苹果真机都无法实现拖放功能

微信小程序setMeshoptDecoder must be called before loading compressed files。。

import { MeshoptDecoder } from 'three-platformize/examples/jsm/libs/meshopt_decoder.module.js';
import { GLTF, GLTFLoader } from 'three-platformize/examples/jsm/loaders/GLTFLoader'
const gltfLoader = new GLTFLoader()
gltfLoader.setMeshoptDecoder(MeshoptDecoder);
这样使用应该是对的把。。

因为小程序环境下各种各样的限制，如果我在 web 开发 3D 的内容，使用用小程序的跳转 h5 API

请问这样会有什么问题吗？

没有试过，有知道的大佬可以回答一下吗？

context type [webgl2] for Canvas#getContext

作者你好，作为一个开发者 目前正在着手准备在淘宝小程序中使用threejs,目前需要渲染的模型格式主要为 gltf格式以及dae格式。。。所以 现在 这个框架可以在生产中使用了吗～？目前还是担心出现很多未知问题

请教一下，如何使用这个库才是正确的方式？

我现在的做法是，按照文档中写的，去link这个库，然后在小程序开发工具中点“构建npm”，然后下面这句
import WechatPlatform from 'three-platformize/src/WechatPlatform';
会提示找不到，然后我会在 three-platformize 目录下 build 好 WechatPlatform.js，直接copy到我的工程目录下引用，就可以了。

上面的方法我使用 Three.js 108 版本是可以的，这个版本是微信官方插件使用的版本。
但是当我使用 126 版本的时候，新建renderer会报错
this.renderer = new THREE.WebGL1Renderer({canvas, antialias: true});
报错：
TypeError: Cannot read property 'mark' of undefined

代码出错的地方是在 WebXRManager 的构造方法中
this.setSession = /*#__PURE__*/function () { var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(value) {

请教一下

1. 使用 three-platformize 的方式是否正确
2. 上面 renderer 的报错可能是什么原因

谢谢！