1. Community Home
  2. General

THREE.js TEXTURE AND COLOR. CAN NOT INPUT IMAGE, HELP!

  • Me_nO_PreN0
    Likes 0
    Problem Description

    I CAN NOT INPUT IMAGE INTO THE CUBE! 

    IT SHOW ME THIS ERROR AT CONSOLE TAPE:

    THREE.MeshFaceMaterial has been removed. Use an Array instead.

    Access to Image at 'file:///C:/Users/Mac's%20Dell/Desktop/THREE/img/2.png' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

    BELOW IS MY CODE

     

     

    <html>
    <head>
    <title>THREE.js Crash Course</title>
    <style>
    body
    {
    margin:0;
    }
    canvas
    {
    width: 100%;
    height: 100%;
    }
    </style>
    </head>
     
    <body>
    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>
     
    <script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera
    ( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
     
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
     
    window.addEventListener('resize', function()
    {
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setSize( width, height );
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    } );
     
    controls = new THREE.OrbitControls
    ( camera, renderer.domElement );
     
    // create the shape
    var geometry = new THREE.BoxGeometry( 1.5, 1.5, 1.5 );
    var cubeMaterials =
    [
    PROBLEM START HERE
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('img/1.png'), side: THREE.DoubleSide}), // RIGHT SIDE
    new THREE.MeshPhongMaterial({map: new THREE.TextureLoader().load('img/2.png'), side: THREE.DoubleSide}), // LEFT SIDE
    new THREE.MeshLambertMaterial({map: new THREE.TextureLoader().load('img/3.png'), side: THREE.DoubleSide}), // TOP SIDE
    new THREE.MeshPhongMaterial({map: new THREE.TextureLoader().load('img/4.png'), side: THREE.DoubleSide}), // BOTTOM SIDE
    new THREE.MeshLambertMaterial({map: new THREE.TextureLoader().load('img/5.png'), side: THREE.DoubleSide}), // FRONT SIDE
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('img/6.png'), side: THREE.DoubleSide}), // BACL SIDE
    END HERE
    ];
     
    // create a material, color or image textures
    var material = new THREE.MeshFaceMaterial( cubeMaterials );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
     
    camera.position.z = 3;
     
     
    // game logic
    var update = function ( )
    {
    //cube.rotation.x += 0.01;
    //cube.rotation.y += 0.005;
     
    };
     
    // draw Scene
    var render = function ( )
    {
    renderer.render( scene, camera );
    };
     
    // run game loop (update, render, repeat)
    var GameLoop = function ( )
    {
    requestAnimationFrame( GameLoop );
     
    update();
    render();
    };
     
    GameLoop( );
    </script>
     
    </body>
    </html>

     

  • Sonar Systems admin
    Likes 0

    This is due to the images being stored locally, this causes security issues. This link will assist you with fixing this https://stackoverflow.com/questions/41965066/access-to-image-from-origin-null-has-been-blocked-by-cors-policy 

Login to reply