'I want cubeTextureLoader cube map background but it doesn't work, Why?

Three js

I want cubeTextureLoader cube map background. but it doesn't work and showing nothing only white background and my object, But I want 3d background. It gives me error like this one- "Access to image at 'file:///C:/Users/Mili%20Murmu/Documents/Arena_web/Mili/ThreeJs/Bts_music-player/images/posx.jpg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.".

second error - "Failed to load resource: net::ERR_FAILED".

I don't understand why isn't showing any cube map background? Please help me! How can I solve this?

const scene = new THREE.Scene();


//light
const light = new THREE.PointLight(0xffffff, 1)
light.position.set(2000, 2000, 1500);
scene.add(light);

const ambientlight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(ambientlight);


//set up camera
// Set up camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.3, 10000)
camera.position.set(1300, 0, 0);
       
  

  function onWindowResize() {
    HEIGHT = window.innerHeight;
    WIDTH = window.innerWidth;
    windowHalfX = WIDTH / 2;
    windowHalfY = HEIGHT / 2;
    renderer.setSize(WIDTH, HEIGHT);
    camera.aspect = WIDTH / HEIGHT;
    camera.updateProjectionMatrix();
  }

  //  renderer
  
  
  //set up renderer
  const renderer = new THREE.WebGLRenderer({antialias : true, alpha : true});
  renderer.setSize(window.innerWidth - 8, window.innerHeight - 8) ;   
  renderer.render(scene, camera);
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setClearColor("#803855");
  renderer.shadowMapEnabled = true;
  const container = document.getElementById('world');
  container.appendChild(renderer.domElement);
 
  
  document.body.appendChild(renderer.domElement);
  
  controls = new THREE.OrbitControls( camera, renderer.domElement);

  const group = new THREE.Group();
  scene.add(group);
  

  const imgLoc = "https://eyes.nasa.gov/apps/exo/assets/image/exoplanet/";
 
  const geometry = new THREE.SphereGeometry (500, 32, 32);
  const material = new THREE.MeshPhongMaterial();
  const planet = new THREE.Mesh(geometry, material);
  group.add(planet);

  const starGeometry = new THREE.BoxGeometry(20, 20, 20);
  const starMaterial = new THREE.MeshBasicMaterial( );
  const starsphere = new THREE.Mesh(starGeometry, starMaterial );
  scene.add(starsphere);


  let loader = new THREE.TextureLoader();
  material.map = loader.load(imgLoc+'GJ_504_b.jpg');
  material.bumpMap = loader.load(imgLoc+'GJ_504_b.jpg');
  material.bumpScale = 8;
  material.specular = new THREE.Color('#000000');

  var textureCubeLoader = new THREE.CubeTextureLoader();
  var path = 'images/';
  var textureCube = textureCubeLoader.load( [ path + 'posx.jpg' , path + 'negx.jpg', path + 'posy.jpg' , path + 'negy.jpg', path + 'posz.jpg' , path + 'negz.jpg' ] );
  scene.background = textureCube;
    
                            






  const animate = () => {
    requestAnimationFrame(animate);
    planet.rotation.y += 0.001;
    renderer.render(scene, camera);
   
  };
  
 

  animate();

 
*{
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;   
}
#world{
    margin: 0;
    padding: 0;
    
}
<html>
<head>
    <meta charset="utf-8">
    <title>BTS_Music Player</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/264161/OrbitControls.js"></script>
    
</head>
<body>
    <div id="world"></div>

  
    

    <script src="js/main.js"></script>
</body>
</html>
developer-toolsthreejs-editor


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions