yannliao / threejs-example-for-miniprogram

这是一个 three.js 在微信小程序里的使用示例

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

贴图加载失败情况

opened this issue · comments

试过jpg、png,贴图均未成功

const material = [];
        for (var i = 0; i < 6; ++i) {
          material.push(new THREE.MeshBasicMaterial({
            map: THREE.ImageUtils.loadTexture('https://6574-etma-637cea-1258884585.tcb.qcloud.la/3D/gutian-' + i + '.png', 
              {}, function () {
                renderer.render(scene, camera);
              }),
            overdraw: true
          }));
        }
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

imageloader里面最后调用的是小程序的 canvas.createImage() 我用下面代码创建图片

  var image = canvas.createImage()
  image.onerror = function (err) {
    console.log('image.onerror', err)
  }
  image.onload = function (err) {
    console.log('image.onload', err)
  }
  // image.src = 'https://threejs.org/examples/textures/land_ocean_ice_cloud_2048.jpg'
  image.src = 'https://6574-etma-637cea-1258884585.tcb.qcloud.la/3D/gutian-4.jpg'

你的图片在真机上会走到onerror , threejs官网和其他的图片都是onload.

可能是图片或者域名或者小程序的canvas.createImage()的问题

imageloader里面最后调用的是小程序的 canvas.createImage() 我用下面代码创建图片

  var image = canvas.createImage()
  image.onerror = function (err) {
    console.log('image.onerror', err)
  }
  image.onload = function (err) {
    console.log('image.onload', err)
  }
  // image.src = 'https://threejs.org/examples/textures/land_ocean_ice_cloud_2048.jpg'
  image.src = 'https://6574-etma-637cea-1258884585.tcb.qcloud.la/3D/gutian-4.jpg'

你的图片在真机上会走到onerror , threejs官网和其他的图片都是onload.

可能是图片或者域名或者小程序的canvas.createImage()的问题

我连仓库里的例子都显示不出来,。自己的图,缩小图片尺寸也不行,😔

手机什么系统? 微信版本是多少? 你可以把 on error 的内容打印出来看下是什么~

commented

我的也是 在真机测试下 textureLoader.load走的是onload回调,而且能打印出texture是一个对象,但是将它赋值给材质map属性后就出错了

commented

我犯了一个错,我图片尺寸不是2的次方,导致真机显示不出来,改成512*512后可以显示了

我犯了一个错,我图片尺寸不是2的次方,导致真机显示不出来,改成512*512后可以显示了
大佬 是这样的么 我这样在安卓机上还是不行呃, 求指教~

let texture = new THREE.TextureLoader().load(...)
texture.wrapS = 512*512
texture.wrapT = 512*512
commented

我犯了一个错,我图片尺寸不是2的次方,导致真机显示不出来,改成512*512后可以显示了
大佬 是这样的么 我这样在安卓机上还是不行呃, 求指教~

let texture = new THREE.TextureLoader().load(...)
texture.wrapS = 512*512
texture.wrapT = 512*512

不是额 是贴图的尺寸(像素)

我犯了一个错,我图片尺寸不是2的次方,导致真机显示不出来,改成512*512后可以显示了
大佬 是这样的么 我这样在安卓机上还是不行呃, 求指教~

let texture = new THREE.TextureLoader().load(...)
texture.wrapS = 512*512
texture.wrapT = 512*512

不是额 是贴图的尺寸(像素)

感谢 可以了