Three.js 镜面三维模型展示源码

Ian1025

于 2024-08-29 11:30:39 发布

阅读量15

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Ian1025/article/details/141674392

版权

<script setup>
import * as THREE from 'three';
import { ref, onMounted } from 'vue';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
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';
let screenDom = ref(null);
onMounted(()=>{
  // 创建场景
  let scene = new THREE.Scene();
  // 初始化相机
  let camera = new THREE.PerspectiveCamera(
      75, // 视角
      window.innerWidth / window.innerHeight, // 宽高比
      0.1, // 近平面
      1000 // 远平面
  );
  camera.position.set(0,1.5,6)
  // 创建渲染器
  let renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(screenDom.value.clientWidth, screenDom.value.clientHeight);
  screenDom.value.appendChild(renderer.domElement);
  // 创建辅助坐标轴
  let axesHelper = new THREE.AxesHelper(5);
  scene.add(axesHelper);
  // 添加控制器
  let controls = new OrbitControls(camera, renderer.domElement);
  // 创建rgbe加载器
  let rgbeLoader = new RGBELoader();
  rgbeLoader.load('./textures/sky.hdr', (texture) => {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.background = texture;
    scene.environment = texture;
  })
  // 添加模型
  // 设置解压缩加载器
  const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath('./draco/gltf');
  dracoLoader.setDecoderConfig({ type: 'js' });
  let gltfLoader = new GLTFLoader();
  gltfLoader.setDRACOLoader(dracoLoader);
  gltfLoader.load('./models/xx.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);
  light2.position.set(0, 10, -10);
  let light3 = new THREE.DirectionalLight(0xffffff, 0.8);
  light3.position.set(10, 10, 10);
  scene.add(light1, light2, light3);
  function render(){
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
  render();
})
// 添加视频
let video = document.createElement('video');
video.src = './video/xx.mp4';
video.autoplay = true;
video.loop = true;
video.muted = true;
video.play();
let videoTexture = new THREE.VideoTexture(video);
const videoGeoPlane = new THREE.PlaneGeometry(16 / 9, 1);
const videoMaterial = new THREE.MeshBasicMaterial({ map: videoTexture ,transparent: true,side: THREE.DoubleSide});
const videoMesh = new THREE.Mesh(videoGeoPlane, videoMaterial);
videoMesh.position.set(0, 0.2, 0);
// 旋转一下
videoMesh.rotation.set(-Math.PI / 2, 0, 0);
// 添加镜面反射
let reflectorGeometry = new THREE.PlaneBufferGeometry(100,100);
let reflectorPlane = new Reflector(reflectorGeometry, {
  clipBias: 0.003,
  textureWidth: window.innerWidth * window.devicePixelRatio,
  textureHeight: window.innerHeight * window.devicePixelRatio,
  color: 0x889999,
  recursion: 1
});

</script>
<template>
<div class="canvas" ref="screenDom"> </div>
</template>
<style scoped>
*{
  margin:0;
  padding:0;
}
.canvas{
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
</style>