Three.js e carregando uma imagem de domínio cruzado

Eu sei que isso já foi perguntado, e eu já li todas as perguntas e respostas que consegui encontrar, mas nada funciona.

Estou executando isso em um servidor local (IIS). Estou tentando carregar uma imagem do imgur e usá-la como textura para um object usando o código:

var savedImage = /[^?]*$/.exec(location.search)[0]; if (savedImage != "") { savedImageLoad("http://i.imgur.com/" + savedImage + ".jpg"); }; function savedImageLoad(image) { var mapOverlay = new THREE.ImageUtils.loadTexture(image); sphere.material = new THREE.MeshBasicMaterial({map: mapOverlay, needsUpdate: true});; sphere.geometry.buffersNeedUpdate = true; sphere.geometry.uvsNeedUpdate = true; } 

Mas está dando o erro:

 Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at http://sofpt.miximages.com/javascript/uBD0g95.png may not be loaded. 

Eu tentei colocar THREE.ImageUtils.crossOrigin = "anonymous"; , ou alguma variação de, no início do meu código, no final e em outros vários pontos. Eu adicionei um web.config com

             

mas isso não funcionou. Isso também não funciona em um site hospedado no bitbucket.org, que para mim diz que estou perdendo alguma coisa no meu código.

Parece estar falhando no sphere.material = new THREE.MeshBasicMaterial({map: mapOverlay, needsUpdate: true});; linha, como se eu comentar isso, então não há erro (mas a malha não é atualizada).

Estou realmente em uma perda do que mais para tentar aqui e qualquer ajuda seria apreciada.

Isso funciona

 THREE.ImageUtils.crossOrigin = ''; var mapOverlay = THREE.ImageUtils.loadTexture('http://sofpt.miximages.com/javascript/3tU4Vig.jpg'); 

Aqui está uma amostra

 var canvas = document.getElementById("c"); var renderer = new THREE.WebGLRenderer({canvas: canvas}); var camera = new THREE.PerspectiveCamera( 20, 1, 1, 10000 ); var scene = new THREE.Scene(); var sphereGeo = new THREE.SphereGeometry(40, 16, 8); var light = new THREE.DirectionalLight(0xE0E0FF, 1); light.position.set(200, 500, 200); scene.add(light); var light = new THREE.DirectionalLight(0xFFE0E0, 0.5); light.position.set(-200, -500, -200); scene.add(light); camera.position.z = 300; THREE.ImageUtils.crossOrigin = ''; var texture = THREE.ImageUtils.loadTexture('http://sofpt.miximages.com/javascript/3tU4Vig.jpg'); var material = new THREE.MeshPhongMaterial({ map: texture, specular: 0xFFFFFF, shininess: 30, shading: THREE.FlatShading, }); var mesh = new THREE.Mesh(sphereGeo, material); scene.add(mesh); function resize() { var width = canvas.clientWidth; var height = canvas.clientHeight; if (canvas.width != width || canvas.height != height) { renderer.setSize(canvas.clientWidth, canvas.clientHeight, false); // don't update the style. Why does three.js fight CSS? It should respect CSS :( camera.aspect = canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix(); } } function render(time) { time *= 0.001; // seconds resize(); mesh.rotation.y = time; renderer.render(scene, camera); requestAnimationFrame(render); } requestAnimationFrame(render); 
 body { margin: 0; } #c { width: 100vw; height: 100vh; display: block; } 
   

ATUALIZAÇÃO: método reprovado

Eu me deparei com esse problema e apliquei a solução a partir da resposta para descobrir que ele não está funcionando devido ao método obsoleto nas versões mais recentes do THREE.js. Estou postando esta resposta caso alguém consiga o mesmo problema. Apesar da depreciação, as informações fornecidas por gman na resposta original são muito úteis e eu recomendo lê-las.

 THREE.ImageUtils.loadTexture() 

método tornou-se obsoleto desde a pergunta e resposta original.

Caminho atual para carregar a textura:

 // instantiate a loader var loader = new THREE.TextureLoader(); //allow cross origin loading loader.crossOrigin = ''; // load a resource loader.load('textures/land_ocean_ice_cloud_2048.jpg', // Function when resource is loaded function ( texture ) {}, // Function called when download progresses function ( xhr ) {}, // Function called when download errors function ( xhr ) {} ); 

Eu encontrei uma solução para imagens e modelos JSON de acordo com o problema de domínio cruzado. Isso sempre funciona, também no Localhost.

No meu caso, estou carregando o jogo do NodeJS na porta 3001 para trabalhar com o Socket.io. Eu quero os modelos 3d da porta 80.

Suponha que todos os modelos estejam no diretório: game / dist / models / ** / *

Eu criei um jogo de arquivo PHP / dist / models / json.php:

  

ThreeJS:

 var loader = new THREE.ObjectLoader(); loader.load(distPath+"models/json.php?file=house1",function ( obj ) { scene.add( obj ); }); 

Diverta-se!

Intereting Posts