Ошибка пересечения оригинала Three.js Связанная текстура файла Collada

Question

У меня есть файл Collada, который загружается с помощью трёх.js. Файл имеет связанную текстуру Texture_0.png. Мой файл Collada загружается через веб-службу, а текстура хранится в одном блоке с доступом к веб-службе REST. CORS включен, поэтому файл Collada загружается так, как ожидалось, но так как файл Collada ищет прямую ссылку на файл текстуры, он также вызывает его (так как он упоминается в его XML). Однако, когда он называет это связанный файл, я получаю следующее сообщение об ошибке и текстура не загружается (на самом деле файл Collada уходит, и я получаю циклическую кол этой ошибки каждый раскол второй):

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at http://mywebservice.net/blob/Texture_0.png may not be loaded.

Вот пример 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); 
} 

Update 1:

Я попробовал метод в следующем посте THREE.js Collada textures not loading, добавив следующую строку в ColladaLoader.js:

loader.crossOrigin = ''; 

И это по моему сценарию:

loader.setCrossOrigin(''); 

Но я получаю ошибку или:

loader.setCrossOrigin is not a function

Answer 1

Если вы посмотрите на StackOverflow ссылку вы предоставили, «three.js Collada текстуры не загружаются» посмотреть на то, где setCrossOrigin («») проходит линия - в файле ColladaLoader.js, не ваш Файл источника приложения three.js.

Когда вы вызывали setCrossOrigin (''), он пытался вызвать его непосредственно на ColladaLoader (loader.setCrossOrigin), который браузер прав, говоря «это не функция».

Вместо этого поместите вызов setCrossOrigin прямо под вызовом ImageLoader() внутри исходного файла ColladaLoader.js. У ImageLoader действительно есть метод .setCrossOrigin.

Надеюсь, это поможет! :-)

p.s.

Давайте думать об этом, файл ColladaLoader.js использует имя переменного «загрузчик» без вара перед ним, что может иметь последствие Области применения:

function loadTextureImage (texture, url) { 

    loader = new THREE.ImageLoader(); 

    loader.load(url, function (image) { 

     texture.image = image; 
     texture.needsUpdate = true; 

    }); 

}; 

EDIT: Вышеупомянутые загрузчик без Проблема «var» исправлена ​​в ветви dev файла Three.js (файл ColladaLoader.js). Я думаю, кто-то еще это заметил, поэтому мы можем игнорировать. :-)