代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<title>Threejs实现最美的星球</title>
<meta charset="UTF-8">
<script type="text/javascript" src="libs/statistics.js"></script>
<script type="text/javascript" src="libs/steak.js"></script>
<script type="text/javascript" src="libs/three.js"></script>
<script type="text/javascript" src="libs/dat.gui.js"></script>
<script type="text/javascript" src="libs/OrbitControls.js"></script>
<script type="text/javascript" charset="UTF-8" src="libs/Tween.min.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
/* background: #0c0604 url(assets/bgImage/bg_loading.jpg) no-repeat center; */
background: url(assets/bgImage/ba_starry.jpg) no-repeat;
background-size: cover;
}
body {
margin: 0;
overflow: hidden;
}
#three {
position: absolute;
top: 0;
}
</style>
</head>
<body>
<canvas id="bg"></canvas>
<div id="three"></div>
<script type="text/javascript">
var _createClass = function() {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Stars = function() {
function Stars(ctx, width, height, num) {
// _classCallCheck(this, Stars);
this.ctx = ctx;
this.width = width * 2;
this.height = height * 2;
this.num = num;
this.init();
}
_createClass(Stars, [{
key: 'init',
value: function init() {
this.stars = [];
for (var i = 0; i < this.num; i++) {
var star = {};
star.x = Math.random() * this.width;
star.y = Math.random() * this.height;
star.r = Math.random() + 1;
this.stars.push(star);
}
}
}, {
key: 'draw',
value: function draw() {
var _this = this;
this.ctx.save();
this.stars.forEach(function(star) {
_this.ctx.fillStyle = _this.getColor();
_this.ctx.beginPath();
_this.ctx.arc(star.x, star.y, star.r, 0, 2 * Math.PI);
_this.ctx.fill();
});
this.ctx.restore();
}
}, {
key: 'getColor',
value: function getColor() {
var n = Math.random();
var color = void 0;
if (n < 0.5) {
color = '#d6edff';
} else {
color = '#858bc5';
}
return color;
}
}]);
return Stars;
}();
// 流星
var Meteor = function() {
function Meteor(ctx, width, height) {
_classCallCheck(this, Meteor);
this.ctx = ctx;
this.width = width * 2;
this.height = height * 2;
this.init();
}
_createClass(Meteor, [{
key: 'init',
value: function init() {
// this.x = this.width - 166;
this.x = Math.random() * this.width;
this.y = Math.random() * this.height / 2;
this.speed = Math.floor(Math.random() * 5 + 2);
}
}, {
key: 'draw',
value: function draw() {
var _this2 = this;
this.ctx.save();
if (!this.img) {
this.img = new Image();
this.img.onload = function() {
_this2.ctx.drawImage(_this2.img, _this2.x, _this2.y);
};
this.img.src = "assets/earth/bg_meteor.png";
} else {
this.ctx.drawImage(this.img, this.x, this.y);
}
this.ctx.restore();
}
}, {
key: 'flow',
value: function flow() {
// if (this.x < -166 || this.y > this.height) {
if (this.y > this.height) {
return true;
} else {
return false;
}
}
}, {
key: 'move',
value: function move() {
// let x = 1;
// let y = 1;
this.ctx.clearRect(this.x, this.y, 166, 130);
this.x -= this.speed;
this.y += this.speed;
this.draw();
}
}]);
return Meteor;
}();
var count = 0;
var meteors = [];
var animate = function animate() {
count++;
if (stars) {
count % 10 === 0 && stars.draw();
}
if (meteors.length > 0) {
meteors.forEach(function(meteor, index) {
if (meteor.flow()) {
context.clearRect(meteor.x, meteor.y, 166, 130);
meteor.init();
meteor.draw();
} else {
meteor.move();
}
});
}
requestAnimationFrame(animate);
};
var createMeteors = function createMeteors() {
for (var i = 0; i < 2; i++) {
meteors.push(new Meteor(context, width, height));
meteors[i].draw();
}
};
var init = function init() {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
canvas = document.getElementById("bg");
context = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
stars = new Stars(context, width, height, 50);
stars.draw();
createMeteors();
animate();
};
init();
</script>
<script type="text/javascript">
var camera;
var renderer;
var earth, cloud;
var group = new THREE.Group();
var groupGa = new THREE.Group();
var earthBool = true;
// 中心球体轨道组合体（行星）
var starLites = [];
function init() {
// 创建一个场景，它将包含我们所有的元素，如物体，相机和灯光。
var scene = new THREE.Scene();
// 创建一个摄像机，它定义了我们正在看的地方
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.z = 3200;
camera.lookAt(scene.position);
var orbit = new THREE.OrbitControls(camera);
// 设置相机距离原点的最远距离
// orbit.minDistance = 300;
// 设置相机距离原点的最远距离
// orbit.maxDistance = 3200
// 创建一个渲染器并设置大小，WebGLRenderer将会使用电脑显卡来渲染场景
renderer = new THREE.WebGLRenderer({
antialias: true,
logarithmicDepthBuffer: true,
alpha: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置渲染器需要阴影效果
renderer.shadowMapEnabled = true;
// 在屏幕上显示坐标轴
var axes = new THREE.AxisHelper(100);
// scene.add(axes);
// point light (upper left)
pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(-400, 100, 150);
scene.add(pointLight);
// ambient light
ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);
// 星团
galaxy();
if (earthBool) {
createEarth(100);
}
animate();
stars();
scene.add(group);
// scene.add(groupGa);
// 将呈现器的输出添加到HTML元素
document.getElementById("three").appendChild(renderer.domElement);
// 启动动画
renderScene();
// 创建地球
function createEarth(radius) {
var track = new THREE.Mesh(new THREE.RingGeometry(radius + 80, radius + 79.7, 100, 1),
new THREE.MeshBasicMaterial({
color: "#517878",
side: THREE.DoubleSide
}));
track.rotation.set(-Math.PI * 0.45, Math.PI * 0.1, 0);
// scene.add(track);
var earthGeo = new THREE.SphereGeometry(radius, radius, radius);
var earth_texture = new THREE.TextureLoader().load("assets/earth/tx/earth.jpeg");
var earth_bump = new THREE.TextureLoader().load("assets/earth/tx/bump.jpeg");
var earth_specular = new THREE.TextureLoader().load("assets/earth/tx/spec.jpeg");
var earthMater = new THREE.MeshPhongMaterial({
shininess: 40,
bumpScale: 1,
map: earth_texture,
bumpMap: earth_bump,
specularMap: earth_specular
});
earth = new THREE.Mesh(earthGeo, earthMater);
scene.add(earth)
var cloud_texture = new THREE.TextureLoader().load('assets/earth/tx/cloud.png');
var cloud_geometry = new THREE.SphereGeometry(radius + 5, radius + 5, radius + 5);
var cloud_material = new THREE.MeshBasicMaterial({
shininess: 10,
map: cloud_texture,
transparent: true,
opacity: 0.5
});
cloud = new THREE.Mesh(cloud_geometry, cloud_material);
scene.add(cloud);
var pos = new THREE.Vector3(0, 0, 300);
animateCamera(camera.position, pos, orbit.target, orbit.target);
}
/**
* 定义星团组合体
* @param position 星系位置
* @param radius 星系半径
* @param size 星系大小
* @returns {{satellite: THREE.Mesh, speed: *}} 卫星组合对象;速度
*/
function initGalaxy(radius, size, position, imgUrl) {
var track = new THREE.Mesh(new THREE.RingGeometry(size - 1.8, size, 100, 1),
new THREE.MeshBasicMaterial({
color: "#517878",
side: THREE.DoubleSide
}));
track.name = "galaxy_CMesh"
var centerMesh = new THREE.Mesh(); //材质设定
var starLite = new THREE.Sprite(new THREE.SpriteMaterial({
map: THREE.ImageUtils.loadTexture(imgUrl),
side: THREE.DoubleSide
}));
starLite.name = "galaxy_Sprite"
starLite.scale.set(size, size, size);
var pivotPoint = new THREE.Object3D();
pivotPoint.add(starLite);
pivotPoint.add(track);
centerMesh.add(pivotPoint);
centerMesh.rotation.set(position.x, position.y, position.z);
centerMesh.position.set(position.x, position.y, position.z);
centerMesh.name = "galaxy_PMesh"
return centerMesh;
}
/**
* 生成星团
*/
function galaxy() {
var urlArr = ["assets/earth/BANU.png", "assets/earth/DEV.png", "assets/earth/uee.png",
"assets/earth/UNC.png", "assets/earth/VNCL.png", "assets/earth/XIAN.png"
];
for (var i = 0; i < 100; i++) {
var index = Math.floor(Math.random() * urlArr.length); //随机生成
var n = Math.random() * 200 * i;
var x = Math.cos((Math.PI / 10) * (Math.random() * 200)) * 100;
var y = Math.cos((Math.PI / 10) * (Math.random() * 200)) * 50;
var z = Math.cos((Math.PI / 10) * (Math.random() * 200)) * 500;
groupGa.add(initGalaxy(30, 17, {
x: THREE.Math.randFloatSpread(2000),
y: THREE.Math.randFloatSpread(1000),
z: THREE.Math.randFloatSpread(2000)
}, urlArr[index]));
}
}
/**
* 星星粒子
*/
function stars() {
var starsGeometry = new THREE.Geometry();
for (var i = 0; i < 3000; i++) {
var starVector = new THREE.Vector3(
THREE.Math.randFloatSpread(4000),
THREE.Math.randFloatSpread(3000),
THREE.Math.randFloatSpread(4000)
);
starsGeometry.vertices.push(starVector);
starsGeometry.name = "starsGeometry" + i;
}
var starsMaterial = new THREE.PointsMaterial({
color: 0x888888,
sizeAttenuation: false
})
// var starsPoint = new THREE.Points(starsGeometry, starsMaterial);
// starsPoint.name = "starsPoint";
// group.add(starsPoint);
}
/**
* 返回行星轨道的组合体
* @param starLiteSize 行星的大小
* @param starLiteRadius 行星的旋转半径
* @param rotation 行星组合体的x,y,z三个方向的旋转角度
* @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.3, 200, 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.Object3D();
pivotPoint.add(starLite);
pivotPoint.add(track);
centerMesh.add(pivotPoint);
centerMesh.rotation.set(-Math.PI * 0.45, Math.PI * 0.1, 0);
scene.add(centerMesh);
return {
starLite: centerMesh,
speed: speed
};
}
// 地球卫星
starLites.push(initSatellite(10, 150, {
x: 0,
y: 0,
z: 0
}, 0.01, 'assets/earth/satellite.png', scene));
// current1 相机当前的位置
// target1 相机的目标位置
// current2 当前的controls的target
// target2 新的controls的target
function animateCamera(current1, target1, current2, target2) {
var tween = new TWEEN.Tween({
x1: current1.x, // 相机当前位置x
y1: current1.y, // 相机当前位置y
z1: current1.z, // 相机当前位置z
x2: current2.x, // 控制当前的中心点x
y2: current2.y, // 控制当前的中心点y
z2: current2.z // 控制当前的中心点z
});
tween.to({
x1: target1.x, // 新的相机位置x
y1: target1.y, // 新的相机位置y
z1: target1.z, // 新的相机位置z
x2: target2.x, // 新的控制中心点位置x
y2: target2.y, // 新的控制中心点位置x
z2: target2.z // 新的控制中心点位置x
}, 2000);
tween.onUpdate(function() {
camera.position.x = this.x1;
camera.position.y = this.y1;
camera.position.z = this.z1;
orbit.target.x = this.x2;
orbit.target.y = this.y2;
orbit.target.z = this.z2;
orbit.update();
if (earthBool) {
earth.rotation.y += 0.1;
cloud.rotation.y += 0.1;
}
})
tween.easing(TWEEN.Easing.Cubic.InOut);
tween.start();
}
document.addEventListener('mousemove', onDocumentMouseDown, false);
// document.addEventListener('click', onDocumentMouseDown, false);
function onDocumentMouseDown(event) {
// 点击屏幕创建一个向量
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window
.innerHeight) * 2 + 1, 0.5);
vector = vector.unproject(camera); // 将屏幕的坐标转换成三维场景中的坐标
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
// var intersects = raycaster.intersectObjects(scene.children, true);
var intersects = raycaster.intersectObjects(groupGa.children, true);
// console.log(intersects)
if (intersects.length > 0) {
// var pos = intersects[0].object.position;
console.log(intersects[0].object.parent.children[1])
// intersects[0].object.material.color.set("0xff0000");
intersects[0].object.parent.children[1].material.color.set("#90d5d5")
}
}
function animate() {
requestAnimationFrame(animate);
if (earthBool) {
earth.rotation.y += 0.001;
cloud.rotation.y += 0.001;
}
group.rotation.y += 0.0005;
// groupGa.rotation.y -= 0.0005;
for (var i = 0; i < starLites.length; i++) {
starLites[i].starLite.rotation.z -= starLites[i].speed;
}
renderer.render(scene, camera);
}
function renderScene() {
TWEEN.update();
orbit.update();
// 使用requestAnimationFrame函数进行渲染
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
// 渲染的场景
renderer.render(scene, camera);
}
window.onload = init;
// 随着窗体的变化修改场景
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// 监听窗体调整大小事件
window.addEventListener('resize', onResize, false);
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手