落地成盒？前端必收藏的干货：threeeJs插件Gui添加盒子功能

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

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

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

• 引入我们需要的threeJs文件

• 设置界面样式

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

• 设置我们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)

实现的效果是这样的

image

然后我们可以来通过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添加元素的效果了

image