<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>
                    使用轨道控件OrbitControls控制相机1.demo效果2.OrbitControls介绍3. 实现要点3.1 vue中引入OrbitControls控制器3.2 创建轨道控件实例3.3 render中更新轨道控件4. demo代码1.demo效果如上图，该demo通过轨道控件OrbitControls控制相机。实现按住鼠标左键旋转物体，按住鼠标右键平移物体，滚动滚轮缩放物体，还可以通过方向键移动物体位置2.OrbitControls介绍通过轨道控件OrbitControls 可以实现按住鼠
				
OrbitUnlimitedControls
 的相机控制器，解决了一些其他广泛使用的控制器的一些局限性：
 对于环视场景，OrbitControls是常见的选择。 但是通过垂直移动鼠标可以实现旋转的限制：相机不能“越过北极”或“越过南极”。
 TrackballControls没有此限制。 然而，它受到围绕视轴的“扭曲”的困扰，该扭曲在交互过程中逐渐累积，并使其难以返回到原始方向。 它还不会在每次相机移动时都发出change事件，因此更新渲染以反映相机移动需要使用 。
 OrbitUnlimitedControls没有这些限制。 它旨在实现OrbitControls的API（或至少该API的最重要部分），因此可以用作该控制器的简单替代品。
OrbitUnlimitedControls(object : Camera, domElement : HTMLDOMElement)
				
附带一个可用的OrbitControls.js
http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>three.js使用OrbitControls.js控制几何体旋转、平移、缩放</title&
Three.js ( Javascript 3D library ) 是基于原生WebGL封装运行的三维引擎，WebGL可以看成是浏览器给我们提供的接口，在JavaScript中可以直接用这些API进行3D图形的绘制；而Three.js它封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能，让你不必要再从底层WebGL开始写起。 Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。
Three.js开发3D应用，通常包括渲染器（Renderer）、场景（Scene）、照
domElement： 可选的，指定在特定的元素(例如画布 renderer.domElement)上工作
autoRotate: Boolean 默认false。设定为true时，相机自动围绕目标旋转但必须在animation中循环调用update()；
autoRotateSpeed: Float 当前者为true时
轨道控制器OrbitControls.js是一个相当神奇的控件，用它可以实现场景用鼠标交互，让场景动起来，控制场景的旋转、平移，缩放，下面介绍轨道控制器的代码实现方式：
//添加轨道控制器
//新建一个轨道控制器
orbitControls = new THREE.OrbitControls(camera, rende...
 * @author qiao / https://github.com/qiao
 * @author mrdoob / http://mrdoob.com
 * @author alteredq / http://alteredqualia.com/
 * @author WestLangley / http://github.com/WestLangl...
				
因为OrbitControls控制器控制的是相机移动，移动后旋转的也是相机，观察物体时移动后旋转会跑到其他位置，做了一点小修改使之变为物体自身旋转。
THREE.OrbitControls = function (object, domElement) {
    this.object = object;
    var model = null;
    this.model = model...
				
最近在学习threejs，因为都是在html写的，所以自己想结合vue去实现threejs的3D模型，然后遇到了许多坑[说多了都是泪]
其他的坑就不多说了
下面实现一下引入OrbitControls控制模型
参考了Beam007博主的方法
安装imports-loader and exports-loader(用于向一个模块的作用域内注入变量、从模块中导出变量)npm install impor...
				
这个资源是我自己在CSDN上的视频课程的源代码，课程地址：https://download.csdn.net/course/detail/37135      
购买源代码者，如果有不懂的地方可以私信我，我可以协助购买者把项目跑起来，并且回答购买者提出的问题。
凡盗版者，追究到底！
				
OrbitControls缩放阻尼作用
OrbitControls.js旋转时可以添加阻尼作用，这样鼠标或手机操作时会比较灵动，OrbitControls.js自带旋转的阻尼参数，enableDamping设置是否有阻尼作用，dampingFactor为阻尼系数，这个阻尼只对旋转操作有作用，缩放没有作用。
我们自己可以添加缩放操作的阻尼作用，需要更改的代码如下（红色为添加代码）：
（1）添加