Question

我正在升级一些用于three.js r61到three.js r74的代码。我知道，这是一次大跳跃，但事情并非总是如此。

我仍然无法正常工作的剩余部分之一是使用画布构建的纹理，在SpriteMaterial中使用，然后用于THREE.Sprite。

到目前为止，我做了以下事情：

将Texture更改为CanvasTexture
在SpriteMaterial中，注释了useScreenCoordinates，alignment和sizeAttenuation

我尝试了各种各样的东西，但似乎这件事根本就没有显示出来。在任何地方都有这样的例子吗？我只是想显示一个在画布中构建的工件。

更新：以下代码是我到目前为止所尝试的：

var loader = new THREE.TextureLoader();
loader.load(canvas.toDataURL(), function(texture) {
  var material = new THREE.SpriteMaterial({
    map: texture,
    blending: THREE.AdditiveBlending,
    color: me.color,
    opacity: me.opacity,
    transparent: me.transparent,
    visible: me.visible
  });

  var sprite = new THREE.Sprite(material);
  scene.add(sprite);
});

Answer 1

您对细节非常了解，但这是一个很好的方法：

https://jsfiddle.net/_jered/xcej4ec6/

allocate(x(1000))

基本上，只需使用内置的Loader类来加载所需的资源，包括从canvas中。使用Loaders和回调非常重要，因为资产将异步准备，您需要等到它们完成后才能使用它们。在我的示例中，我使用占位符纹理创建网格，并将其应用于Loader的回调。

将CanvasTexture与Sprite一起使用

1 个答案: