上一节我们创建了一个三维的立方体,将其放在了浏览器窗口中,但是目前来讲它只是一个静态的图片,我们并不能通过鼠标控制其旋转、缩放和移动,这一节我们来实现用鼠标控制物体的运动。
首先我们要了解一个概念,在三维场景中,我们要控制物体旋转,实际上不是物体在旋转,而是我们的相机(还记得上一节中说的相机吗)在围绕物体旋转,就像电影中的镜头拉近一样,是相机在动,不是物体在动,所以,在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的代码文章来源:https://www.toymoban.com/news/detail-680460.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的代码如下文章来源地址https://www.toymoban.com/news/detail-680460.html
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)
})
到了这里,关于Threejs入门之三:让物体跟随鼠标动起来的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!