將紋理映射到ThreeJS中的球體

將紋理映射到ThreeJS中的球體並釋放球體時。取而代之，我得到CONSOL錯誤 - Uncaught TypeError：無法調用未定義index.html的方法'add'：28 和跨源資源共享策略拒絕跨源圖像加載。該圖像是正確的大小和分辨率，因爲它在我嘗試紋理映射的另一個實例中工作，但它在這裏不起作用。這對我如何應用地圖一定是個問題。我對javascript和ThreeJS都很陌生，所以請耐心等待。謝謝。將紋理映射到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>

來源

2013-07-17 Joshua W

沒有與您提供的代碼很多錯誤。就在檢查一個基本的例子： https://github.com/mrdoob/three.js/

腳本缺少渲染循環，你的相機沒有被添加到現場，Three.Scene（）構造函數已經將對象添加到「現場」後調用。然後你有MeshNormalMaterial（）幷包裹在那裏另一個材質。這是行不通的，只要做Three.Mesh（SphereGeometry（...），material）。「透支」是一種材料，所以你必須做sphere.material.overdraw。但我認爲透支只會影響的東西的CSS畫布渲染，我不知道是否有任何意義，如果你使用WebGLRenderer

關於跨起源錯誤，讀了這裏： https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally

來源

2013-07-18 15:01:42 GuyGood

將紋理映射到ThreeJS中的球體

回答

相關問題