教你用three.js实现3d地球旋转
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
教你用three.js实现3d地球旋转
闲话短说,直接开门见山,知道那些废话对你们也没什么兴趣,还是代码更能勾起咱们的欲望。好了,以下代码如果有不懂的话,那就再返回去重新深造一下哇。
body{
margin: 0;
}
#canvasBox{width:100%;height:99.5%;position: absolute;}
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();
}
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('/attachment/extend/note s/pics/201611/22/100558kqxh0xd3lalsmmiz.jpg'),
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('/attachment/extend/note s/pics/201611/22/100625fgf5ilkuugkikfuj.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;
//自转
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 {