three.js一些其他内容

  // 7. 创建更新动画的方法
  const render = () => {
    // 使用渲染器,通过相机将场景渲染出来
    renderer.render(scene, camera) // render(场景, 相机)
    // 使用动画更新的回调API实现持续更新动画的效果
    requestAnimationFrame(render)
  }
  // 执行创建更新动画的方法
  render()

// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 6. 创建创建一个轨道控制器 实现交互渲染
const controls = new OrbitControls(camera, renderer.domElement) // new OrbitControls(相机, 渲染器Dom元素)

// 设置控制器阻尼 让控制器更真实 设置后需要在动画循环里调用.update()
controls.enableDamping = true
render = () => {
  // 设置阻尼感必须在动画中调用.update()
  controls.update()  
}

// 禁用轨道控制器
controls.enabled = false

//透视投影相机：相机距离目标观察点距离越远显示越小，距离越近显示越大

// 设置控制器的最大距离
controls.maxDistance = 500
// 设置控制器的最小距离
controls.minDistance = 10
//禁止缩放
controls.enableZoom = false;

// 设置最大水平旋转, 弧度值
controls.minAzimuthAngle = -Math.PI / 2 // 最小 -90°
controls.maxAzimuthAngle = Math.PI / 2 // 最大 90

// 上下旋转范围0~120度
controls.minPolarAngle = 0
controls.maxPolarAngle = Math.PI * (120 / 180)

// 如果是一个地面效果, 最多旋转84°, (比直角小一点, 防止重合)
controls.maxPolarAngle = Math.PI / 2 - 0.1

controls.enablePan = false; //禁止右键拖拽

controls.enableRotate = false; //禁止旋转

  // 添加坐标轴辅助器
  const axesHelper = new THREE.AxesHelper(5)
  // 添加到场景中去
  scene.add(axesHelper)

// 导入three.js
import * as THREE from 'three'

export class CreatedUtils  {
  // 通过三维空间包围盒计算物体的大小
  getBoxSize = (object: THREE.Object3D) => {
    // 创建一个包围盒
    const box = new THREE.Box3()
    
    // 设置包围盒的大小
    box.setFromObject(object)
    // 获取包围盒的大小
    const boxSize = box.getSize(new THREE.Vector3())

    console.log(`当前物体的大小(包围盒)`, boxSize)
  }
}

// 导入three.js
import * as THREE from 'three'

// 半球形辅助
const hemisphereLightHelper = new THREE.HemisphereLightHelper(hemisphereLight, 0.2)
scene.add(hemisphereLightHelper)

// 平行光辅助
const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 0.2)
scene.add(directionalLightHelper)'=

// 点光源辅助
const pointLightHelper = new THREE.PointLightHelper(pointLight, 0.2)
scene.add(pointLightHelper)

import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper'
const rectAreaLightHelper = new RectAreaLightHelper(rectAreaLight)
scene.add(rectAreaLightHelper)

const geometry = new THREE.BufferGeometry()
// 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
// 因为在两个三角面片里，这两个顶点都需要被用到。
const vertices = new Float32Array([
  -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0,

  1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0,
])

// itemSize = 3 因为每个顶点都是一个三元组。
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))

const pointsArr = [
  // 三维向量Vector3表示的坐标值
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(0, 100, 0),
  new THREE.Vector3(0, 100, 100),
  new THREE.Vector3(0, 0, 100),
]
// 把数组pointsArr里面的坐标数据提取出来，赋值给`geometry.attributes.position`属性
geometry.setFromPoints(pointsArr)
console.log('几何体变化', geometry.attributes.position)

// 导入汽车模型gltf
import car from '@/assets/car/轿车.gltf'
// 导入外包加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
// 导入three.js
import * as THREE from 'three'

const loader = new GLTFLoader()
// 异步获得加载的模型
const gltf = await loader.loadAsync(car)

// 替换金属内容的材质
gltf.scene.traverse((child) => {
  // 符合mesh类型(只有mesh网格模型类型才有材质)
  if (child.type === 'Mesh') {
    // 如果名称中包含高光金属
    if (child.name.includes('高光金属')) {
      // 修改材质
      const meshOject = child as THREE.Mesh<
        THREE.BufferGeometry,
        THREE.MeshStandardMaterial
      >
      meshOject.material = new THREE.MeshStandardMaterial({
        color: meshOject.material.color,
        metalness: 1.0,
        roughness: 0.2,
      })
    }

    // 如果名称中包含后视镜
    if (child.name.includes('后视镜')) {
      // 修改材质
      const meshOject = child as THREE.Mesh<
        THREE.BufferGeometry,
        THREE.MeshStandardMaterial
      >
      meshOject.material = new THREE.MeshStandardMaterial({
        color: '#ffffff',
        metalness: 1.0,
        roughness: 0.0,
        envMapIntensity: 1.0,
      })
    }
  }
})