three.js使用轨道控件OrbitControls控制相机(vue中使用three.js65)

1.demo效果

如上图，该demo通过轨道控件OrbitControls控制相机。实现按住鼠标左键旋转物体，按住鼠标右键平移物体，滚动滚轮缩放物体，还可以通过方向键移动物体位置

2.OrbitControls介绍

通过轨道控件OrbitControls 可以实现按住鼠标左键旋转物体，按住鼠标右键平移物体，滚动滚轮缩放物体，还可以通过方向键移动物体位置

OrbitControls操控说明
以下是操控和动作的比对说明

3. 实现要点

3.1 vue中引入OrbitControls控制器

在项目工程中引入OrbitControls控制器如下

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

3.2 创建轨道控件实例

// 创建轨道控制器
createControls() {this.clock = new THREE.Clock() // 创建THREE.Clock对象，用于计算上次调用经过的时间this.controls = new OrbitControls(this.camera, this.renderer.domElement)this.controls.autoRotate = true // 是否自动旋转
}

3.3 render中更新轨道控件

render() {const delta = this.clock.getDelta() //获取自上次调用的时间差this.controls.update(delta) // 相机更新this.renderer.render(this.scene, this.camera)requestAnimationFrame(this.render)
}

4. demo代码

<template><div id="container" />
</template><script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
export default {data() {return {earchMesh: null,camera: null,scene: null,renderer: null,controls: null}},mounted() {this.init()},methods: {// 初始化init() {this.createScene() // 创建场景this.createModels() // 创建模型this.createLight() // 创建光源this.createCamera() // 创建相机this.createRender() // 创建渲染器this.createControls() // 创建控件对象this.render() // 渲染},// 创建场景createScene() {this.scene = new THREE.Scene()},// 创建模型createModels1() {const publicPath = process.env.BASE_URLconst planetTexture = THREE.ImageUtils.loadTexture(`${publicPath}textures/planets/Earth.png`)const specularTexture = THREE.ImageUtils.loadTexture(`${publicPath}textures/planets/EarthSpec.png`)const normalTexture = THREE.ImageUtils.loadTexture(`${publicPath}textures/planets/EarthNormal.png`)const planetMaterial = new THREE.MeshPhongMaterial()planetMaterial.specularMap = specularTexture// planetMaterial.specular = new THREE.Color(0xff0000)planetMaterial.shininess = 2planetMaterial.normalMap = normalTextureplanetMaterial.map = planetTexture// planetMaterial.shininess = 150const sphereGeom = new THREE.SphereGeometry(20, 40, 40)this.earchMesh = new THREE.Mesh(sphereGeom, planetMaterial)this.scene.add(this.earchMesh)},createModels() {const publicPath = process.env.BASE_URLconst planetTexture = THREE.ImageUtils.loadTexture(`${publicPath}textures/planets/mars_1k_color.jpg`)const normalTexture = THREE.ImageUtils.loadTexture(`${publicPath}textures/planets/mars_1k_normal.jpg`)const planetMaterial = new THREE.MeshPhongMaterial()planetMaterial.map = planetTextureplanetMaterial.bumpMap = normalTexture// planetMaterial.shininess = 50const sphereGeom = new THREE.SphereGeometry(20, 40, 40)this.earchMesh = new THREE.Mesh(sphereGeom, planetMaterial)this.scene.add(this.earchMesh)},// 创建光源createLight() {// 环境光const ambientLight = new THREE.AmbientLight(0x111111) // 创建环境光this.scene.add(ambientLight) // 将环境光添加到场景const directionLight = new THREE.DirectionalLight(0xffffff)directionLight.position.set(-20, 30, 40)directionLight.intensity = 1.5this.scene.add(directionLight)},// 创建相机createCamera() {const element = document.getElementById('container')const width = element.clientWidth // 窗口宽度const height = element.clientHeight // 窗口高度const k = width / height // 窗口宽高比// PerspectiveCamera( fov, aspect, near, far )this.camera = new THREE.PerspectiveCamera(45, k, 0.1, 1000)this.camera.position.set(30, 30, 30) // 设置相机位置this.camera.lookAt(new THREE.Vector3(0, 0, 0)) // 设置相机方向this.scene.add(this.camera)},// 创建渲染器createRender() {const element = document.getElementById('container')this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸this.renderer.shadowMap.enabled = true // 显示阴影// this.renderer.shadowMap.type = THREE.PCFSoftShadowMapthis.renderer.setClearColor(0x000000, 1) // 设置背景颜色element.appendChild(this.renderer.domElement)},render() {const delta = this.clock.getDelta() // 获取自上次调用的时间差this.controls.update(delta) // 相机更新this.renderer.render(this.scene, this.camera)requestAnimationFrame(this.render)},// 创建轨道控制器createControls() {this.clock = new THREE.Clock() // 创建THREE.Clock对象，用于计算上次调用经过的时间this.controls = new OrbitControls(this.camera, this.renderer.domElement)this.controls.autoRotate = true // 是否自动旋转}}
}
</script><style>
#container {position: absolute;width: 100%;height: 100%;
}
</style>