three 实现绕物体旋转，卫星绕星球旋转
程序员文章站
2022-04-12 17:13:30
如果是二维的话，可以根据变化角度结合三角函数就能计算从x和y坐标；无奈，博主不会三维数学啊，计算不出x,y和z坐标啊。还好，博主终于在网上找到了解决的方法，就是把中心点，圆环(圆轨)和卫星三者组合成一体，再改变旋转角度 ......
1.先看看效果
2.如果是二维的话，可以根据变化角度结合三角函数就能计算从x和y坐标；
无奈，如果还是使用坐标改变的方式，博主不会三维数学啊，计算不出x,y和z坐标啊。
还好，过了好长时间，博主终于在网上找到了解决的方法，
就是把中心点，圆环(圆轨)和卫星三者组合成一体，再改变旋转角度
3.代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestRound</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
background-color: black;
}
div#box {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="../../js/resource/js/three/three.js"></script>
</head>
<body onload="initThree()">
<div id="box"></div>
</body>
<script>
var renderer, camera, scene;//渲染器，相加，场景
var Earth, satellites = [];//地球，卫星（数组）
function initThree() {
var dom = document.getElementById("box");
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 1000);
camera.position.set(0, 0, 400);//设置相机位置
renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
renderer.setSize(dom.clientWidth, dom.clientHeight);//设置窗口尺寸
dom.appendChild(renderer.domElement);
var sunTexture = THREE.ImageUtils.loadTexture('../../js/resource/img/map_world.png', {}, function () {
renderer.render(scene, camera);
});
//地球
Earth = new THREE.Mesh(new THREE.SphereGeometry(20, 30, 30), new THREE.MeshBasicMaterial({
map: sunTexture
})); //材质设定
var satellite = new THREE.Sprite(new THREE.SpriteMaterial({
map: new THREE.CanvasTexture(generateSprite('196,233,255')),
blending: THREE.AdditiveBlending
}));
satellite.scale.x = satellite.scale.y = satellite.scale.z = 60;
scene.add(satellite);//添加发光,让地球有发光的样式
scene.add(Earth);
//添加卫星
satellites.push(initSatellite(5, 28, {x: -Math.PI * 0.35, y: Math.PI * 0.25, z: 0}, 0.021, scene));
satellites.push(initSatellite(5, 25, {x: -Math.PI * 0.35, y: -Math.PI * 0.2, z: 0}, 0.022, scene));
satellites.push(initSatellite(5, 29, {x: -Math.PI * 0.35, y: Math.PI * 0.05, z: 0}, 0.023, scene));
render();
}
/**
* 返回一个卫星和轨道的组合体
* @param satelliteSize 卫星的大小
* @param satelliteRadius 卫星的旋转半径
* @param rotation 组合体的x,y,z三个方向的旋转角度
* @param speed 卫星运动速度
* @param scene 场景
* @returns {{satellite: THREE.Mesh, speed: *}} 卫星组合对象;速度
*/
var initSatellite = function (satelliteSize, satelliteRadius, rotation, speed, scene) {
var track = new THREE.Mesh(new THREE.RingGeometry(satelliteRadius, satelliteRadius + 0.05, 50, 1), new THREE.MeshBasicMaterial());
var centerMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial()); //材质设定
var satellite = new THREE.Sprite(new THREE.SpriteMaterial({
map: new THREE.CanvasTexture(generateSprite('196,233,255')),
blending: THREE.AdditiveBlending
}));
satellite.scale.x = satellite.scale.y = satellite.scale.z = satelliteSize;
satellite.position.set(satelliteRadius, 0, 0);
var pivotPoint = new THREE.Object3D();
pivotPoint.add(satellite);
pivotPoint.add(track);
centerMesh.add(pivotPoint);
centerMesh.rotation.set(rotation.x, rotation.y, rotation.z);
scene.add(centerMesh);
return {satellite: centerMesh, speed: speed};
};
/**
* 实现发光星星
* @param color 颜色的r,g和b值,比如：“123,123,123”;
* @returns {Element} 返回canvas对象
*/
var generateSprite = function (color) {
var canvas = document.createElement('canvas');
canvas.width = 16;
canvas.height = 16;
var context = canvas.getContext('2d');
var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
gradient.addColorStop(0, 'rgba(' + color + ',1)');
gradient.addColorStop(0.2, 'rgba(' + color + ',1)');
gradient.addColorStop(0.4, 'rgba(' + color + ',.6)');
gradient.addColorStop(1, 'rgba(0,0,0,0)');
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
return canvas;
};
function render() {
renderer.render(scene, camera);
Earth.rotation.y -= 0.01;
for (var i = 0; i < satellites.length; i++) {
satellites[i].satellite.rotation.z -= satellites[i].speed;
}
requestAnimationFrame(render);
}
</script>
</html>
上一篇： 专家称机器人无法统治世界 原因是能耗太高