Question

图片未按我的域加载

其他域没问题。它正在工作

它只是无法加载我的域

var textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = '';
var map = textureLoader.load('https://MY-DOMAIN.com/upload/01.png');

错误： 获取https://MY-DOMAIN.com/upload/01.png net :: ERR_FAILED

注意：我正在使用localhost。我从远程服务器拍照

Answer 1

从服务器发送的响应标头中，我看到它没有返回 Access-Control-Allow-Origin 标头。这应该是<origin>或*。因此，恐怕您可能必须正确配置服务器。

我注意到您正在使用LiteSpeed Web Server，因此请查看其Wiki页面：https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:config:cors

如果我尝试通过代理为您提供图片，那么一切都很好。

var textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = '';
var map = textureLoader.load('https://api.codetabs.com/v1/proxy?quest=https://zomisoft.com/blog_img/5-5bcf0cae447c36.35706243.png');

Answer 2

我找到了其他解决方案

通过Web服务获取base64类型图片

网络服务

<?php

header("access-control-allow-origin: *");


if($_GET['key']=='1453'){
    try {
$path  = $_GET['url'];

$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

    echo $base64;
    } catch (Exception $e) {
    echo 'Caught exception: ',  $e->getMessage(), "\n";
    }
}else{
    echo 404;
}

three.js

var image = new Image();
image.src = data;//base64 type image from web service

var texture = new THREE.Texture();
texture.image = image;

image.onload = function() {
  texture.needsUpdate = true;
};

var material = new THREE.MeshPhongMaterial({
  map: texture,
});

纹理加载图片网址的我的域返回错误

2 个答案: