threejs中controls鼠标交互

admin

知识库

发布于：2023-01-07 09:53:34

在使用threejs的过程中，我们需要对镜头进行移动，旋转和平移等操作，如何完成这样的鼠标交互呢?threejs给我们提供了多种实现鼠标交互的方法。下面以OrbitControls为例为大家简单介绍一下。

使用OrbitControls的步骤比较简单，分为3步：引入鼠标交互、添加鼠标交互、更新鼠标交互

import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'//导入鼠标交互
const orbitControls = new OrbitControls(camera,renderer.domElement)//添加鼠标交互需要传入相机和canvas参数
orbitControls.update()//更新鼠标交互

使用鼠标交互方法看似非常简单，只需要3步，但是需要配合具体的动画案例，把这3步放到具体的案例中才能看到效果。下面案例分享了鼠标交互的具体使用方法。

import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'//导入鼠标交互

const w =window.innerWidth
const h =window.innerHeight


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

//坐标轴
const axes = new THREE.AxesHelper(2,2,2)
scene.add(axes)

//立方体
const g = new THREE.BoxGeometry(1,1,1)
const m = new THREE.MeshNormalMaterial()//法线网格材质
const cube=new THREE.Mesh(g,m)
scene.add(cube)



//创建光线
const light = new THREE.AmbientLight()

//把光线放入场景
scene.add(light)

//创建一个相机
const camera=new THREE.PerspectiveCamera(75,w/h,0.1,100) //75是能看到的角度范围
camera.position.set(0,0,5)
camera.lookAt(0,0,0)

//创建渲染器
const renderer=new THREE.WebGLRenderer()
renderer.setSize(w,h)
document.body.append(renderer.domElement)

const orbitControls = new OrbitControls(camera,renderer.domElement)//添加鼠标交互需要传入相机和canvas参数

//动画
const clock=new THREE.Clock()
tick()
function tick(){
  const time=clock.getElapsedTime()
  cube.rotation.x=Math.sin(time*2)*2
  cube.rotation.y=Math.cos(time*2)*2

  requestAnimationFrame(tick)
  renderer.render(scene,camera)
  orbitControls.update()//更新鼠标交互
}

查看实例效果