three.js实现土星绕太阳自转体系
发布时间
阅读量：
阅读量
概况如下：
- 该库通过SphereGeometry模拟星辰的旋转运动，并包含太阳与土星。
- RingGeometry被用来构建天文学中表示行星运行轨道线。
- ImageUtils模块用于导入并展示球体贴图。
- 在画布上创建径向渐变以模拟太阳的发光效果。
- THREE.RingGeometry被定义为构建天文学中表示行星运行轨迹的几何模型。
效果图如下：
预览地址：three.js实现土星绕太阳自转体系
请根据以下步骤完成光照效果的配置：首先设置相机的位置和视角；其次创建渲染器并将其与光线系统连接；然后配置灯光源类型为点灯型PointLight；最后将该灯光源置于场景中心位置并将其加入到光照系统中。
// 初始化场景
var scene = new THREE.Scene();
// 初始化相机，第一个参数为摄像机视锥体垂直视野角度，第二个参数为摄像机视锥体长宽比，
// 第三个参数为摄像机视锥体近端面，第四个参数为摄像机视锥体远端面
var camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 100000);
// 设置相机位置，对应参数分别表示x，y，z位置
camera.position.set(0, 0, 300);
var renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
// 设置光照，第一个参数表示光颜色，第二个参数为光照强度，范围为0-1，默认值为1，
var lights = new THREE.PointLight('#ffffff', 1);
lights.position.set(0, 0, 0);
scene.add(lights);
javascript
配置视口大小并启动控制台。视口大小默认设置为与浏览器视口一致；完成后需将渲染器注入DOM结构中。
// 设置窗口尺寸，第一个参数为宽度，第二个参数为高度
renderer.setSize(dom.clientWidth, dom.clientHeight);
// 初始化控制器
var orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
// 将渲染器加载到dom中
dom.appendChild(renderer.domElement);
javascript描述太阳及其构成；采用SphereGeometry来表示太阳；借助ImageUtils导入贴图。
// 定义太阳材质，sunImgUrl表示太阳贴图地址
var sunTexture = THREE.ImageUtils.loadTexture(sunImgUrl, {}, function () {
renderer.render(scene, camera);
});
// 使用SphereGeometry实现太阳球体，sunSize表示球体半径
var centerBall = new THREE.Mesh(new THREE.SphereGeometry(sunSize, 30, 50), new THREE.MeshBasicMaterial({
map: sunTexture
}));
javascript太阳借助其在 canvas 上渲染所生成的 createRadialGradient 来实现发光效果。
/** * 实现球体发光
* @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;
};
// 添加太阳发光效果
var centerBallLite = new THREE.Sprite(new THREE.SpriteMaterial({
map: new THREE.CanvasTexture(generateSprite(sunSpriteColor)),
blending: THREE.AdditiveBlending
}));
centerBallLite.scale.x = centerBallLite.scale.y = centerBallLite.scale.z = sunScaleSize;
scene.add(centerBallLite);
scene.add(centerBall);
javascript
模拟土星绕太阳运行体系的公转轨道。其中公转轨道的位置变化主要由RingGeometry参数控制。而具体的变化则由$position参数进行调整。
// 创建土星体系
var createSsaturnLite = function () {
// 添加土星体系
saturnMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial()); //材质设定
// 土星对应元素
// 土星公转轨道
var track = new THREE.Mesh(new THREE.RingGeometry(saturnLiteRadius, saturnLiteRadius + 0.1, 50, 1), new THREE.MeshBasicMaterial());
saturnLite = new THREE.Mesh(new THREE.SphereGeometry(saturnLiteSize, 30, 30), new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture(imgUrl)
}));
saturnLite.position.set(saturnLiteRadius, 0, 0);
saturnLite.rotation.x = 1.9;
// 土星环对应元素
// 土星环公转轨道
var trackRing = new THREE.Mesh(new THREE.RingGeometry(saturnLiteSize + 3, saturnLiteSize + 8, 50, 1), new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture(ringImgUrl),
side: THREE.DoubleSide
}));
// 土星环轨道中心
ringPoint = new THREE.Object3D();
ringPoint.add(trackRing);
ringPoint.position.set(saturnLiteRadius, 0, 0);
ringPoint.rotation.x = 0.3;
var earthPoint = new THREE.Object3D();
earthPoint.add(saturnLite);
earthPoint.add(track);
earthPoint.add(ringPoint);
saturnMesh.add(earthPoint);
saturnMesh.rotation.set(rotation.x, rotation.y, rotation.z);
scene.add(saturnMesh);
}
javascript
在虚拟环境中构建太阳系模型投射至虚拟场景中进行展示。其中天体的自传运动与公转轨道变化通过定期更新位置信息来实现动态效果。采用requestAnimationFrame作为动画驱动机制以保证流畅运行。
// 执行函数
var render = function () {
renderer.render(scene, camera);
centerBall.rotation.y -= sunSpeed;
saturnMesh.rotation.z -= saturnRotationSpeed;
orbitcontrols.update();
requestAnimationFrame(render);
}
javascript全部评论 (0)
还没有任何评论哟~