CODEWITHSUNDEEP
mappingthree.jstextures
Joshua W
Joshua W

Reputation: 1597

mapping texture to a sphere in ThreeJS

When mapping texture to a sphere in ThreeJS with I am loosing the sphere. Instead I am getting consol errors that read -- Uncaught TypeError: Cannot call method 'add' of undefined index.html:28 and Cross-origin image load denied by Cross-Origin Resource Sharing policy. The image is the correct size and resolution since it works in another instance where I was attempting texture mapping, however it is not working here. It must be a problem with how I am applying the map. I am new to both javascript and ThreeJS, so bear with me. Thank you. 

<body>
    <div id="container"></div>
    <script src="javascript/mrdoob-three.js-ad419d4/build/three.js"></script>
    <script defer="defer">
      // renderer
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // camera
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.z = 500;

      // material
      var material = new THREE.MeshLambertMaterial({
        map: THREE.ImageUtils.loadTexture('images/physicalworldmapcolor.jpg')
      });

      // add subtle ambient lighting
      var ambientLight = new THREE.AmbientLight(0x000044);
      scene.add(ambientLight);

      // directional lighting
      var directionalLight = new THREE.DirectionalLight(0xffffff);
      directionalLight.position.set(1, 1, 1).normalize();
      scene.add(directionalLight);

      // scene
      var scene = new THREE.Scene();

      // sphere
      // the first argument of THREE.SphereGeometry is the radius, 
      // the second argument is the segmentsWidth
      // the third argument is the segmentsHeight.  

      var sphere = new THREE.Mesh(new THREE.SphereGeometry(150, 70, 50), 
          new THREE.MeshNormalMaterial(material));
      sphere.overdraw = true;
      scene.add(sphere);

      renderer.render(scene, camera);
    </script>

Upvotes: 0

Views: 1513

Answers (1)

GuyGood
GuyGood

Reputation: 1377

There are MANY errors with the code you provided. Just check a basic example at: https://github.com/mrdoob/three.js/

your script is missing a render loop, your camera is not added to the scene, the Three.Scene() constructor is called after already adding objects to "scene". Then you have MeshNormalMaterial() and wrapped in there another material. This won't work , just do Three.Mesh(SphereGeometry(...), material). "overdraw" is a material propery so you will have to do sphere.material.overdraw. But i think overdraw only affects stuff for the CSS canvas renderer and i am not sure if it has any meaning if you use WebGLRenderer

Concerning the error with cross-origin, read up here: https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally

Upvotes: 1

Related Questions