各位宝宝们, 时隔这么久, 终于又要继续我们的threeJs教程啦! 我们这次还是学习我们threejs插件Gui。 在之前教程中, 我们学习了Gui 的基本使用, 这节课我们学习使用Gui插件添加盒子功能。
在之前的课程里，我们通过Gui插件控制了我们threeJs盒子元素的旋转速度以及球体元素的跳跃速度。主要是通过Gui设置运动的速度变值，在渲染的时候将Gui控制的速度值添加给我们的元素。在本节课我们要用一个新的界面添加我们的Gui插件功能。
首先， 我们还是把基本的内容渲染出来，大家可以跟着我的节奏把基本内容先书写出来,
- 引入我们需要的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)
实现的效果是这样的
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
网友评论