制作一個 3D 地球儀

Question

我試圖在這個頁面中制作一個 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 已經發生。

你應該在提問之前自己調試它。 我已經更新了小提琴，以便 WebGL 代碼實際運行。

但是，該代碼在訪問 earth.jpg 時存在跨域問題。 這是一個單獨的問題，您可以為其創建一個新帖子（在您進行自己的調試之后）。 我會首先嘗試在您的本地服務器上運行代碼，然后在本地下載圖像。

THREE.WebGLRenderer：紋理不是二的冪。 Texture.minFilter 應設置為 THREE.NearestFilter 或 THREE.LinearFilter。 https://joshcarllewis.com/static/articles/html5-3d-canvas-tutorial/earth.jpg )

DOMException：無法在“WebGLRenderingContext”上執行“texImage2D”：可能無法加載https://joshcarllewis.com/static/articles/html5-3d-canvas-tutorial/earth.jpg上的跨域圖像。（...） texImage2D @three.js:25518uploadTexture @