我使用three.js有一个带有地球纹理的球体。尽管地球自己（水平）在 y 轴上旋转，但我不确定如何根据鼠标位置在其垂直 x 轴上旋转球体。当鼠标位于浏览器窗口顶部时，地球应显示北极，当鼠标位于屏幕底部时，地球应显示南极。当鼠标在浏览器窗口内垂直移动时，它应该根据垂直鼠标位置旋转以显示两极之间的地球。
这种类型的轮换如何实现？
这段代码设置了 Three.js 场景，但旋转的数学不太正确：
<html>
<head>
<title>Earth Rotation</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.SphereGeometry(1, 100, 100);
var material = new THREE.MeshPhongMaterial();
var earthMesh = new THREE.Mesh(geometry, material);
material.map = THREE.ImageUtils.loadTexture('images/earth.jpg');
var light = new THREE.AmbientLight( 0xcccccc );
scene.add(light);
scene.add(earthMesh);
camera.position.z = 1.5;
document.addEventListener('mousemove', function(event){
if(event.clientY < window.innerHeight / 2) {
earthMesh.rotation.x = ((window.innerHeight / 2) - (event.clientY * .0001));
} else if(event.clientY > window.innerHeight / 2) {
earthMesh.rotation.x = ((window.innerHeight / 2) + (event.clientY * .0001));
}
}, false)
var animate = function () {
requestAnimationFrame( animate );
earthMesh.rotation.y -= 0.0005;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
可能，您可以通过THREE.OrbtiControls()一些修改来实现相同的目的。
只是在旋转的地球上移动相机的一个选项。
r96
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 10;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var globe = new THREE.Mesh(new THREE.SphereGeometry(4, 32, 16), new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load("https://c1.staticflickr.com/3/2521/3884071286_edb50f8137_b.jpg")
}));
scene.add(globe);
window.addEventListener("mousemove", onMouseMove, false);
function onMouseMove(event) {
camera.position.setFromSphericalCoords(10, Math.PI * -event.clientY / window.innerHeight, 0);
camera.lookAt(globe.position);
}
render();
function render() {
requestAnimationFrame(render);
globe.rotation.y -= 0.005;
renderer.render(scene, camera);
}body {
overflow: hidden;
margin: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句