落地成盒？threeeJs插件Gui添加盒子功能

各位宝宝们, 时隔这么久, 终于又要继续我们的threeJs教程啦! 我们这次还是学习我们threejs插件Gui。 在之前教程中, 我们学习了Gui 的基本使用, 这节课我们学习使用Gui插件添加盒子功能。

在之前的课程里，我们通过Gui插件控制了我们threeJs盒子元素的旋转速度以及球体元素的跳跃速度。主要是通过Gui设置运动的速度变值，在渲染的时候将Gui控制的速度值添加给我们的元素。在本节课我们要用一个新的界面添加我们的Gui插件功能。

首先， 我们还是把基本的内容渲染出来，大家可以跟着我的节奏把基本内容先书写出来,

• 引入我们需要的threeJs文件

  <!--threeJs依赖 -->

<script src="./js/three.js"></script>

    <!-- 浏览器控制台插件 -->

    <script src="./js/dat.gui.min.js"></script>

    <!-- 检测性能插件 -->

    <script src="./js/stats.min.js"></script>

• 设置界面样式

<style>

        body{

            margin: 0;

            padding: 0;

            overflow: hidden;

        }

    </style>

• 设置控制台容器和插件容器

  <!-- 控制台 -->

    <div id="Stats-output"></div>

    <!-- 场景画面 -->

    <div id="WebGL-output">

• 设置我们threeJs的基本内容：场景、摄像头、渲染器、平面， 并添加到容器中

//场景

      var scene = new THREE.Scene();

 

      //摄像头

      var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);

      scene.add(camera)

      camera.position.x = -30;

      camera.position.y = 40;

      camera.position.z = 30;

      camera.lookAt(scene.position);

      //渲染器

      var renderer = new THREE.WebGLRenderer();

          renderer.setClearColor(0xeeeeee);

          renderer.setSize(window.innerWidth,window.innerHeight);

          renderer.shadowMap.enabled = true;

      //设置平面

      var planeGeometry = new THREE.PlaneGeometry(60,40,1,1);

      var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});

      var plane = new THREE.Mesh(planeGeometry,planeMaterial);

          plane.receiveShadow = true;

      plane.rotation.x = -0.5 * Math.PI;

          plane.position.x = 0;

          plane.position.y = 0;

          plane.position.z = 0;

    scene.add(plane);

   //增加光源

       var spotLight = new THREE.SpotLight(0xffffff);

           spotLight.position.set(-40, 60, -10);

           spotLight.castShadow = true;

           //设置阴影分辨率

           spotLight.shadow.mapSize.width = 3000;

           spotLight.shadow.mapSize.height = 3000;  

           scene.add(spotLight);

    //增加渲染器到html容器中

document.getElementById("WebGL-output").appendChild(renderer.domElement);

//渲染器渲染场景和摄像头  

renderer.render(scene,camera)

实现的效果是这样的

 

然后我们可以来通过Gui来设置一些功能，首先是在视图中插入Gui插件

//在视图中插入Gui插件

    var gui = new dat.GUI();

设置Gui插件的控制器

//设置Gui的控制器

    var controls = new function(){

 

    }

在这个controls中我们可以设置一些自己想要的功能， 我们以添加盒子和删除盒子为例，

添加盒子

我们要先在Gui 的controls中设置某一个功能

//设置Gui的控制器

    var controls = new function(){

          //添加元素

           this.addCube = function(){

            //设置盒子随机尺寸

             var cubeSize = Math.ceil((Math.random()*3));

               //设置盒子模型

               var cubeGeometry = new THREE.BoxGeometry(cubeSize,cubeSize,cubeSize);

               //设置盒子随机颜色

               var cubeMaterial = new THREE.MeshLambertMaterial({color:Math.random()* 0xffffff});

               //创建盒子模型以及颜色

               var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);

               // 盒子接收阴影

               cube.castShadow = true;

               // 盒子名称

               cube.name = "cube" + scene.children.length;

               //生成盒子模型的随机位置

               cube.position.x = -30 + Math.round((Math.random()* planeGeometry.parameters.width));

               cube.position.y = Math.round((Math.random()* 5));

                cube.position.z = -20 + Math.round((Math.random()* planeGeometry.parameters.height));

//视图中添加cube

                scene.add(cube);

            }

        }

然后我们需要在Gui插件中插入这个controls

gui.add(controls,'addCube');

然后需要我们渲染在页面中, 这里需要注意一下, 渲染是使用的我们的renderer.render(scene, camera), 但是这个并不能实现我们的效果, 我们在添加新的元素之后, 需要重新渲染我们的界面, 所有需要使用到requestAnimationFrame( )函数

大家还记得这个函数是做什么用的吗??? 这个函数可以启动我们的渲染循环, 无论是元素添加还是删除, 还是元素运动都要用到requestAnimationFrame( )函数

所以最后, 我们要把之前写的渲染进行一个修改

//渲染器渲染场景和摄像头  

renderer.render(scene,camera)

改为

function render(){

           requestAnimationFrame(render)

           renderer.render(scene,camera)

    }

    render()

就可以实现我们点击addCube添加元素的效果了