製作3D地球儀

Question

我試圖製作像this page一樣的3D地球儀，但失敗了。我在HTML5和CSS/CSS3零知識，我只是將代碼提供到JSFiddle，但我什麼都沒有。

window.requestAnimFrame = (function(callback){ 
return window.requestAnimationFrame || 
window.webkitRequestAnimationFrame || 
window.mozRequestAnimationFrame || 
window.oRequestAnimationFrame || 
window.msRequestAnimationFrame || 
function(callback){ 
window.setTimeout(callback, 1000/60); 
}; 
})(); 

function animate(lastTime, angularSpeed, three){ 
// update this frame 
var time = new Date().getTime(); 
var timeDiff = time - lastTime; 
var angleChange = angularSpeed * timeDiff * 2 * Math.PI/1000; 
three.earth.rotation.y += angleChange; 
lastTime = time; 

// render this frame 
three.renderer.render(three.scene, three.camera); 

// next frame 
requestAnimFrame(function(){ 
animate(lastTime, angularSpeed, three); 
}); 
} 

window.onload = function(){ 
var angularSpeed = 0.005; 
var lastTime = 0; 

// load renderer 
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 

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

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

// add a texture to a material 
var material = new THREE.MeshLambertMaterial({ 
map: THREE.ImageUtils.loadTexture("https://joshcarllewis.com/static/articles/html5-3d-canvas-tutorial/earth.jpg") 
}); 

// create an earth object 
var earth = new THREE.Mesh(new THREE.SphereGeometry(200, 50, 50), material); 
earth.overdraw = true; 
scene.add(earth); 

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

// keep everything together to make passing it around easier 
var three = { 
renderer: renderer, 
camera: camera, 
scene: scene, 
earth: earth 
}; 

// Preload textures before begining animation 
var textureImg = new Image(); 
textureImg.onload = function(){ 
animate(lastTime, angularSpeed, three, this); 
}; 
textureImg.src = "https://joshcarllewis.com/static/articles/html5-3d-canvas-tutorial/earth.jpg"; 
}; 

任何人都可以看到我的代碼有什麼問題嗎？ 謝謝。

Answer 1

問題是您的小提琴設置爲運行onload，並且您正在設置window.onload，因此代碼永遠不會運行，因爲onload已經發生。

You should debug it on your own之前問一個問題。 I've updated the fiddle，以便WebGL代碼實際上正在運行。

但是，代碼存在跨域問題訪問earth.jpg。這是一個單獨的問題，您可以創建一個新的帖子（在您進行自己的調試之後）。我將開始嘗試在本地服務器上運行代碼，並在本地下載圖像。

THREE.WebGLRenderer：紋理不是兩個冪。 Texture.minFilter 應該設置爲THREE.NearestFilter或THREE.LinearFilter。 https://joshcarllewis.com/static/articles/html5-3d-canvas-tutorial/earth.jpg）

拋出：DOMException：未能執行 'texImage2D' 上 'WebGLRenderingContext'：在 https://joshcarllewis.com/static/articles/html5-3d-canvas-tutorial/earth.jpg 可以不被加載的跨源圖像（...）texImage2D @ three.js所：25518uploadTexture @