Три. js - DOMException: «Операция небезопасна». - скорее всего, междоменная проблема - PullRequest
Новая
       13

Три. js - DOMException: «Операция небезопасна». - скорее всего, междоменная проблема

0 голосов
/ 02 апреля 2020

Я реализовал три. js средства просмотра для моих панорам c, которые пару лет назад go, и теперь, когда я перемещаю свой сайт в другое место, у меня есть проблема с Three. js не хочет больше загружаться.

Сообщение об ошибке в консоли: DOMException: «Операция небезопасна.»

Вот часть html, которую я использую:

image

И для части JS: 

<script async src="https://ajax.googleapis.com/ajax/libs/threejs/r84/three.min.js"></script>    
<script>
var camera, scene, renderer;
var isUserInteracting = false,
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0;

function init(full_image) 
   {
       var container, mesh;
    container = document.getElementById( 'background-section' );
    document.getElementById( 'background-section') .style.display='block';
    document.getElementById( 'pano-loading-section') .style.display='block';
    document.getElementById( 'close') .style.display='block';
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
    camera.target = new THREE.Vector3( 0, 0, 0 );
    scene = new THREE.Scene();
    var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
    // invert the geometry on the x-axis so that all of the faces point inward
    geometry.scale( - 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( {
    map: new THREE.TextureLoader().load( full_image )
        } );

mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth*0.95, window.innerHeight*0.95 );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousedown', onPointerStart, false );
document.addEventListener( 'mousemove', onPointerMove, false );
document.addEventListener( 'mouseup', onPointerUp, false );
document.addEventListener( 'wheel', onDocumentMouseWheel, false );
document.addEventListener( 'touchstart', onPointerStart, false );
document.addEventListener( 'touchmove', onPointerMove, false );
document.addEventListener( 'touchend', onPointerUp, false );

document.addEventListener( 'dragover', function ( event ) 
{
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';
}, false );

document.addEventListener( 'dragenter', function () 
{
    document.body.style.opacity = 0.5;
}, false );

document.addEventListener( 'dragleave', function () 
{
    document.body.style.opacity = 1;
}, false );

document.addEventListener( 'drop', function ( event ) 
{
    event.preventDefault();
    var reader = new FileReader();
    reader.addEventListener( 'load', function ( event ) {
        material.map.image.src = event.target.result;
        material.map.needsUpdate = true;
    }, false );
    reader.readAsDataURL( event.dataTransfer.files[ 0 ] );
        document.body.style.opacity = 1;
    }, false );
            //
    window.addEventListener( 'resize', onWindowResize, false );
    document.getElementById( 'pano-loading-section') .style.display='none';
    animate();
}

function onWindowResize() 
{
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth*0.95, window.innerHeight*0.95 );
}

function onPointerStart( event ) 
{
    isUserInteracting = true;
    var clientX = event.clientX || event.touches[ 0 ].clientX;
    var clientY = event.clientY || event.touches[ 0 ].clientY;
    onMouseDownMouseX = clientX;
    onMouseDownMouseY = clientY;
    onMouseDownLon = lon;
    onMouseDownLat = lat;
}

function onPointerMove( event ) 
{
    if ( isUserInteracting === true ) 
        {
            var clientX = event.clientX || event.touches[ 0 ].clientX;
            var clientY = event.clientY || event.touches[ 0 ].clientY;
            lon = ( onMouseDownMouseX - clientX ) * 0.1 + onMouseDownLon;
            lat = ( clientY - onMouseDownMouseY ) * 0.1 + onMouseDownLat;
        }
}

function onPointerUp() 
{
    isUserInteracting = false;
}

function onDocumentMouseWheel( event ) 
{
    var fov = camera.fov + event.deltaY * 0.05;
    camera.fov = THREE.Math.clamp( fov, 10, 75 );
    camera.updateProjectionMatrix();
}

function animate() 
{
    requestAnimationFrame( animate );
    update();
}

function update() 
{
    if ( isUserInteracting === false ) 
        {
            lon += 0.1;
        }
    lat = Math.max( - 85, Math.min( 85, lat ) );
    phi = THREE.Math.degToRad( 90 - lat );
    theta = THREE.Math.degToRad( lon );
    camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
    camera.target.y = 500 * Math.cos( phi );
    camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );
    camera.lookAt( camera.target );
            /*
            // distortion
            camera.position.copy( camera.target ).negate();
            */
    renderer.render( scene, camera );
}


</script>

Я использовал тот же скрипт в другом домене для изображений, и он работал хорошо, но теперь, когда я переехал, он не работает больше.

Я полагаю, это как-то связано с кросс-доменом, но я не знаю, где именно. Я пробовал локальную версию файла JS, и это та же проблема.

Ошибка в JS возникает в строке 121. Ниже приведен полный текст: 

DOMException: "The operation is insecure." three.js:121:396
texImage2D https://wp.laurentwillen.be/js/three.js:121
n https://wp.laurentwillen.be/js/three.js:97
setTexture2D https://wp.laurentwillen.be/js/three.js:181
hf https://wp.laurentwillen.be/js/three.js:7
upload https://wp.laurentwillen.be/js/three.js:343
G https://wp.laurentwillen.be/js/three.js:147
renderBufferDirect https://wp.laurentwillen.be/js/three.js:165
n https://wp.laurentwillen.be/js/three.js:134
render https://wp.laurentwillen.be/js/three.js:180
update https://wp.laurentwillen.be/circuits/circuit-italie/catane/?bb:1679
animate https://wp.laurentwillen.be/circuits/circuit-italie/catane/?bb:1659

Спасибо

1 Ответ

0 голосов
/ 03 апреля 2020

Это определенно проблема CORS. Я рекомендую вам ознакомиться с , как современные браузеры обрабатывают междоменные запросы .

. Я думаю, ваш сервер images.laurentwillen.be не настроен на передачу ресурсов в другие домены. Это функция безопасности, поэтому другие люди не крадут вашу пропускную способность (вам, вероятно, не нужно загружать тысячи сайтов, используя изображения, размещенные на вашем сервере).

Существует 2 решения этой проблемы:

  1. Разместите изображения в том же домене, где они запрашиваются.
  2. Узнайте, как разрешить серверу разрешать доставку изображений в домен, где вы их используете. Способ достижения этого зависит от типа используемого сервера, и вам придется немного покопаться, чтобы выяснить, как его настроить, поэтому решение 1 будет самым простым.
...