【Threejs】02如何用鼠标控制场景

上一节中我们创建了第一个Threejs项目，今天学习如何使用鼠标控制场景。
而使用鼠标控制场景，这就不得不提到OrbitControls（轨道控制器）组件了，轨道控制器可以使得相机围绕目标进行运动。想要使用这个组件必须要显示导入：

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js

从OrbitControls.js文件中引入

代码示例

// 导入threejs
import * as THREE from "three";

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(
    45,//视角
    window.innerWidth/window.innerHeight,//宽高比
    0.1,//近平面
    1000//远平面
);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);

// 使用索引绘制
const vertices = new Float32Array([
    -1.0,-1.0,0.0,1.0,-1.0,0.0,1.0,1.0,0.0,
    -1.0,1.0,0
])

// 创建顶点属性，每三个值创建一个顶点
geometry.setAttribute("position",new THREE.BufferAttribute(vertices,3))
// 创建索引
const indices = new Uint16Array([0,1,2,2,3,0]);
// 在几何体中添加索引
geometry.setIndex(new THREE.BufferAttribute(indices,1))

// 设置两个顶点组，形成两个材质
geometry.addGroup(0,3,0);//从0这个索引开始添加3个顶点，用的是第0个材质
geometry.addGroup(3,3,1);//从3这个索引开始添加3个顶点，用的是第1个材质
console.log(geometry);

// 创建材质
const material = new THREE.MeshBasicMaterial({
    color:0x567634,
    // wireframe:true，
    side:THREE.DoubleSide
})

const material1 = new THREE.MeshBasicMaterial({
    color:0x11338f,
    // wireframe:true,
    // side:THREE.DoubleSide
})

const plane = new THREE.Mesh(geometry,[material,material1]);
scene.add(plane)
// 设置相机的位置
camera.position.z = 5;
camera.position.y = 2;
camera.position.y = 2;
camera.lookAt(0,0,0);//默认看向原点

// 添加世界坐标辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement);

// 设置带阻尼的惯性
controls.enableDamping = true;
// 设置阻尼系数
controls.dampingFactor = 0.09;

// 渲染函数
function animate() {
    controls.update();//不断更新
    requestAnimationFrame(animate);//不断请求下一帧
    renderer.render(scene,camera);
}
animate();

 

代码程序第5行就是引入轨道控制器组件，第67行`const controls = new OrbitControls(camera,renderer.domElement);`创造了一个轨道控制器对象，它有两个参数第一个参数是要被控制的相机，第二个参数则是用于事件监听的HTML元素。