three.js仿真模拟完成太阳系行星管理体系作用

日期:2021-01-19 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

概述以下:

1、 SphereGeometry 完成自转的太阳;

2、 RingGeometry 完成太阳系星系的公转路轨;

3、 ImageUtils 载入球体和各行星贴图;

4、 canvas 中 createRadialGradient 完成太阳发光实际效果;

5、 THREE.Sprite 小精灵完成太阳系行星。

实际效果图以下:

 

预览详细地址: three.js仿真模拟完成太阳系行星管理体系

原始化情景、照相机、3D渲染器,设定照相机部位。

// 原始化情景
var scene = new THREE.Scene();
// 原始化照相机,第1个主要参数为监控摄像头视圆锥体竖直视线角度,第2个主要参数为监控摄像头视圆锥体长宽比,
// 第3个主要参数为监控摄像头视圆锥体近端面,第4个主要参数为监控摄像头视圆锥体远端面
var camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 100000);
// 设定照相机部位,对应主要参数各自表明x,y,z部位
camera.position.set(0, 0, 500);
var renderer = new THREE.WebGLRenderer({
      alpha: true,
      antialias: true
});

设定情景对话框规格,而且原始化操纵器,对话框规格默认设置与访问器对话框规格维持1致,最终将3D渲染器载入到dom中。

// 设定对话框规格,第1个主要参数为宽度,第2个主要参数为高宽比
renderer.setSize(dom.clientWidth, dom.clientHeight);
// 原始化操纵器
var orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
// 将3D渲染器载入到dom中
dom.appendChild(renderer.domElement);

界定太阳及其材质,太阳根据 SphereGeometry 来完成,根据 ImageUtils 来导入贴图。

// 界定太阳材质
var sunTexture = THREE.ImageUtils.loadTexture('./image/sun_bg.jpg', {}, function () {
    renderer.render(scene, camera);
});
// 太阳和太阳材质设置
centerBall = new THREE.Mesh(new THREE.SphereGeometry(30, 30, 30), new THREE.MeshBasicMaterial({
    map: sunTexture
}));
scene.add(centerBall);

太阳发光实际效果根据 Sprite 引进 canvas 3D渲染的 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);

太阳系各行星公转路轨根据 RingGeometry 来完成,公转路轨偏位根据 position 来完成,行星管理体系根据 THREE.Sprite 来完成。

/**
 * 回到行星路轨的组成体
 * @param starLiteSize 行星的尺寸
 * @param starLiteRadius 行星的转动半径
 * @param rotation 行星组成体的x,y,z3个方位的转动角度
 * @param speed 行星健身运动速率
 * @param imgUrl 行星的贴图
 * @param scene 情景
 * @returns {{satellite: THREE.Mesh, speed: *}} 卫星组成目标;速率
*/
var initSatellite = function (starLiteSize, starLiteRadius, rotation, speed, imgUrl, scene) {
var track = new THREE.Mesh(new THREE.RingGeometry(starLiteRadius, starLiteRadius + 0.05, 50, 1), new THREE.MeshBasicMaterial());
var centerMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial()); //材质设置
var starLite = new THREE.Sprite(new THREE.SpriteMaterial({
     map: THREE.ImageUtils.loadTexture(imgUrl)
}));
starLite.scale.x = starLite.scale.y = starLite.scale.z = starLiteSize;
starLite.position.set(starLiteRadius, 0, 0);
var pivotPoint = new THREE.Object三d();
pivotPoint.add(starLite);
pivotPoint.add(track);
centerMesh.add(pivotPoint);
centerMesh.rotation.set(rotation.x, rotation.y, rotation.z);
scene.add(centerMesh);
   return {starLite: centerMesh, speed: speed};
};

将建立好的太阳及行星自转公转管理体系3D渲染到情景中,自转和公转根据定时执行改动 position 值来完成,动漫应用 requestAnimationFrame 来完成。

// 实行涵数
var render = function () {
    renderer.render(scene, camera);
    centerBall.rotation.y -= 0.01;
    for (var i = 0; i < starLites.length; i++) {
        starLites[i].starLite.rotation.z -= starLites[i].speed;
    }
    orbitcontrols.update();
    requestAnimationFrame(render);
}

总结

以上所述是网编给大伙儿详细介绍的three.js仿真模拟完成太阳系行星管理体系作用,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!