mapping texture to a sphere in ThreeJS

Question

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>

GuyGood · Accepted Answer · 2013-07-18 15:01:42Z

1

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

answered Jul 18, 2013 at 15:01

GuyGood

1,3771 gold badge9 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

mapping texture to a sphere in ThreeJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related