title: Three.js error when i try in local (CORS policy)
body: <p>I'm new in this site and I want to start learning javascript.</p>
  
  <p>I just want to start copying this example <a href="https://threejs.org/examples/#webgl_animation_cloth" rel="nofollow noreferrer">https://threejs.org/examples/#webgl_animation_cloth</a>
  but all i get is this:
  <a href="https://i.stack.imgur.com/B6RHr.jpg" rel="nofollow noreferrer">Photo with the error I have and no animation, background neither</a></p>
  
  <p>So I downloaded the three.js in my pc and also put in the /js the files three.js and three.min.js as you can see in the picture.</p>
  
  <p>I saw some post like this one <a href="https://stackoverflow.com/questions/17858178/allow-anything-through-cors-policy">Allow anything through CORS Policy</a> that try to allow all the things through CORS but i dont know if its works or where i should put that text.
  Here is another similar post <a href="https://stackoverflow.com/questions/13342064/cors-policy-not-allowing-upload">Cors policy not allowing upload</a> but I don't understand all.</p>
  
  <p>As I said I just started and I don't understand English very well and I would prefer an answer for dummies. TY.</p>
  
  <p>The code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;three.js webgl - cloth simulation&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;
          &lt;style&gt;
              body {
                  font-family: Monospace;
                  background-color: #000;
                  color: #000;
                  margin: 0px;
                  overflow: hidden;
              }
              #info {
                  position: absolute;
                  padding: 10px;
                  width: 100%;
                  text-align: center;
              }
              a {
                  text-decoration: underline;
                  cursor: pointer;
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="info"&gt;Simple Cloth Simulation&lt;br/&gt;
              Verlet integration with relaxed constraints&lt;br/&gt;
              &lt;a onclick="wind = !wind;"&gt;Wind&lt;/a&gt; |
              &lt;a onclick="sphere.visible = !sphere.visible;"&gt;Ball&lt;/a&gt; |
              &lt;a onclick="togglePins();"&gt;Pins&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;script src="../build/three.js"&gt;&lt;/script&gt;
  
          &lt;script src="js/Detector.js"&gt;&lt;/script&gt;
          &lt;script src="js/controls/OrbitControls.js"&gt;&lt;/script&gt;
          &lt;script src="js/libs/stats.min.js"&gt;&lt;/script&gt;
  
          &lt;script src="js/Cloth.js"&gt;&lt;/script&gt;
  
          &lt;script&gt;
              /* testing cloth simulation */
              var pinsFormation = [];
              var pins = [ 6 ];
              pinsFormation.push( pins );
              pins = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
              pinsFormation.push( pins );
              pins = [ 0 ];
              pinsFormation.push( pins );
              pins = []; // cut the rope ;)
              pinsFormation.push( pins );
              pins = [ 0, cloth.w ]; // classic 2 pins
              pinsFormation.push( pins );
              pins = pinsFormation[ 1 ];
              function togglePins() {
                  pins = pinsFormation[ ~~ ( Math.random() * pinsFormation.length ) ];
              }
              if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
              var container, stats;
              var camera, scene, renderer;
              var clothGeometry;
              var sphere;
              var object;
              init();
              animate();
              function init() {
                  container = document.createElement( 'div' );
                  document.body.appendChild( container );
                  // scene
                  scene = new THREE.Scene();
                  scene.background = new THREE.Color( 0xcce0ff );
                  scene.fog = new THREE.Fog( 0xcce0ff, 500, 10000 );
                  // camera
                  camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
                  camera.position.set( 1000, 50, 1500 );
                  // lights
                  var light, materials;
                  scene.add( new THREE.AmbientLight( 0x666666 ) );
                  light = new THREE.DirectionalLight( 0xdfebff, 1 );
                  light.position.set( 50, 200, 100 );
                  light.position.multiplyScalar( 1.3 );
                  light.castShadow = true;
                  light.shadow.mapSize.width = 1024;
                  light.shadow.mapSize.height = 1024;
                  var d = 300;
                  light.shadow.camera.left = - d;
                  light.shadow.camera.right = d;
                  light.shadow.camera.top = d;
                  light.shadow.camera.bottom = - d;
                  light.shadow.camera.far = 1000;
                  scene.add( light );
                  // cloth material
                  var loader = new THREE.TextureLoader();
                  var clothTexture = loader.load( 'textures/patterns/circuit_pattern.png' );
                  clothTexture.anisotropy = 16;
                  var clothMaterial = new THREE.MeshLambertMaterial( {
                      map: clothTexture,
                      side: THREE.DoubleSide,
                      alphaTest: 0.5
                  } );
                  // cloth geometry
                  clothGeometry = new THREE.ParametricGeometry( clothFunction, cloth.w, cloth.h );
                  // cloth mesh
                  object = new THREE.Mesh( clothGeometry, clothMaterial );
                  object.position.set( 0, 0, 0 );
                  object.castShadow = true;
                  scene.add( object );
                  object.customDepthMaterial = new THREE.MeshDepthMaterial( {
                      depthPacking: THREE.RGBADepthPacking,
                      map: clothTexture,
                      alphaTest: 0.5
                  } );
                  // sphere
                  var ballGeo = new THREE.SphereBufferGeometry( ballSize, 32, 16 );
                  var ballMaterial = new THREE.MeshLambertMaterial();
                  sphere = new THREE.Mesh( ballGeo, ballMaterial );
                  sphere.castShadow = true;
                  sphere.receiveShadow = true;
                  scene.add( sphere );
                  // ground
                  var groundTexture = loader.load( 'textures/terrain/grasslight-big.jpg' );
                  crossOrigin: null
                  groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
                  groundTexture.repeat.set( 25, 25 );
                  groundTexture.anisotropy = 16;
                  var groundMaterial = new THREE.MeshLambertMaterial( { map: groundTexture } );
                  var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
                  mesh.position.y = - 250;
                  mesh.rotation.x = - Math.PI / 2;
                  mesh.receiveShadow = true;
                  scene.add( mesh );
                  // poles
                  var poleGeo = new THREE.BoxBufferGeometry( 5, 375, 5 );
                  var poleMat = new THREE.MeshLambertMaterial();
                  var mesh = new THREE.Mesh( poleGeo, poleMat );
                  mesh.position.x = - 125;
                  mesh.position.y = - 62;
                  mesh.receiveShadow = true;
                  mesh.castShadow = true;
                  scene.add( mesh );
                  var mesh = new THREE.Mesh( poleGeo, poleMat );
                  mesh.position.x = 125;
                  mesh.position.y = - 62;
                  mesh.receiveShadow = true;
                  mesh.castShadow = true;
                  scene.add( mesh );
                  var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 255, 5, 5 ), poleMat );
                  mesh.position.y = - 250 + ( 750 / 2 );
                  mesh.position.x = 0;
                  mesh.receiveShadow = true;
                  mesh.castShadow = true;
                  scene.add( mesh );
                  var gg = new THREE.BoxBufferGeometry( 10, 10, 10 );
                  var mesh = new THREE.Mesh( gg, poleMat );
                  mesh.position.y = - 250;
                  mesh.position.x = 125;
                  mesh.receiveShadow = true;
                  mesh.castShadow = true;
                  scene.add( mesh );
                  var mesh = new THREE.Mesh( gg, poleMat );
                  mesh.position.y = - 250;
                  mesh.position.x = - 125;
                  mesh.receiveShadow = true;
                  mesh.castShadow = true;
                  scene.add( mesh );
                  // renderer
                  renderer = new THREE.WebGLRenderer( { antialias: true } );
                  renderer.setPixelRatio( window.devicePixelRatio );
                  renderer.setSize( window.innerWidth, window.innerHeight );
                  container.appendChild( renderer.domElement );
                  renderer.gammaInput = true;
                  renderer.gammaOutput = true;
                  renderer.shadowMap.enabled = true;
                  // controls
                  var controls = new THREE.OrbitControls( camera, renderer.domElement );
                  controls.maxPolarAngle = Math.PI * 0.5;
                  controls.minDistance = 1000;
                  controls.maxDistance = 5000;
                  // performance monitor
                  stats = new Stats();
                  container.appendChild( stats.dom );
                  //
                  window.addEventListener( 'resize', onWindowResize, false );
                  sphere.visible = ! true;
              }
              //
              function onWindowResize() {
                  camera.aspect = window.innerWidth / window.innerHeight;
                  camera.updateProjectionMatrix();
                  renderer.setSize( window.innerWidth, window.innerHeight );
              }
              //
              function animate() {
                  requestAnimationFrame( animate );
                  var time = Date.now();
                  var windStrength = Math.cos( time / 7000 ) * 20 + 40;
                  windForce.set( Math.sin( time / 2000 ), Math.cos( time / 3000 ), Math.sin( time / 1000 ) )
                  windForce.normalize()
                  windForce.multiplyScalar( windStrength );
                  simulate( time );
                  render();
                  stats.update();
              }
              function render() {
                  var p = cloth.particles;
                  for ( var i = 0, il = p.length; i &lt; il; i ++ ) {
                      clothGeometry.vertices[ i ].copy( p[ i ].position );
                  }
                  clothGeometry.verticesNeedUpdate = true;
                  clothGeometry.computeFaceNormals();
                  clothGeometry.computeVertexNormals();
                  sphere.position.copy( ballPosition );
                  renderer.render( scene, camera );
              }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>EDIT 1:
  @prisoner849 I tried the second method but it still does not work. I'm also not sure if I did it correctly, does putting a public google drive link should work? Or does it have to be on a particular server? I tried also in a discord web and when i click the link i see the photo but i still have the same problem. 
  I only changed the lines with the path like this:</p>
  
  <pre><code>var clothTexture = loader.load('https://cdn.discordapp.com/attachments/402574308532027422/475765536735756302/circuit_pattern.png');
  </code></pre>
  
  <p>and</p>
  
  <pre><code>var groundTexture = loader.load('https://drive.google.com/open?id=1VdGnJBALOWDsp9GWbskwa6rnqF_gghP9' );
  </code></pre>