导入模型 改纹理

 效果图

  
    
鞋模型
    
    
    
图片贴到模型上
    
      
        
          Red
          Green
          Blue
          White
        
        
        
      
    
    
原模型
    
    
    
    
原图片
    
图片贴到模型上
    
      
      
    
  


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);
    });
});


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