@google/model-viewer 导入 改纹理 （http-serve）

导入模型 改纹理

 效果图

<template>
  <div>
    <h1>鞋模型</h1>
    <model-viewer
      style="width: 300px; height: 300px"
      id="my-replace-people"
      src="/imgApi/Astronaut.glb"
      auto-rotate
      camera-controls
    >
    </model-viewer>
    <h1>图片贴到模型上</h1>
    <div class="example-wrapper">
      <model-viewer
        id="my-replace-shop"
        src="/imgApi/scene.gltf"
        auto-rotate
        camera-controls
      >
        <div class="controls" id="color-controls">
          <button data-color="#ff0000">Red</button>
          <button data-color="#00ff00">Green</button>
          <button data-color="#0000ff">Blue</button>
          <button data-color="#ffffff">White</button>
        </div>
        <div id="progress-bar"></div>
        <!-- <template #progress-bar></template> -->
      </model-viewer>
    </div>
    <h1>原模型</h1>
    <!-- src="/imgApittps://res.theuniquer.com/pgc-models/picture.gltf" -->
    <model-viewer
      src="/imgApi/pgc-models_picture.gltf"
      auto-rotate
      camera-controls
    >
    </model-viewer>
    <h1>原图片</h1>
    <img
      style="width: 100%; height: 100px; object-fit: contain"
      src="/imgApi/tietu.jpg"
      alt=""
    />
    <h1>图片贴到模型上</h1>
    <div class="example-wrapper">
      <model-viewer
        id="my-replace-texture"
        src="/imgApi/pgc-models_picture.gltf"
        auto-rotate
        camera-controls
      >
      </model-viewer>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import Hammer from "hammerjs";
import { useEventListener } from "@vueuse/core";
import "@google/model-viewer";

const modelContainer = new THREE.Object3D();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
// 在创建渲染器时，添加antiallias:true抗锯齿，让模型看起来更加平滑
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
// 设置画布分辨率 提高画质
renderer.setPixelRatio(window.devicePixelRatio);
const loader = new GLTFLoader();
let model = null;

// 光源设置
// const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光
// scene.add(ambientLight);

// const pointLight = new THREE.PointLight(0xffffff, 1); // 点光源
// pointLight.position.set(10, 10, 10);
// scene.add(pointLight);

// 环境光 (这是一定要的)
const ambientLight = new THREE.AmbientLight(0xffffff, 2);
// scene.add(ambientLight);

// 白色平行光(模型更明亮)
const directionalLight = new THREE.DirectionalLight(0xffffff, 2); // 参数自行调整
directionalLight.position.x = 1;
directionalLight.position.y = 1;
directionalLight.position.z = 80;
directionalLight.target = modelContainer; // target指向模型
scene.add(directionalLight);

// *创建点光源(这个看情况给)
var pointLight = new THREE.PointLight(0xffffff, 500); // 设置点光源的颜色和强度
pointLight.position.set(0, 0, 100); // 设置点光源的位置
scene.add(pointLight);

// 设置阴影
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

// 初始化 Three.js 相关设置
camera.position.z = 5;
renderer.setSize(window.innerWidth, window.innerHeight);

function initControls() {
  const controls = new OrbitControls(camera, renderer.domElement);
  // 如果使用animate方法时，将此函数删除
  //controls.addEventListener( 'change', render );
  // 使动画循环使用时阻尼或自转 意思是否有惯性
  controls.enableDamping = true;
  //动态阻尼系数 就是鼠标拖拽旋转灵敏度
  //controls.dampingFactor = 0.25;
  //是否可以缩放
  controls.enableZoom = true;
  //是否自动旋转
  // controls.autoRotate = true;
  controls.autoRotateSpeed = 0.5;
  //设置相机距离原点的最远距离
  // controls.minDistance  = 1;
  //设置相机距离原点的最远距离
  controls.maxDistance = 2000;
  //是否开启右键拖拽
  controls.enablePan = true;
}

// 加载模型
loader.load("/imgApi/Astronaut.glb", (gltf) => {
  model = gltf.scene;
  model.castShadow = true; // 模型投射阴影
  scene.add(model);
});

// 设置容器
const container = ref(null);

onMounted(() => {
  const fn = async (modelViewer) => {
    const targetMaterial = modelViewer.model.materials.find(
      (material) => material.name == "Center"
    ); //找到材质

    console.log("targetMaterial=");
    console.log(modelViewer.model);
    console.log(modelViewer.model.materials);
    console.log(targetMaterial);
    const targetTexture = await modelViewer.createTexture(
      "/imgApi/red-huawen.jpg"
    ); // 用图片创建纹理
    targetMaterial.pbrMetallicRoughness.baseColorTexture.setTexture(
      targetTexture
    );
  };
  const modelViewer = document.querySelector(
    "model-viewer#my-replace-texture"
    // "model-viewer#my-replace-shop"
  );
  modelViewer.addEventListener("load", () => {
    fn(modelViewer);
  });

  const modelViewerColor = document.querySelector(
    "model-viewer#my-replace-shop"
  );
  const loadingText = document.getElementById("progress-bar");
  const modelViewerPle = document.querySelector("#my-replace-people");
  modelViewerPle.addEventListener("progress", (event) => {
    const loaded = event.detail.totalProgress;
    console.log("loading-->");
    console.log(`${(loaded * 100).toFixed(0)}%`);
    if (loadingText) loadingText.innerHTML = `${(loaded * 100).toFixed(0)}%`;
    // loadingText.textContent = `${(loaded * 100).toFixed(0)}%`;
  });
  modelViewerPle.addEventListener("load", async () => {
    const targetMaterial = modelViewerPle.model.materials.find(
      (material) => material.name == "Center"
    ); //找到材质
    console.log("modelViewerPle----->");
    console.log(modelViewerPle);
    console.log(modelViewerPle.model);
    console.log(modelViewerPle.model.materials);
    setTimeout(() => {
      loadingText.style.display = "none";
    }, 100);
    const targetTexture = await modelViewer.createTexture(
      "/imgApi/red-huawen.jpg"
    ); // 用图片创建纹理
    const [material] = modelViewerPle.model.materials;
    material.pbrMetallicRoughness.baseColorTexture.setTexture(targetTexture);
  });

  modelViewerColor.addEventListener("load", async () => {
    const targetMaterial = modelViewerColor.model.materials.find(
      (material) => material.name == "Center"
    ); //找到材质
    console.log("modelViewerColor----->");
    console.log(modelViewerColor);
    console.log(modelViewerColor.model);
    console.log(modelViewerColor.model.materials);
    const targetTexture = await modelViewer.createTexture(
      "/imgApi/red-huawen.jpg"
    ); // 用图片创建纹理
    const [material] = modelViewerColor.model.materials;
    material.pbrMetallicRoughness.baseColorTexture.setTexture(targetTexture);
  });

  // const targetMateriaShop = modelViewerColor.model.materials.find(
  //     (material) => material.name == "Center"
  //   ); //找到材质

  document
    .querySelector("#color-controls")
    .addEventListener("click", (event) => {
      const colorString = event.target.dataset.color;
      const [material] = modelViewerColor.model.materials;
      material.pbrMetallicRoughness.setBaseColorFactor(colorString);
    });
});
</script>

<style scoped>
.example-wrapper model-viewer {
  width: 50vw;
  height: 50vh;
  margin: 20vh auto 0;
  background-color: #fff;
}
</style>