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基本图形之点阵云

猜你喜欢