js 之threejs地球旋转
2019-02-19 本文已影响377人
world_7735
如果报这个错
DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded
问题解决:
其实还是因为跨域的问题，尝试使用webstorm打开即可浏览
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3Dmap</title>
<style>
body{
margin: 0;
}
#canvasBox{width:100%;height:99.5%;position: absolute;}
</style>
</head>
<body>
<div id="canvasBox"></div>
<script src="https://cdn.bootcss.com/three.js/r76/three.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
var canvasBox = document.getElementById("canvasBox");
var W = $("#canvasBox").width();
var H = $("#canvasBox").height();
//随浏览器窗口变化而变化
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
$(window).on("resize",function(){
onWindowResize();
})
var num = 0;
var scene,camera,renderer,light;
function intScene(){
scene = new THREE.Scene();
}
function intCamera(){
camera = new THREE.PerspectiveCamera(45,W/H,1,1000);
camera.position.set(0,0,400);
camera.up.set(0,1,0);
camera.lookAt({x:0,y:0,z:0})
}
function intRender(){
renderer = new THREE.WebGLRenderer({antialias:true});
//renderer = new THREE.CanvasRenderer();
renderer.setSize(W,H);
canvasBox.appendChild(renderer.domElement);
}
function intLight(){
light=new THREE.DirectionalLight(0xffffff,0.6);
light.position.set(0,0,400);
scene.add(light);
}
var xkbg,earth,texts;
function intModels(){
/* 宇宙背景 */
var yz_geometry = new THREE.SphereGeometry(500,500,50);
var yz_material = new THREE.MeshPhongMaterial({
map:THREE.ImageUtils.loadTexture('./bg.png'),
side: THREE.DoubleSide
});
xkbg= new THREE.Mesh(yz_geometry,yz_material);
xkbg.position.set(0,0,0);
scene.add(xkbg);
//地球
var earth_geometry = new THREE.SphereGeometry(100,50,50);
var earth_material = new THREE.MeshPhongMaterial({
map:THREE.ImageUtils.loadTexture('./earth.jpg'),
side: THREE.DoubleSide
});
earth= new THREE.Mesh(earth_geometry,earth_material);
earth.position.set(0,0,0);
xkbg.add(earth);
}
var mouseX,mouseY,isMove=true;
//自转
function zizhuan(){
if(isMove){
requestAnimationFrame(zizhuan);
xkbg.rotation.y-=0.002;
renderer.render(scene,camera);
}
}
//拖拽
document.onmousedown = function(e){
isMove = false;
mouseX = e.pageX;
mouseY = e.pageY;
}
document.onmousemove = function rt(e){
if(!isMove){
var disX = e.pageX - mouseX;
var disY = e.pageY - mouseY;
requestAnimationFrame(zizhuan);
xkbg.rotation.x = xkbg.rotation.x>0.8?0.8:xkbg.rotation.x;
xkbg.rotation.x = xkbg.rotation.x<-0.8?-0.8:xkbg.rotation.x;
xkbg.rotation.x+= disY*0.00005* Math.PI;
xkbg.rotation.y+= disX*0.0001* Math.PI;
renderer.render(scene,camera);
}
}
document.onmouseup = function(){
console.log(xkbg.rotation.y)
isMove = true;
setTimeout(function(){
zizhuan();
},2000)
}
//滑动鼠标让地球放大缩小
function intsScale(){
$(document).on('mousewheel DOMMouseScroll', function (ev){
var e = ev||event;
e.preventDefault();
var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;
var delta = Math.max(-1, Math.min(1, value));
if(delta == 1){
num++;
num=num>10?10:num;
}else {
num--;
num = num < -15 ? -15 : num;
}
camera.position.set(0,0,400+num*10);
});
}
function intStart(){
intScene();
intCamera();
intRender();
intLight();
intModels();
zizhuan();
intsScale();
renderer.render(scene,camera);
}
intStart();
</script>
</body>
</html>
原图
背景
地球
