three 环绕旋转，卫星可以各个角度绕星球旋转_早晨阳光一般暖的博客-程序员秘密
技术标签： three javascript three.js
1.先看看效果
演示地址：http://wsitm.gitee.io/web_test/view/TestRound.html
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>源码 https://gitee.com/wsitm/web_test.git
智能推荐
org.apache.hadoop.fs.FSInputChecker - Problem opening checksum file_鸭梨山大哎的博客-程序员秘密
WARN org.apache.hadoop.fs.FSInputChecker - Problem opening checksum file: /common/nlp/data/dictionary/custom/CustomDictionary.txt.bin. Ignoring exception:java.io.EOFExceptionat java.io.DataInputStream.readFully(DataInputStream.java:197)at java.io.Dat
【imx6ul】从头搭建imx6ul开发环境（uboot、内核编译及烧入、mfgtools详细使用方法）_【星星之火】的博客-程序员秘密
欢迎扫码关注微信公众号：柒零玖嵌入式，更多嵌入式软硬件相关分享！硬件平台：自制imx6ul（详见http://blog.csdn.net/fengyuwuzu0519/article/details/79133851）系统：linux-4.1.15文件系统：busybox-1.22.1.tar.bz2编译器：gcc version 4.9.1 20140710 (prerelease) (cro...............
RGB/HSV/YUV颜色空间模型总结_yaopingcs的博客-程序员秘密
RGB颜色空间 <br /> 计算机色彩显示器显示色彩的原理与彩色电视机一样，都是采用R、G、B相加混色的原理，通过发射出三种不同强度的电子束，使屏幕内侧覆盖的红、绿、蓝磷光材料发光而产生色彩的。这种色彩的表示方法称为RGB色彩空间表示。在多媒体计算机技术中，用的最多的是RGB色彩空间表示。<br /> 根据三基色原理，用基色光单位来表示光的量，则在RGB色彩空间，任意色光F都可以用R、G、B三色不同分量的相加混合而成：<br />F＝r [ R ] + g [ G ] + b
faster RCNN(keras版本)代码讲解(5)-RPN层详情_姚贤贤的博客-程序员秘密
faster RCNN(keras版本)代码讲解博客索引: 1.faster RCNN(keras版本)代码讲解(1)-概述 2.faster RCNN(keras版本)代码讲解(2)-数据准备 3.faster RCNN(keras版本)代码讲解(3)-训练流程详情 4.faster RCNN(keras版本)代码讲解(4)-共享卷积层详情 5.faster RCNN(keras版本)...
糊糊悟道--我对平均数的理解_糊糊的博客-程序员秘密
你可能会在政府工作报告中看到上年城镇居民年平均收入这种词汇, 平均一词, 经常出现在各种报告中, 这个词, 必须是一个很重要但是又被人遗忘的词. 平均是什么意思? 它就是无差别的意思, 你想想, 你两条腿, 我也两条腿, 从数量上讲, 我们俩平均一人两条腿.如果你长了3条腿, 我长了1条腿, 我俩平均起来也是2条腿, 这说明了什么? 说明了我俩跟正常人不一样 , 跟平均值不
vmware中如何让虚拟机和物理主机在同一网段_向日葵hermit的博客-程序员秘密
vmware中如何让虚拟机和物理主机在同一网段呢。比如物理主机的IP是192.168.1.10，虚拟机主机的IP设置成192.168.1.20，两者之间能够相互PING通。如何设置呢，下面由小编介绍下具体操作吧！工具/原料vmware方法/步骤首先在虚拟机上安装并打开系统，小
随便推点
zhuan:串口成帧协议_python实现可以成帧纠错的通信协议_BigBangBangBangBang的博客-程序员秘密
串口成帧协议 串口接收中的问题在电子系统中，最简单、最广泛的通信方式无疑是串口了，几乎所有与模块相关的产品，差不多都有串口的操作方式，如串口蓝牙模块、串口WIFI模块、串口ZigBee模块、串口语音模块等。不仅是这样，在嵌入式开发中，很多时侯调试离不开串口，固件升级离不开串口，可见搞电子的人如果不能很好的操作串口，那就真是说不过去了。 串口的应用场合非常多，但是有一个残酷的现实摆在我们面前，那
Caused by: java.lang.ClassNotFoundException: org.objectweb.asm.commons.EmptyVisitor_weixin_34220834的博客-程序员秘密
1、错误叙述性说明2014-7-13 1:45:53 org.apache.struts2.spring.StrutsSpringObjectFactory info信息: ... initialized Struts-Spring integration successfully2014-7-13 1:45:54 org.apache.catalina.core.Standa...
android --------intent_xinyao5201314的博客-程序员秘密
An Intent is an object that provides runtime binding between separate components (such as two activities). The Intent represents an app’s "intent to do something." You can use intents for a wide v
babel无法加载文件 C:\Users\win\AppData\Roaming\npm\babel.ps1，因为在此系统上禁止运行脚本。_babel : 无法加载文件 c:\users\administrator\appdata\roam_Mls_Lucky的博客-程序员秘密
babel报错: babel : 无法加载文件 C:\Users\win\AppData\Roaming\npm\babel.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 执行策略 中的 about_Execution_Policies。解决方法方法一: 重启vscode方法二: 鼠标右键vscode图标,兼容性选择"以管理员身份运行"方法三:在vscode终端获取执行政策: get-ExecutionPolicy如果得到的政策是限制:Restricted ,则重新设置
{00024500-0000-0000-C000-000000000046} 系列问题的解决办法_周山至水数翠峰的博客-程序员秘密
{00024500-0000-0000-C000-000000000046}系列问题的解决办法1、类不存在的问题这类问题一般是安装了简版的office,卸载后，重新安装专业版。2、异常来自 HRESULT:0x800702E4检索 COM 类工厂中 CLSID 为 {00024500-0000-0000-C000-000000000046} 的组件失败，原因是出现以下错误: 800702e4 请求的操作需要提升。 (异常来自 HRESULT:0x800702E4)。这多数出现在win10上，因为应
B - And Or---（2015 NEUQ_ACM summer training #1）_Han_Kin的博客-程序员秘密
题目链接：http://7xjob4.com1.z0.glb.clouddn.com/f595a508afa947b5f898ccbdb1e10002在雨神兼男神的指导下AC了。题目大意：输入两个数，然后计算中间所有数进行与运算和或运算的到的结果分别是多少？思路：直接暴力计算肯定会超时. 把a b转换为二进制数，如果是不同位数的因为进位所以会导致&的结果为0，|的结果为2^k-