threejs项目篇 之 实现酷炫机器人展示

安装

• yarn add three gsap

App.vue

<template>
  <div class="canvas-container" ref="canvasDom"></div> 
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from "three"
// 导入轨道控制器 - 控制物体的左右上下移动（ 可以设置xyz轴 ）
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 导入gltf载入库 - 用于创出模型
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { Reflector } from "three/examples/jsm/objects/Reflector";
import gsap from "gsap";

let canvasDom = ref(null)
onMounted(()=>{
  // 初始化场景
  const scene = new THREE.Scene()
  // 初始化相机 - 透视相机
  const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000)
  // 设置相机位置 x y z
  camera.position.set(0, 1.5, 6) 
  // 更新相机矩阵
  camera.updateProjectionMatrix()
  // 把相机添加到场景之中
  scene.add( camera );

  // 设置渲染器
  const renderer = new THREE.WebGL1Renderer({
    // 设置抗锯齿 - 更理想的渲染
    antialias:true,
  })

  // 设置渲染的尺寸大小
  renderer.setSize(canvasDom.value.clientWidth, canvasDom.value.clientHeight)
  canvasDom.value.appendChild(renderer.domElement) // 添加dom节点
  renderer.outputEncoding = THREE.sRGBEncoding; // 设置编码

  // 创建辅助坐标
  const gridHelper = new THREE.GridHelper(5)
  scene.add(gridHelper)

  // 创建轨道控制器
  let controls = new OrbitControls(camera,renderer.domElement)
  controls.enableDamping = true
  controls.update()

  // 创建rgbe加载器
  let hdrLoader = new RGBELoader();
  hdrLoader.load("./assets/sky12.hdr", (texture) => {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.background = texture;
    scene.environment = texture;
  });

  // 添加机器人
  // 设置解压缩的加载器
  let dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath("./draco/gltf/");
  dracoLoader.setDecoderConfig({ type: "js" });
  let gltfLoader = new GLTFLoader();
  gltfLoader.setDRACOLoader(dracoLoader);
  gltfLoader.load("./assets/robot.glb", (gltf) => {
    scene.add(gltf.scene);
  });

  // 添加直线光
  let light1 = new THREE.DirectionalLight(0xffffff, 0.3);
  light1.position.set(0, 10, 10);
  let light2 = new THREE.DirectionalLight(0xffffff, 0.3);
  light1.position.set(0, 10, -10);
  let light3 = new THREE.DirectionalLight(0xffffff, 0.8);
  light1.position.set(10, 10, 10);
  scene.add(light1, light2, light3);

  // 添加光阵
  let video = document.createElement("video");
  video.src = "./assets/zp2.mp4";
  video.loop = true;
  video.muted = true;
  video.play();
  let videoTexture = new THREE.VideoTexture(video);
  const videoGeoPlane = new THREE.PlaneBufferGeometry(8, 4.5);
  const videoMaterial = new THREE.MeshBasicMaterial({
    map: videoTexture,
    transparent: true,
    side: THREE.DoubleSide,
    alphaMap: videoTexture,
  });
  const videoMesh = new THREE.Mesh(videoGeoPlane, videoMaterial);
  videoMesh.position.set(0, 0.2, 0);
  videoMesh.rotation.set(-Math.PI / 2, 0, 0);
  scene.add(videoMesh);

  // 添加镜面反射 
  let reflectorGeometry = new THREE.PlaneBufferGeometry(100, 100);
  let reflectorPlane = new Reflector(reflectorGeometry, {
    textureWidth: window.innerWidth,
    textureHeight: window.innerHeight,
    color: 0x332222,
  });
  reflectorPlane.rotation.x = -Math.PI / 2;
  scene.add(reflectorPlane);

  // 渲染函数 - 每一帧渲染一次
  function render() {
    // 渲染下一帧 的时候 会调用 animate 函数
    requestAnimationFrame( render );
    renderer.render( scene, camera );
    controls && controls.update() // 控制器的更新
  }
  render()

  // 监听画面变化，更新渲染画面
  window.addEventListener("resize", () => {
    // 更新摄像头
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新摄像机的投影矩阵
    camera.updateProjectionMatrix();
    // 更新渲染器
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 设置渲染器的像素比
    renderer.setPixelRatio(window.devicePixelRatio);
  });
})
</script>

<style lang="scss" scoped>
* {
  padding:0;
  margin: 0;
}
.canvas-container {
  width: 100vh;
  height: 100vh;
}
</style>

效果