ThreeJS基本图形之点阵云

闲来无事，我们来学一学点阵云，每次看见别人的酷炫粒子变换，是不是安耐不住心中的遐想呢。

这个简单。

但是我们得从最基础的地方开始走起来，首先。我们得明白什么是点云，什么叫点云坐标分布，什么叫粒子，怎么绘制好看的粒子，怎么绘制秀出新天地的粒子。

其次我们再学学矩阵变换即可。酷炫的效果就来了，下面是将普通的几何体变为粒子云的案例。

<!DOCTYPE html>
<html>

<head>
       <meta charset="UTF-8">
       <title>threejs基本图形之点阵云</title>
       <script src="../js/three.js"></script>
   </head>

// 创建一个摄像机，它定义了我们所处的位置.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建渲染并设置大小指定渲染canvas对象
           var renderer = new THREE.WebGLRenderer({
               canvas: document.querySelector("#cc")
           });

renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight);

//创建一个xyz坐标轴，方便初学者理解三维坐标
var axes = new THREE.AxesHelper(20);
scene.add(axes);

//如何表达一个点云。顾名思义。将一个复杂几何体用无数个点的形式给表达出来

           //那么首先我们得创建一个东西，也就说所谓的复杂几何体
           //简单，之前教过
           var sphereGeometry = new THREE.SphereGeometry(10, 20, 20);//我们就创建个球体。当然api里面有各种几何体，你都可以使用,后面我会一一讲解
           var material = new THREE.PointsMaterial({color:Math.random()*0xffffff,size:0.2})//可以自己尝试改下size。就能创造新世界！！！
           var points = new THREE.Points(sphereGeometry,material)

           scene.add(points)


           //我们的点云就搞成了。

//设置相机位置
           camera.position.x = -30;
           camera.position.y = 40;
           camera.position.z = 30;
           camera.lookAt(scene.position);

// 执行一次渲染器，GPU渲染成图像，绘制到canvas里面呈现

           const draw = function(){
               requestAnimationFrame(draw)//不断绘制
               renderer.render(scene, camera);//渲染

               points.rotation.y+=0.01//点云角度旋转
           }
           draw()
       </script>
   </body>

</html>

ThreeJS基本图形之点阵云相关推荐

python图形用户界面形式_Python图形用户界面-阿里云开发者社区
tkinter是Python中可用于构建GUI的众多工具集之一. tkinter模块 # 可以使用import tkinter as tk并通过tk.thing去引用其中的内容 from tkinte ...
云服务器怎么安装虚拟显卡,云服务器怎么弄图形界面
云服务器怎么弄图形界面内容精选换一换华为云帮助中心,为用户提供产品简介.价格说明.购买指南.用户指南.API参考.最佳实践.常见问题.视频帮助等技术文档,帮助您快速上手使用华为云服务. Wind ...
ThreeJs 3D编程
新版本的主流浏览器都已支持WebGL,这样不需要插件就能在浏览器中创建三维图形.但WebGL提供的接口过于复杂,直接使用来创建三维图形和动画非常繁琐.Three.js函数库将强大的功能融汇其中,方便使 ...
云职教课堂计算机文化基础,2020智慧职教云课堂计算机文化基础答案最新最全单元测试答案...
参考答案如下智慧职教最新最全[判断题]两种气体在相同温度下放入同一个容器中,测得的压强分别为和 ,则把它们同时放入容器中后的总压强为 . 云课[单选题]根据物质的导电能力,将物质分为哪些类别?A. ...
阿里云VGN5i虚拟化GPU服务器价格更低的GPU计算服务
阿里云推出虚拟化GPU VGN5i实例,适用于云游戏.VR/AR.AI推理和DL教学等轻量级GPU计算场景,更细粒度的GPU计算服务,阿里云百科网分享: 什么是虚拟化GPU服务? 虚拟化GPU服务是一 ...
python 词云小demo
词云小demo jiebawordcloud 一什么是词云? 由词汇组成类似云的彩色图形."词云"就是对网络文本中出现频率较高的"关键词"予以视觉上的突出,形 ...
云服务器centos怎么还原系统还原,云服务器centos怎么还原系统还原
云服务器centos怎么还原系统还原内容精选换一换云耀云服务器(Halo Elastic Cloud Server,HECS)是可以快速搭建简单应用的新一代云服务器,具备独立.完整的操作系统和网 ...
基于python和线上网站wordart的词云生成
词云生成前言一.词云是什么? 二.使用步骤 1.使用jieba提取关键词 2.进入网站 3.导入关键词 4.导入字体 5.生成词云 6.词云调整总结前言随着人工智能的不断发展,python这 ...
【攻略】如何用云服务器实现云搬砖
本篇博文是从我的公众号转过来的,请尊重作者的劳动成果,未经允许请勿转载!值得说明的是,本篇博文主要适用于使用Python的同学. 目录 0 引言 1 本地PC(windows)如何远程连接云服 ...

ThreeJS基本图形之点阵云

ThreeJS基本图形之点阵云相关推荐

最新文章

热门文章