three.js制作星空

利用threejs提供的一些方法，可以很简单的做出这样的效果。

比如：

绘制点
动态效果
鼠标操作旋转

这些threejs都有直接提供的方法，按照官方文档的用法直接用，是可以比较简单的实现动态星空背景效果的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3Dstar</title><style>body {margin: 0;overflow: hidden;}</style><script src="./threejs/three.min.js"></script><script src="./threejs/OrbitControls.js"></script>
</head>
<body><script>/*** 创建场景对象Scene*/var scene = new THREE.Scene();var intersectsArr = []//星空背景var cloud = cloudFun()scene.add(cloud)function cloudFun() {var geom = new THREE.Geometry();var material = new THREE.ParticleBasicMaterial({size: 2,vertexColors: true});var n = 1200;for (var i = 0; i < 3000; i++) {var particle = new THREE.Vector3((Math.random() - 0.5) * n,(Math.random() - 0.5) * n,(Math.random() - 0.5) * n);geom.vertices.push(particle);let color_k = Math.random();geom.colors.push(new THREE.Color(color_k, color_k, color_k * 2.0));}var cloud = new THREE.ParticleSystem(geom, material);return cloud;}/*** 透视投影相机设置*/var width = window.innerWidth; //窗口宽度var height = window.innerHeight; //窗口高度/**透视投影相机对象*/var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);camera.position.set(651, 613, 525); //设置相机位置camera.lookAt(scene.position); //设置相机方向(指向的场景对象)/*** 光源设置*///点光源        var point = new THREE.PointLight(0xffffff);point.position.set(800, 200, 300);scene.add(point);// 点光源2  位置和point关于原点对称var point2 = new THREE.PointLight(0xffffff);point2.position.set(0, -500, 0); //点光源位置scene.add(point2); //点光源添加到场景中//环境光var ambient = new THREE.AmbientLight(0x000000);scene.add(ambient);/*** 创建渲染器对象*/var renderer = new THREE.WebGLRenderer({antialias: true});renderer.setSize(width, height); //设置渲染区域尺寸renderer.setClearColor(0x101010, 1); //设置背景颜色document.body.appendChild(renderer.domElement); //body元素中插入canvas对象let clock = new THREE.Clock();var FPS = 30;var refreshTime = 1 / FPS;var timeS = 0;function render() {var renderInterval = clock.getDelta();timeS = timeS + renderInterval;if (timeS > refreshTime) {//执行渲染操作renderer.render(scene, camera);timeS = 0;}//每次渲染位置变化，动态效果cloud.rotation.x += 0.0002;cloud.rotation.y += 0.0002;cloud.rotation.z += 0.0002;//周期性渲染requestAnimationFrame(render);}render();var controls = new THREE.OrbitControls(camera);//创建控件对象</script>
</body>
</html>

【参考】

three.js
太阳系3D预览

three.js制作星空相关推荐

js制作的炫酷3D太阳系行星运行效果
想象着打开网页就能浏览太阳系行星的运行情况,促进我们更好的了解这个宇宙星空,于是找到了这样一段代码可以完美的实现这个功能,通过css和js就可以实现在网页上展示一个完美的太阳系行星的运行情况,效果炫酷 ...
520情人节程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)
❉ 来自程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)可自定义编辑文字一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白,是不是要给 ...
使用 ale.js 制作一个小而美的表格编辑器（2）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
使用 ale.js 制作一个小而美的表格编辑器（3）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
纯JS制作的窗户雨滴效果
今天本站推荐的代码是用JS制作的窗户雨滴效果,绚丽的效果不亚于FLASH,由于不知出处在哪,总而言之, 在此感谢作者的慷慨分享. function demo() { var engine = new ...
使用 FlipClock.js 制作精美的时钟、定时器和倒计时功能
FlipClock.js 被创建出来是因为其他的解决方案不够抽象,不能够在不重写的代码的情况下提供了深层次的自定义.有些库的参数过多,而另外一些则是脚本中的硬编码太多,不够灵活. 在参考许多现有的解决 ...
php简单网页制作代码,用HTML和CSS以及JS制作简单的网页菜单界面的代码
这篇文章主要介绍了使用HTML+CSS+JS制作简单的网页菜单界面,这个ABROAD项目所使用的JavaScript部分代码非常简单,需要的朋友可以参考下写ABROAD项目用到了标签这个东东,其实标 ...
用JS制作一个信息管理平台完整版
前言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
unity怎么制作云飘动_Unity 如何制作星空粒子效果?
本经验介绍在Unity游戏引擎中使用Particle System,如何使用自带资源,快速制作星空的粒子特效. 工具/原料 Unity 方法/步骤1: 首先,新建一个场景,如果有自己的天空盒资源的话, ...

three.js制作星空

利用threejs提供的一些方法，可以很简单的做出这样的效果。

three.js制作星空相关推荐

最新文章

热门文章