使用vue学习three.js之移动相机-使用轨道控件OrbitControls控制相机

Posted 点燃火柴

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用vue学习three.js之移动相机-使用轨道控件OrbitControls控制相机相关的知识,希望对你有一定的参考价值。

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_URL
      const 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 = 2

      planetMaterial.normalMap = normalTexture
      planetMaterial.map = planetTexture
      // planetMaterial.shininess = 150
      const 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_URL
      const 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 = planetTexture
      planetMaterial.bumpMap = normalTexture

      // planetMaterial.shininess = 50
      const 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.5
      this.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.PCFSoftShadowMap
      this.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>

以上是关于使用vue学习three.js之移动相机-使用轨道控件OrbitControls控制相机的主要内容,如果未能解决你的问题,请参考以下文章

使用vue学习three.js之移动相机-使用飞行控件FlyControls控制相机

使用vue学习three.js之移动相机-使用第一人称控件FirstPersonControls控制相机

使用vue学习three.js之加载和使用纹理-使用CubeCamera创建反光效果,动态环境贴图实现,立方体全景贴图

three.js 围绕 Y 轴的相机旋转似乎关闭

通过three.js源码学习计算机图形学/webgl系列之camerarendererscene

Three.js 进阶之旅:全景漫游-初阶移动相机版