yannliao / threejs-example-for-miniprogram

这是一个 three.js 在微信小程序里的使用示例
MIT License
269 stars 87 forks source link

贴图加载失败情况 #1

Open ghost opened 4 years ago

ghost commented 4 years ago

试过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);
yannliao commented 4 years ago

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()的问题

ghost commented 4 years ago

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()的问题

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

yannliao commented 4 years ago

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

xiaoliwang2016 commented 4 years ago

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

xiaoliwang2016 commented 4 years ago

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

songStar0904 commented 3 years ago

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

let texture = new THREE.TextureLoader().load(...)
texture.wrapS = 512*512
texture.wrapT = 512*512
xiaoliwang2016 commented 3 years ago

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

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

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

songStar0904 commented 3 years ago

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

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

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

感谢 可以了