js交叉原点错误加载相关Collada文件纹理

Three.js Cross Origin Error Loading Related Collada File Texture

本文关键字：Collada 文件 纹理 加载 原点 错误 js      更新时间：2023-09-26

我有一个Collada文件被three.js加载。该文件有一个名为Texture_0.png的关联纹理。我的Collada文件是通过Web服务加载的，因为它和纹理存储在具有REST Web服务访问的同一个blob中。CORS被启用，所以Collada文件按预期加载，但由于Collada文件正在寻找对纹理文件的直接引用，它也调用它(因为它在XML中被引用)。然而，当它调用这个相关文件时，我得到以下错误，纹理没有加载(实际上Collada文件消失了，我得到这个错误的循环计数每隔一秒):

未捕获的安全错误:未能执行'texImage2D''WebGLRenderingContext':交叉原点图像不能加载http://mywebservice.net/blob/Texture_0.png

下面是示例XML:

<library_images>
<image id="Texture_0_png">
<init_from>./Texture_0.png</init_from>
</image>

我认为这与允许/启用通过Three.js中的代码访问相关图像文件有关，类似于ImageUtils具有匿名加载的方式。因为我没有单独调用纹理，而是因为Collada文件(.dae)引用它而自动调用，我如何获得没有交叉原点错误的纹理文件?下面是我的three.js代码:

// 3D Object
var scene;
var camera;
var renderer;
var box;
var controls;
// Instantiate a Collada loader
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load(http://mywebservice.net/blob/mycollada.dae', function (collada) {
    box = collada.scene;
    box.traverse(function (child) {
        if (child instanceof THREE.SkinnedMesh) {
            var animation = new THREE.Animation(child, child.geometry.animation);
            animation.play();
        }
    });
    box.scale.x = box.scale.y = box.scale.z = .2;
    box.updateMatrix();
    init();
    animate();
});

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0xdddddd);
    //renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setSize(500, 500);
    // Load the box file
    scene.add(box);
    // Lighting
    var light = new THREE.AmbientLight();
    scene.add(light);
    // Camera
    camera.position.x = 40;
    camera.position.y = 40;
    camera.position.z = 40;
    camera.lookAt(scene.position);
    // Rotation Controls
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.rotateSpeed = 5.0;
    controls.zoomSpeed = 5;
    controls.noZoom = false;
    controls.noPan = false;
    $("#webGL-container").append(renderer.domElement);
}
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
更新1:

我在下面的帖子中尝试了这个方法:THREE.js Collada纹理不加载添加这一行到ColladaLoader.js:

loader.crossOrigin = '';

在我的脚本中:

loader.setCrossOrigin( '' );

但是我得到一个错误:

加载程序。setCrossOrigin不是函数

如果你看看你提供的StackOverflow链接，'THREE.js Collada textures not loading'看看setCrossOrigin(")行在ColladaLoader.js文件中，而不是你的THREE.js应用程序源文件。

当你调用setCrossOrigin(")时，它试图在ColladaLoader (loader.setCrossOrigin)本身上调用它，浏览器正确地说'这不是一个函数'。

相反，将setCrossOrigin调用放在ColladaLoader.js源文件中ImageLoader()调用的正下方。ImageLoader确实有一个。setcrossororigin方法。

希望这对你有帮助!: -)

注。

仔细想想，ColladaLoader.js文件使用的变量名'loader'前面没有var，这可能会产生作用域后果:

function loadTextureImage ( texture, url ) {
    loader = new THREE.ImageLoader();
    loader.load( url, function ( image ) {
        texture.image = image;
        texture.needsUpdate = true;
    } );
};

编辑:上面没有'var'问题的加载器已经在Three.js的开发分支(ColladaLoader.js文件)中修复。我猜其他人也注意到了，所以我们可以忽略它。: -)

相关文章：