Three.JS错误-纹理不是二的幂/无法更改纹理

时间:2019-07-08 19:57:02

标签: javascript three.js blob

快速运行-我正在尝试建立一个包含360个图像的画廊,当单击一个画廊图像时,将在内部使用360查看器打开模式,但是我希望图像根据已单击的画廊图像进行动态更改。 。

controllers

这是我在控制台中收到的错误。正如您在下面的代码中看到的:

THREE.WebGLRenderer: image is not power of two (1920x960). Resized to 2048x1024 
blob:http://nolan.bfdevserver.com/7ca91892-2e3b-4fff-b672-ec250ef13498 new image blob
blob:http://nolan.bfdevserver.com/7788013c-9611-497a-bc12-66a06bb2244f old image blob
THREE.WebGLRenderer: image is not power of two (0x0). Resized to 0x0 
THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter should be set to THREE.NearestFilter or THREE.LinearFilter. 
THREE.Texture
WebGL: INVALID_VALUE: texImage2D: no canvas

所以我不确定为什么会这样。

material.minFilter = THREE.LinearFilter;

   <div id="container" data="<?php $ThreeSixtyImage = the_field('image'); ?>"></div>

<div id="gallery-modal" class="modal">
</div> 

<div id="gallery" class="gallery">
    <div class="gallery-item">
        <img src="https://www.bluefire360.com/wp-content/uploads/V4260450-min.jpg" />
    </div>
    <div class="gallery-item">
        <img src="http://nolan.bfdevserver.com/wp-content/uploads/pano_2048.jpg" />
    </div>
    <div class="gallery-item">
        <img src="http://nolan.bfdevserver.com/wp-content/uploads/pano_2048.jpg" />
    </div>
</div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>

我已经连续数小时担任主演,因此将不胜感激任何帮助,甚至只是一个指导方向。预先感谢!

1 个答案:

答案 0 :(得分:1)

要修复两个错误的幂,需要更改此行:

material.minFilter = THREE.LinearFilter;

material.map.minFilter = THREE.LinearFilter;

要更新纹理,请返回标准图片网址和blob网址,并使用:

if(newestImage) {
   material.map = new THREE.TextureLoader().load(newestImage);
}