three.js-controls(控制器)

gitee 地址

gitee地址： gittee地址

本篇目标

• 使用controls控制器对我们创建的模型添加交互

添加controls控制器

引入控制器

本文使用的是OrbitControls(轨道控制器)

// 引入控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

控制器列表

控制器名称	控制器名称-中文	描述
DragControls	拖放控制器	该类被用于提供一个拖放交互。
FirstPersonControls	第一人称控制器	该类是 FlyControls 的另一个实现。
OrbitControls	轨道控制器	可以使相机围绕目标进行轨道运动。
PointerLockControls	指针锁定控制器	该类的实现是基于Pointer Lock API的。 对于第一人称3D游戏来说， PointerLockControls 是一个非常完美的选择。
TrackballControls	轨迹球控制器	TrackballControls 与 OrbitControls 相类似。然而，它不能恒定保持摄像机的up向量。 这意味着，如果摄像机绕过“北极”和“南极”，则不会翻转以保持“右侧朝上”。
TransformControls	变换控制器	该类可提供一种类似于在数字内容创建工具（例如Blender）中对模型进行交互的方式，来在3D空间中变换物体。 和其他控制器不同的是，变换控制器不倾向于对场景摄像机的变换进行改变。
FlyControls	飞行控制器	FlyControls 启用了一种类似于数字内容创建工具（例如Blender）中飞行模式的导航方式。 你可以在3D空间中任意变换摄像机，并且无任何限制（例如，专注于一个特定的目标）。

添加/创建并使用控制器

// 添加控制器
const controls = new OrbitControls( camera, renderer.domElement );
// 使用控制器
controls.update()

我们需要在渲染函数中再次添加控制器的修改操作

controls.update()

添加后的渲染函数完整代码

// 渲染
function animate() {
    // 使用 requestAnimationFrame 执行动画
    requestAnimationFrame(animate)
  
    controls.update()

    //scene:前面定义的场景,camera:前面定义的相机
    //renderTarget:渲染的目标默认是是渲染到前面定义的render变量中
    //forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除
    renderer.render(scene, camera)
}

现在我们就可以使用鼠标拖动进行交互了

我这里将视频转成了gif格式的图片，所以看着就是上面这种画面。
现在看起来不流畅，没有那种拖动的阻尼感，我们给他添加阻尼的效果。

// 添加控制器
const controls = new OrbitControls( camera, renderer.domElement );
// 开启控制器的阻尼效果
controls.enableDamping = true

现在看起来就真实多了
现在我们看到我们的立方体的边缘有一些锯齿，看起来有点丑，我们给他去除锯齿，开启抗锯齿。
在我们的创建渲染器的时候给它添加antialias: true开启抗锯齿

// 创建渲染器
const renderer = new THREE.WebGLRenderer({
    antialias: true, // 开启抗锯齿
});

这样我们的这个盒子看起来就很完美了。

完整代码

import * as THREE from "three"

// 引入控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

// 目标：使用控制器
//创建场景
const scene = new THREE.Scene()

// 创建相机
/*
    PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
        fov — 摄像机视锥体垂直视野角度
        aspect — 摄像机视锥体长宽比
        near — 摄像机视锥体近端面
        far — 摄像机视锥体远端面
*/
// 透视相机
const camera = new THREE.PerspectiveCamera(
    75, // 摄像机视锥体垂直视野角度，从视图的底部到顶部，以角度来表示。默认值是50。
    window.innerWidth / window.innerHeight, // 摄像机视锥体的长宽比，通常是使用画布的宽/画布的高。默认值是1（正方形画布）。
    0.1, // 摄像机的近端面，默认值是0.1。
    1000 // 摄像机的远端面，默认值 2000
)


// 创建渲染器
const renderer = new THREE.WebGLRenderer({
    antialias: true, // 开启抗锯齿
});
// 设置大小
renderer.setSize(
    1000, // 宽度
    500 // 高度
);
//挂载到页面
document.body.appendChild(renderer.domElement)


// 添加控制器
const controls = new OrbitControls( camera, renderer.domElement );
// 开启控制器的阻尼效果
controls.enableDamping = true
// 使用控制器
controls.update()


// 添加物体
/*
    width:立方体x轴的长度,
    height:立方体y轴的长度,
    depth:立方体z轴的长度也是深度
*/
let geometry = new THREE.BoxGeometry(10, 10, 10);


// 添加材质
// const material = new THREE.MeshBasicMaterial({ color: 0xffff0000 });

// 添加材质
const materials = []
for(let i = 0; i < 6; i++){
    materials.push(new THREE.MeshBasicMaterial({ color: Math.random() * 0x00ff0000 }))
}


// 添加网格
const cube = new THREE.Mesh( geometry, materials );
scene.add( cube );

// 设置相机位置
camera.position.z = 50;

// 修改场景背景颜色
scene.background = new THREE.Color(0xffffcc99)

// 添加 三色坐标轴
const axesHelper = new THREE.AxesHelper(20)
scene.add( axesHelper )

// 渲染
function animate() {

    // 使用 requestAnimationFrame 执行动画
    requestAnimationFrame(animate)

    controls.update()

    //scene:前面定义的场景,camera:前面定义的相机
    //renderTarget:渲染的目标默认是是渲染到前面定义的render变量中
    //forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除
    renderer.render(scene, camera)
}    

// 渲染
animate()

下面让我们的盒子动起来，添加动画并结合gsap动画库。使我们的动画更流畅哦。