three 实现绕物体旋转，卫星绕星球旋转

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>

转载于:https://www.cnblogs.com/lzy1993/p/9162508.html

three 实现绕物体旋转，卫星绕星球旋转相关推荐

matlab地球月球卫星关系,Matlab 卫星绕地球旋转演示动画
发布时间: Oct 21, 2012 更新时间: Oct 21, 2012 总字数:1040 阅读时间:3m 作者: 谢先斌 Matlab 卫星绕地球旋转演示动画代码 h=figure('numbe ...
Unity3d实现鼠标控制相机绕物体旋转（带阻尼）
Unity3d实现鼠标控制相机绕物体旋转(带阻尼) 本来想的是用四元数实现球性插值实现阻尼效果,但是不知道四元数怎么绕定点旋转.因此用速度衰减的方法进行实现. 1.实现鼠标控制相机带阻尼旋转 2.实现 ...
相机漫游，绕物体旋转及缩放（Android及手机端通用）
缩放有两种方式:一种改变相机的视距还有一种直接改变相机的位置们这里我们使用第二种方法: 旋转:绕自身旋转和绕物体旋转, 这里我们也是使用第二种: 其中的阀值需要自己控制. 有一些相机的角度位置离物体中 ...
unity2d 实现物体跟随鼠标绕一个点旋转效果
在2D游戏中,类似泡泡龙炮台发射.敌人飞机永远指向PLAYER.愤怒小鸟弹弓发射等效果,都需要用到物体跟随鼠标绕一个点旋转的效果,在unity中实现代码很简单,但是在理解上有一定障碍,因为unity是 ...
关于使用旋转四元数绕轴旋转θ角度时，使用参数是θ/2的理解
3D点A=(Xa,Ya,Za)绕轴N=(Nx,Ny,Nz)旋转θ角度.将点A扩展到四元数空间,则A=(0,Xa,Ya,Za),此时A点纯四元数(即第一位W分量等于0),处于四维空间中的一个超三维平面上 ...
绕固定坐标轴旋转与绕自身坐标轴旋转一致性证明
最近在看人头姿态和视线方向检测的东西,需要考虑坐标系与坐标系之间的旋转.用欧拉角表示坐标系的旋转时存在两种旋转方法,另外旋转的顺序也会对旋转结果有影响,查了一些资料总结一下结果. 描述坐标系B ...
Threejs实现宇宙中地球动态展示和卫星绕地运动
1,介绍该示例使用的是 r95版本Three.js库. 主要实现功能:宇宙星空背景,流星星星闪烁,地球自转,卫星绕地运动. 实际效果还是很丝滑的,GIF效果图如下: 2,主要说明 1,宇宙背景利是用 ...
three.js orbitcontrol更改绕x轴与z轴旋转
我们在threejs模型中可以引入orbitcontrol来控制模型交互动作,但orbitcontrol默认是以y轴为正向上轴,即旋转的时候绕x轴和y轴旋转但我现在想让绕x轴和z轴旋转,方法是 ca ...
旋转——绕原点二维旋转，绕任意点的二维旋转，三维基本旋转，绕任意轴的三维旋转
1 简介计算机图形学中的应用非常广泛的变换是一种称为仿射变换的特殊变换,在仿射变换中的基本变换包括平移.旋转.缩放.剪切这几种.本文以及接下来的几篇文章重点介绍一下关于旋转的变换,包括二维旋转变换. ...
模拟行星运动！Cocos Creator 设置物体的自转/公转/平滑旋转等
效果演示本次渡鸦要带大家在 Cocos Creator 3.4.1 中实现行星自转(绕任意轴旋转).行星公转(绕任意点旋转).镜头拉近/复位(平滑旋转).行星环(自定义环形体).行星轴(自定义胶囊体 ...

three 实现绕物体旋转，卫星绕星球旋转

three 实现绕物体旋转，卫星绕星球旋转相关推荐

最新文章

热门文章