在 ThreeJS 中将纹理映射到球体答案

【问题标题】：mapping texture to a sphere in ThreeJS在 ThreeJS 中将纹理映射到球体
【发布时间】：2013-07-15 09:16:57
【问题描述】：

在 ThreeJS 中将纹理映射到球体时，我失去了球体。相反，我收到的 consol 错误显示为—— 未捕获的类型错误：无法调用未定义 index.html:28 的方法“添加” 和跨域资源共享策略拒绝跨域图像加载。该图像的大小和分辨率正确，因为它在我尝试纹理映射的另一个实例中工作，但它在这里不起作用。我如何应用地图一定有问题。我对 javascript 和 ThreeJS 都是新手，所以请耐心等待。谢谢你。

<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>

【问题讨论】：

标签： mapping three.js textures

【解决方案1】：

您提供的代码有很多错误。只需在以下位置查看一个基本示例： https://github.com/mrdoob/three.js/

您的脚本缺少渲染循环，您的相机未添加到场景中，在已将对象添加到“场景”后调用 Three.Scene() 构造函数。然后你有 MeshNormalMaterial() 并在其中包裹了另一种材料。这行不通，只需执行 Three.Mesh(SphereGeometry(...), material)。 “overdraw”是一个材质属性，所以你必须做 sphere.material.overdraw。但我认为过度绘制只会影响 CSS 画布渲染器的内容，如果您使用 WebGLRenderer，我不确定它是否有任何意义

关于跨域错误，请在此处阅读： https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally

【讨论】：