使用dat.gui实现主动控制立方体相关操作
这是一个非常简单基础的threejs的学习应用！在上一章学习threesj中我们实现立方体在坐标轴中来回移动，那都是通过我们的代码写死的效果，然后立方体的颜色都是通过代码写死的，这一章我们来给大家使用dat.gui工具实现页面主动控制立方体颜色位置以及其他属性的控制效果！
实现效果
准备工作
我们还是使用上一章用的代码，稍微的改动一些，创建一个没有动的立方体效果
代码如下:
import * as THREE from 'three'
import gsap from 'gsap'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
//了解thres最基本用法
//1.创建一个场景
const scene = new THREE.Scene();
/**
* 2.创建一个相机(透视相机)
* fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面
*/
const camera = new THREE.PerspectiveCamera(90,window.innerWidth/window.innerHeight,1,1000);
//设置相机对象 x y z
camera.position.set(0,0,10);
//相机加入场景中
scene.add(camera);
//3.添加物体
//几何体 长宽高
const geo = new THREE.BoxGeometry(1,1,1);
//创建材质
const mater = new THREE.MeshBasicMaterial({color:0xfff00})
//根据几何体和材质创建物体
const cube = new THREE.Mesh(geo,mater);
//将几何体添加到场景中
scene.add(cube);
//初始化渲染器
const render = new THREE.WebGLRenderer();
//设置渲染尺寸大小
render.setSize(window.innerWidth,window.innerHeight);
//将webgl渲染的canvas内容添加到body
document.body.appendChild(render.domElement)
//创建坐标轴辅助器
const axes = new THREE.AxesHelper(5);
scene.add(axes);
//添加控制器
const control = new OrbitControls(camera,render.domElement)
control.update();
//设置时钟
render.render(scene,camera);
function animate(){
requestAnimationFrame(animate)
//使用渲染器 通过相机将场景渲染
render.render(scene,camera);
}
animate()
接下来我们创建dat.gui页面来控制操作！
设计效果
引入dat.gui插件
yarn add dat.gui
or
npm install dat.gui
页面引入dat.gui
import * as dat from 'dat.gui'
创建gui对象
//创建dat.gui
const gui = new dat.GUI();
这里我们首先设置立方体沿着x轴移动的功能
//这里的cube就是立方体对象
//代码解读
//gui页面加入cube的x轴移动最小值为0 最大值为5 间隔为0.01设置的属性名称为‘移动X轴’
gui.add(cube.position,"x").min(0).max(5).step(0.01).name("移动x轴");
然后设置立方体物体的颜色
//代码解读
//gui页面加入颜色对象，当颜色设置改变时修改cube的材质material的颜色为改变后的颜色的值
let params = {
color:'#ffff00',
}
//gui的addColor参数为二个，params为一个对象 后一个参数是调用对象中的哪一个属性为默认值
gui.addColor(params,'color').onChange((value)=>{
cube.material.color.set(value)
})
添加点击事件，加入立方体来回移动的事件
let params = {
color:'#ffff00',
fn:()=>{
//立方体运动起来
//代码解读 使其cube的position参数改动，x改为5 过渡时长为1秒 来回移动 一直重复
gsap.to(cube.position,{x:5,duration:1,yoyo:true,repeat:-1})
}
}
//点击触发事件
gui.add(params,'fn').name("点击运动")
添加gui的下拉菜单 下拉菜单中加入立方体是否显示以及改变材质
//设置一个下拉 下拉的名称为‘设置立方体’
var folder = gui.addFolder("设置立方体")
//加入材质设置
folder.add(cube.material,'wireframe')
//加入是否显示设置
folder.add(cube,"visible").name("是否显示")
完整代码如下：
import * as THREE from 'three'
import * as dat from 'dat.gui'
import gsap from 'gsap'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
//了解thres最基本用法
//1.创建一个场景
const scene = new THREE.Scene();
/**
* 2.创建一个相机(透视相机)
* fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面
*/
const camera = new THREE.PerspectiveCamera(90,window.innerWidth/window.innerHeight,1,1000);
//设置相机对象 x y z
camera.position.set(0,0,10);
//相机加入场景中
scene.add(camera);
//3.添加物体
//几何体 长宽高
const geo = new THREE.BoxGeometry(1,1,1);
//创建材质
const mater = new THREE.MeshBasicMaterial({color:0xfff00})
//根据几何体和材质创建物体
const cube = new THREE.Mesh(geo,mater);
//将几何体添加到场景中
scene.add(cube);
//初始化渲染器
const render = new THREE.WebGLRenderer();
//设置渲染尺寸大小
render.setSize(window.innerWidth,window.innerHeight);
//将webgl渲染的canvas内容添加到body
document.body.appendChild(render.domElement)
//创建坐标轴辅助器
const axes = new THREE.AxesHelper(5);
scene.add(axes);
//添加控制器
const control = new OrbitControls(camera,render.domElement)
control.update();
//设置时钟
render.render(scene,camera);
function animate(){
requestAnimationFrame(animate)
//使用渲染器 通过相机将场景渲染
render.render(scene,camera);
}
animate()
//创建dat.gui
const gui = new dat.GUI();
gui.add(cube.position,"x").min(0).max(5).step(0.01).name("移动x轴");
let params = {
color:'#ffff00',
fn:()=>{
//立方体运动起来
gsap.to(cube.position,{x:5,duration:1,yoyo:true,repeat:-1})
}
}
gui.addColor(params,'color').onChange((value)=>{
cube.material.color.set(value)
})
//点击触发事件
gui.add(params,'fn').name("点击运动")
var folder = gui.addFolder("设置立方体")
folder.add(cube.material,'wireframe')
folder.add(cube,"visible").name("是否显示")
目前还在学习threejs，有写错误的地方请指出！！现在只是一个菜鸟，不喜勿喷！！
