之前学习three的时候发现环境贴图必须放在public文件下才能正常展示环境贴图,但是这样vscode又会报警告

Files in the public directory are served at the root path.
Instead of /public/手机模型/normal.png, use /手机模型/normal.png.

不影响执行但是强迫症好难受,大佬谁来解释下

//创建场景
const scene = new THREE.Scene();
//创建元素
const geometry = new THREE.SphereGeometry(50, 50);

const loadTex = new THREE.TextureLoader();
console.log(loadTex);
// const texture = loadTex.load(pic);

const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);

// const ambient=new THREE.AmbientLight(0xffffff,0.4);
// scene.add(ambient);

const loader = new GLTFLoader();

var textureCube = new THREE.CubeTextureLoader()
  .setPath("../../../public/环境贴图4/")
  .load(["px.jpg", "nx.jpg", "py.jpg", "ny.jpg", "pz.jpg", "nz.jpg"]);
var gltfScene = null; //产品模型对象
loader.load("../../../public/手机模型/手机.gltf", function (gltf) {
  gltfScene = gltf.scene;
  console.log("模型", gltf.scene);
  scene.add(gltf.scene); //手机产品三维模型添加到场景中
  var mesh = gltfScene.getObjectByName("手机");
  var texLoader = new THREE.TextureLoader(); //纹理贴图加载器
  console.log("mesh", mesh);
  mesh.material = new THREE.MeshStandardMaterial({
    metalness: 1.0, //mesh表面金属度
    roughness: 1.0, //mesh表面粗糙度
    map: texLoader.load("../../../public/手机模型/basecolor.png"), //颜色贴图
    roughnessMap: texLoader.load("../../../public/手机模型/roughness.png"), //粗糙度贴图
    metalnessMap: texLoader.load("../../../public/手机模型/metallic.png"), //金属度贴图
    // 相机镜头等位置需要设置半透明效果(设置alphaMap和transparent属性)
    alphaMap: texLoader.load("../../../public/手机模型/opacity.png"), //alpha贴图
    normalMap: texLoader.load("../../../public/手机模型/normal.png"), //法线贴图
    transparent: true,//开放透明度
    envMap: textureCube, //设置pbr材质环境贴图,渲染效果更好
    envMapIntensity: 0.9, //设置环境贴图对模型表面影响程度
  });
  // 纹理朝向texture.flipY
  mesh.material.map.flipY = false;
  mesh.material.normalMap.flipY = false;
  mesh.material.metalnessMap.flipY = false;
  mesh.material.roughnessMap.flipY = false;
  mesh.material.alphaMap.flipY = false;
});
Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐