Threejs学习02——使用dat.gui实现主动控制立方体相关操作

使用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，有写错误的地方请指出！！现在只是一个菜鸟，不喜勿喷！！