three.js环境贴图存在哪里啊?
·
之前学习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;
});
更多推荐
所有评论(0)