threejs 高频使用点

• 场景 scene 基本操作
  scene 是所有物体 object 的父级元素 ，可对 object 进行增删查

// 添加物体 
scene.add(obj)   // obj 默认放在坐标原点，可通过 obj.position.set() 来设置位置
// 移除物体 
scene.remove(obj)
// 根据 id 或 name 查询 obj
scene.getObjectByName(name);
scene.getObjectById(id);
// 遍历子元素
scene.traverse(obj=>console.log(obj))
// 设置背景
initBackground() {
    var cubeTextureLoader = new THREE.CubeTextureLoader()
    cubeTextureLoader.setPath('textures/cube/skybox/')
    var cubeTexture = cubeTextureLoader.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'])
    this.scene.background = cubeTexture
}

• 物体 Mesh 基本操作

// 加载拥有 mtl 材质的 obj 物体
loadObj(config) {
    const { path } = config
    var objLoader = new OBJLoader() //obj加载器
    var mtlLoader = new MTLLoader() //材质文件加载器
    mtlLoader.setTexturePath(path.substring(0, path.lastIndexOf('/') + 1))
    return new Promise(res => {
      mtlLoader.load(`${path}.mtl`, materials => {
        objLoader.setMaterials(materials)
        objLoader.load(
          `${path}.obj`,
          obj => {
            this.scene.add(obj)
            res(obj)
          },
          xhr => {
            if (xhr.lengthComputable) {
              var percentComplete = (xhr.loaded / xhr.total) * 100
              this.container.querySelector('#loading').innerHTML = `Loading ${percentComplete.toFixed(1)}`
            }
          }
        )
      })
    })
  }
// 设置位置
obj.position.set(x,y,z)
obj.position.x = x
// 设置缩放
obj.scale.set(x,y,z)
obj.scale.x = x
// 设置旋转，初始加载垂直于z轴
obj.rotation.set(弧度，弧度，弧度)
// 设置物体每个部位都可以投影和接收投影
setCastShadowAndReceiveShadow(obj) {
    obj.traverse(function(child) {
      if (child.isMesh) {
        child.castShadow = true
        child.receiveShadow = true
      }
    })
}

• 3d 坐标与 2d 坐标相互转换

// 3d => 2d
getLocalPosition(point) {
    //获取到窗口的一半高度和一半宽度
    const halfWidth = window.innerWidth / 2
    const halfHeight = window.innerHeight / 2
    const vector1 = point.project(this.camera.threeCamera)
    return [vector1.x * halfWidth + halfWidth, -vector1.y * halfHeight + halfHeight]
}
// 3d => 2d
getFirstIntersectObj(event) {
    if (!event) {
      return
    }
    //通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
    this.raycaster = new THREE.Raycaster()
    const mouse = new THREE.Vector2()
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
    // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
    this.raycaster.setFromCamera(mouse, this.camera.threeCamera)
    // 获取raycaster直线和所有模型相交的数组集合
    return this.raycaster.intersectObjects(this.scene.children, true)[0].point
}

• 添加阴影

// 1、告诉渲染器我需要阴影
renderer.shadowMap.enabled = true;
// 2、告诉灯光，我需要阴影：
light.castShadow = true;
// 3、告诉模型哪些需要投射阴影
cube.castShadow = true;
// 4、告诉最底下的平面长方形你要接受阴影
plane.receiveShadow = true;

• 场景切换
  通过设置 obj 的 visible 属性来达到场景切换的效果
• 使用动画

positionAnimate(obj, targetPosition, i) {
    new TWEEN.Tween(obj.position)
      .to(
        {
          x: targetPosition[0],
          y: targetPosition[1],
          z: targetPosition[2]
        },
        2000
      )
      .easing(TWEEN.Easing.Quadratic.Out)
      .delay(200 * i + 1500)
      .start()
  }
  scaleAnimate(obj, targetScale, i) {
    new TWEEN.Tween(obj.scale)
      .to(
        {
          x: targetScale[0],
          y: targetScale[1],
          z: targetScale[2]
        },
        2000
      )
      .easing(TWEEN.Easing.Quadratic.Out)
      .delay(200 * i)
      .start()
  }

• 控制相机移动

• 添加物体选中效果

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js'
//1、添加 EffectComposer，并添加 outlinePass 特效
useEffectComposer() {
    var composer = new EffectComposer(this.renderer.threeRenderer)
    this.composer = composer
    var renderPass = new RenderPass(this.scene, this.camera.threeCamera)
    composer.addPass(renderPass)

    var outlinePass = new OutlinePass(
      new THREE.Vector2(window.innerWidth, window.innerHeight),
      this.scene,
      this.camera.threeCamera
    )
    outlinePass.visibleEdgeColor.set('#b8d2eb')
    outlinePass.hiddenEdgeColor.set('#ebd4cd')
    outlinePass.edgeStrength = 5
    outlinePass.edgeGlow = 1
    outlinePass.edgeThickness = 3
    outlinePass.pulsePeriod = 0
    this.outlinePass = outlinePass
    composer.addPass(outlinePass)
  }
// 2、将 raycaster 选中的物体附加到 outlinePass.selectedObjects 上
 const obj = this.raycaster.intersectObjects(this.scene.children, true)[0]
 this.outlinePass.selectedObjects = [obj.object]

https://blog.csdn.net/qq_30100043/article/category/7003591/1?