Threejs入门之三:让物体跟随鼠标动起来

九仞山

修改于 2023-05-19 09:28:19

3.6K00

代码可运行

运行总次数：0

代码可运行

上一节我们创建了一个三维的立方体，将其放在了浏览器窗口中，但是目前来讲它只是一个静态的图片，我们并不能通过鼠标控制其旋转、缩放和移动，这一节我们来实现用鼠标控制物体的运动。首先我们要了解一个概念，在三维场景中，我们要控制物体旋转，实际上不是物体在旋转，而是我们的相机（还记得上一节中说的相机吗）在围绕物体旋转，就像电影中的镜头拉近一样，是相机在动，不是物体在动，所以，在Threejs中要想让我们的物探动起来，我们需要引入一个轨道控制器(OrbitControls),它可以使得相机围绕目标进行轨道运动，下面我们来实现下 1.导入轨道控制器OrbitControls OrbitControls是ThreeJS的一个扩展库，其本身不在threejs的基础库里面，其位于threejs—examples—jsm—controls文件夹下面，我们在上一节引入threeJS的下面添加如下代码进行引入

"three/addons/": "../../three.js/examples/jsm/"

完整代码如下

<script type="importmap">
    {
      "imports":{
        "three":"../../three.js/build/three.module.js",
        "three/addons/": "../../three.js/examples/jsm/"

      }
    }
  </script>

2.在index.js中使用导入OrbitControls

// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

3.创建一个轨道控制器对象

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera,renderer.domElement)

轨道控制器对象里面有两个参数，第一个是你要控制的是哪一个相机，第二个是用于事件监听的HTML元素，也就是你要控制的范围。 4.相机设置完成后，我们运行浏览器，点击鼠标控制物体发现物体依然没有旋转，这是因为我们虽然用鼠标控制物体旋转了，但是我们的画布没有重新渲染导致的，我们前面提到过，要想将场景中物体展示到容器中，需要用渲染器进行渲染后展示，所以，我们还需要通过监听事件来监听OrbitControls的change事件，在监听到OrbitControls的change事件改变时，我们重新渲染场景就可以了

// 监听轨道控制器的change事件，监听到改变时，重新执行渲染操作渲染三维场景
controls.addEventListener('change',function(){
  renderer.render(scene,camera)
})

现在我们通过鼠标来控制物体放大缩小、旋转移动都可以了。

附上完整代码如下 index.html的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #webgl {
      width: 400px;
      height: 300px;
      margin: 0 auto;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div id="webgl" ></div>
  <script type="importmap">
    {
      "imports":{
        "three":"../../three.js/build/three.module.js",
        "three/addons/": "../../three.js/examples/jsm/"

      }
    }
  </script>
  <script type="module" src="./index.js">
  </script>
</body>
</html>

index.js的代码如下

import * as THREE from 'three'
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

// 创建一个三维场景，相当于一个画布
const scene = new THREE.Scene()

// 创建一个几何体，相当于在画布上想要呈现的物体
const geometry = new THREE.BoxGeometry(50,50,50)

// 创建材质，相当于画画时的颜料
const material = new THREE.MeshBasicMaterial({
  color:0xff0000,//设置颜色
  transparent:true,//开启透明
  opacity:0.5//设置透明度
})
// 添加辅助坐标轴
// const axeshelper = new THREE.AxesHelper(100)
// scene.add(axeshelper)

// 创建物体,相当于在画物体的过程，将上面的几何体和材质结合起来形成物体
const mesh = new THREE.Mesh(geometry,material)
// 设置物体在场景中的位置
mesh.position.set(0,10,0)
// 将物体添加到场景中，相当于将物体添加到画布汇总
scene.add(mesh)
// console.log(mesh);

// 创建一个相机，相机相当于画家的眼睛，
// PerspectiveCamera 透视相机：有四个参数，fov：视角，aspect:宽高比，一般定位为相机照射物体的宽高比值，
// near：近端点，离相机最近的点，far：远端点，离相机最远的点
const width = 400
const height = 300
const camera = new THREE.PerspectiveCamera(30,width/height,0.1,3000)
// 设置相机的位置，即画家的眼睛离画布的位置
camera.position.set(200,200,200)
// 设置相机要看的位置，即眼睛要看的物体的位置
// 相机看原点
// camera.lookAt(0,0,0)
// 相机看向物体
camera.lookAt(mesh.position)
// 创建webgl渲染器
const renderer = new THREE.WebGLRenderer()
// canvas画布宽高
renderer.setSize(width,height)
// 执行渲染操作，将scene和camera关联起来，
// 相当于太阳，你有一个空间scene，空间中有物体，有人的眼睛camera，但是没有光是看不到物体的
renderer.render(scene,camera)
// 把渲染结果canvas画布，添加到网页上
// document.body.appendChild(renderer.domElement)
document.getElementById('webgl').appendChild(renderer.domElement)

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera,renderer.domElement)
// 监听轨道控制器的change事件，监听到改变时，重新执行渲染操作渲染三维场景
controls.addEventListener('change',function(){
  renderer.render(scene,camera)
})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-04-01，如有侵权请联系 cloudcommunity@tencent.com 删除

渲染