Javascript 在three.js中旋转球体，使球体的映射图像与同样显示在three.js中的GeoJSON匹配
我已经在three.js中创建了一个球体，并且正在使用映射到球体的图像 除此之外，我还将使用来呈现geojson数据 但是，地理位置不匹配。 我需要用映射的图像旋转地球仪，使它们对齐，但我不知道怎么做。我试着设置一个四元数变量并以此为基础进行旋转，但无法使其工作。任何帮助或指点都将不胜感激 在这里，您可以看到到目前为止我所做工作的工作版本： 此处的所有代码、图像和数据： 我还粘贴了下面的index.htmlJavascript 在three.js中旋转球体，使球体的映射图像与同样显示在three.js中的GeoJSON匹配,javascript,three.js,geojson,Javascript,Three.js,Geojson,我已经在three.js中创建了一个球体，并且正在使用映射到球体的图像 除此之外，我还将使用来呈现geojson数据 但是，地理位置不匹配。 我需要用映射的图像旋转地球仪，使它们对齐，但我不知道怎么做。我试着设置一个四元数变量并以此为基础进行旋转，但无法使其工作。任何帮助或指点都将不胜感激 在这里，您可以看到到目前为止我所做工作的工作版本： 此处的所有代码、图像和数据： 我还粘贴了下面的index.html <html> <head>
<html>
<head>
<title>ThreeGeoJSON</title>
<script src="threeGeoJSON.js"></script>
<!-- Three.js library, movement controls, and jquery for the geojson-->
<script src="three.min.js"></script>
<script src="TrackballControls.js"></script>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<script type="text/JavaScript">
var width = window.innerWidth,
height = window.innerHeight;
// Earth params
var radius = 9.99,
segments = 32,
rotation = 0 ;
//New scene and camera
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(55, width / height, 0.01, 1000);
camera.position.z = 1;
camera.position.x = -.2;
camera.position.y = .5;
//New Renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
//Add lighting
scene.add(new THREE.AmbientLight(0x333333));
var light = new THREE.DirectionalLight(0xe4eef9, .7);
light.position.set(12,12,8);
scene.add(light);
var quaternion = new THREE.Quaternion();
quaternion.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), Math.PI / 2 );
var sphere = createSphere(radius, segments);
//sphere.rotation.y = rotation;
sphere.rotation = new THREE.Euler().setFromQuaternion( quaternion );
scene.add(sphere)
//Create a sphere to make visualization easier.
var geometry = new THREE.SphereGeometry(10, 32, 32);
var material = new THREE.MeshPhongMaterial({
//wireframe: true,
//transparent: true
});
function createSphere(radius, segments) {
return new THREE.Mesh(
new THREE.SphereGeometry(radius, segments, segments),
new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture('relief.jpg'),
bumpMap: THREE.ImageUtils.loadTexture('elev_bump_4k.jpg'),
bumpScale: 0.005,
specularMap: THREE.ImageUtils.loadTexture('wateretopo.png'),
specular: new THREE.Color('grey')
})
);
}
var clouds = createClouds(radius, segments);
clouds.rotation.y = rotation;
scene.add(clouds)
function createClouds(radius, segments) {
return new THREE.Mesh(
new THREE.SphereGeometry(radius + .003, segments, segments),
new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture('n_amer_clouds.png'),
transparent: true
})
);
}
//Draw the GeoJSON
var test_json = $.getJSON("countries_states.geojson", function(data) {
drawThreeGeo(data, 10, 'sphere', {
color: 'red'
})
});
//Draw the GeoJSON loggerhead data
var test_json = $.getJSON("loggerhead-distro-cec-any.json", function(data) {
drawThreeGeo(data, 10, 'sphere', {
color: 'blue'
})
});
//Set the camera position
camera.position.z = 30;
//Enable controls
var controls = new THREE.TrackballControls(camera);
//Render the image
function render() {
controls.update();
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
三个GeoJSON
变量宽度=window.innerWidth，
高度=窗内高度；
//地球参数
var半径=9.99，
分段=32，
旋转=0；
//新场景和摄影机
var scene=new THREE.scene（）；
var摄像机=新的三视角摄像机（55，宽/高，0.011000）；
摄像机位置z=1；
摄像机.position.x=-.2；
摄像机位置y=0.5；
//新渲染器
var renderer=new THREE.WebGLRenderer（）；
设置大小（宽度、高度）；
document.body.appendChild（renderer.doElement）；
//添加照明
添加（新的三个环境光（0x333333））；
var灯光=新的三方向灯光（0xe4eef9，.7）；
光。位置。设置（12,12,8）；
场景。添加（灯光）；
var四元数=新的三个四元数（）；
四元数.setFromAxisAngle（新的3.Vector3（0，1，0），Math.PI/2）；
var sphere=createSphere（半径、线段）；
//sphere.rotation.y=旋转；
sphere.rotation=new THREE.Euler（）.setFromQuaternion（四元数）；
场景.添加（球体）
//创建球体以使可视化更容易。
var几何=新的三种。球墨法（10,32,32）；
var材质=新的3.0网格材质({
//线框：对，
//透明：正确
});
函数createSphere（半径、线段）{
返回新的三个网格(
新的三种球墨测量法（半径、分段、分段），
新三元网格材料({
map:THREE.ImageUtils.loadTexture（'relief.jpg'），
bumpMap:THREE.ImageUtils.loadTexture（'elev_bump_4k.jpg'），
比例：0.005，
specularMap:THREE.ImageUtils.loadTexture（'wateretopo.png'），
镜面反射：新三种颜色（“灰色”）
})
);
}
变量云=创建云（半径、线段）；
clouds.rotation.y=旋转；
场景.添加（云）
函数createClouds（半径、线段）{
返回新的三个网格(
新的三点球面法（半径+0.003，分段，分段），
新三元网格材料({
map:THREE.ImageUtils.loadTexture（'n\u amer\u clouds.png'），
透明：正确
})
);
}
//绘制GeoJSON
var test_json=$.getJSON（“countries_states.geojson”），函数（数据）{
drawThreeGeo（数据，10，'球体'{
颜色：“红色”
})
});
//绘制GeoJSON日志头数据
var test_json=$.getJSON（“loggerhead distro cec any.json”），函数（数据）{
drawThreeGeo（数据，10，'球体'{
颜色：“蓝色”
})
});
//设置摄像机的位置
摄像机位置z=30；
//启用控件
var控制=新的三个轨迹球控制（摄像头）；
//渲染图像
函数render（）{
控件更新（）；
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
}
render（）；
three.min.jscreateSphere（） function createSphere(radius, segments) {
var sphGeom = new THREE.SphereGeometry(radius, segments, segments);
sphGeom.rotateY(THREE.Math.degToRad(-90));
return new THREE.Mesh(
sphGeom,
new THREE.MeshPhongMaterial({
map: new THREE.TextureLoader().load('relief.jpg'),
bumpMap: new THREE.TextureLoader().load('elev_bump_4k.jpg'),
bumpScale: 0.005,
specularMap: new THREE.TextureLoader().load('wateretopo.png'),
specular: new THREE.Color('grey')
})
);
}
我用r81代替了古老的r66（刚刚替换了
three.min.jscreateSphere（） function createSphere(radius, segments) {
var sphGeom = new THREE.SphereGeometry(radius, segments, segments);
sphGeom.rotateY(THREE.Math.degToRad(-90));
return new THREE.Mesh(
sphGeom,
new THREE.MeshPhongMaterial({
map: new THREE.TextureLoader().load('relief.jpg'),
bumpMap: new THREE.TextureLoader().load('elev_bump_4k.jpg'),
bumpScale: 0.005,
specularMap: new THREE.TextureLoader().load('wateretopo.png'),
specular: new THREE.Color('grey')
})
);
}