1

I realize this may not be possible... I've been scouring around and trying out different things to no avail, but I thought it might merit a post before giving up...

I'm putting together an app that uses three.js (webGL) and I would like to give the user the option to input a URL to any image on the web and use that to texture a 3D object in the web app. This would be no problem if not for the whole cross-domain security issue.

I know there are supposed to be some work arounds for CORS approved images, though I don't entirely understand this, it's my impression this has to be set on the host's end (and my users need to be able to pull an image from anywhere on the web and use it at as texture) >> I've tried this: https://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/ ...but it didn't work (probably due to my misunderstanding of what constitutes "CORS approved" )

I thought that maybe doing some kind of php proxy might work? I tried this: http://benalman.com/code/projects/php-simple-proxy/docs/files/ba-simple-proxy-php.html ...but also didn't seem to have any luck. (it may not have been written to work with images... I was getting MIME type errors... and when I hacked around a bit managed to get rid of the error... but still no luck)

...hope someone out there can help!

4

2 回答 2

2

我发现使用 THREE.ImageUtils.loadTexture 函数时，对于three.js，WebGL+CORS 对我不起作用。

这段代码确实对我有用（注意：corsproxy.com 与尼克回答中的 PHP 相同）

var url = 'http://www.corsproxy.com/yourdomain/yourfolder/yourimage.png';    
var image = document.createElement('img');
image.crossOrigin = '';
image.src = url;
var texture = new THREE.Texture(image);
texture.needsUpdate = true;
material.map = texture;
于 2013-09-24T03:00:39.133 回答
0

尤里卡！！！像代理一样的 loox 是要走的路，这成功了:)

<?php
// PHP Proxy
// Responds to both HTTP GET and POST requests
//
// Author: Abdul Qabiz
// March 31st, 2006
//

// Get the url of to be proxied
// Is it a POST or a GET?
$url = ($_POST['url']) ? $_POST['url'] : $_GET['url'];
$headers = ($_POST['headers']) ? $_POST['headers'] : $_GET['headers'];
$mimeType =($_POST['mimeType']) ? $_POST['mimeType'] : $_GET['mimeType'];


//Start the Curl session
$session = curl_init($url);

// If it's a POST, put the POST data in the body
if ($_POST['url']) {
    $postvars = '';
    while ($element = current($_POST)) {
        $postvars .= key($_POST).'='.$element.'&';
        next($_POST);
    }
    curl_setopt ($session, CURLOPT_POST, true);
    curl_setopt ($session, CURLOPT_POSTFIELDS, $postvars);
}

// Don't return HTTP headers. Do return the contents of the call
curl_setopt($session, CURLOPT_HEADER, ($headers == "true") ? true : false);

curl_setopt($session, CURLOPT_FOLLOWLOCATION, true); 
//curl_setopt($ch, CURLOPT_TIMEOUT, 4); 
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);

// Make the call
$response = curl_exec($session);

if ($mimeType != "")
{
    // The web service returns XML. Set the Content-Type appropriately
    header("Content-Type: ".$mimeType);
}

echo $response;

curl_close($session);

?>
于 2013-07-17T22:36:43.477 回答