制作 3D 地球仪答案

【问题标题】：Making a 3D globe制作 3D 地球仪
【发布时间】：2015-09-29 12:08:08
【问题描述】：

我尝试制作像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";
};

谁能看到我的代码有什么问题？谢谢。

【问题讨论】：

错误？控制台输出？我一无所有是什么意思？ stackoverflow.com/help/how-to-ask
你的代码的问题在于它不是你的代码。
堆栈溢出不能替代调试器。 “这是所有代码，它不起作用，告诉我哪里出了问题”不是问题。

标签： javascript css html

【解决方案1】：

问题是您的小提琴设置为在加载时运行，而您正在设置window.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 @

【讨论】：