Threejs贴图为了更好的渲染（门）_threejs door 素材-CSDN博客
各种 Material 介绍：ThreeJs 学习之旅(七)_threejs wireframe-CSDN博客
全景贴图资源网址推荐：Poly Haven
全景贴图hdr转换成贴图： HDRI to CubeMap
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
import * as dat from "dat.gui";
const gui = new dat.GUI();
// Textures
const textureLoader = new THREE.TextureLoader();
const cubeTextureLoader = new THREE.CubeTextureLoader();
const environmentMap = cubeTextureLoader.load([
"/textures/environmentMap/1/px.png",
"/textures/environmentMap/1/nx.png",
"/textures/environmentMap/1/py.png",
"/textures/environmentMap/1/ny.png",
"/textures/environmentMap/1/pz.png",
"/textures/environmentMap/1/nz.png",
]);
const rgbeLoader = new RGBELoader();
const doorColor = textureLoader.load("/textures/door/color.jpg");
const alphaColor = textureLoader.load("/textures/door/alpha.jpg");
const ambientOcclusionColor = textureLoader.load(
"/textures/door/ambientOcclusion.jpg"
);
const doorHeightTexture = textureLoader.load("/textures/door/height.jpg");
const metalnessColor = textureLoader.load("/textures/door/metalness.jpg");
const normalColor = textureLoader.load("/textures/door/normal.jpg");
const roughnessColor = textureLoader.load("/textures/door/roughness.jpg");
const matcaps = textureLoader.load("/textures/matcaps/8.png");
const gradients = textureLoader.load("/textures/gradients/3.jpg");
gradients.minFilter = THREE.NearestFilter;
gradients.magFilter = THREE.NearestFilter;
gradients.generateMipmaps = false;
/**
* Base
*/
// Canvas
const canvas = document.querySelector("canvas.webgl");
// Scene
const scene = new THREE.Scene();
//
// const material = new THREE.MeshBasicMaterial({
// // color:'red'
// // map:doorColor
// })
// material.map = doorColor
// material.wireframe = true
// material.color = new THREE.Color(0xff0000)
// material.transparent = true
// material.opacity = 0.5
// material.alphaMap = doorAlpha
// material.side = THREE.DoubleSide
// const material = new THREE.MeshNormalMaterial()
// material.wireframe = true
// material.flatShading = true
// const material = new THREE.MeshMatcapMaterial()//材质捕捉网格材质
// material.matcap = matcaps
// 深度网格材质(MeshDepthMaterial)
// const material = new THREE.MeshDepthMaterial()
// 下面都是吸光材质
// const material = new THREE.MeshLambertMaterial()//一种非光泽表面的材质，没有镜面高光。
// const material = new THREE.MeshPhongMaterial(); //一种用于具有镜面高光的光泽表面的材质。
// material.specular = new THREE.Color(0xff0000);//镜面高光颜色
// material.shininess = 100;//光泽度
// 卡通
// const material = new THREE.MeshToonMaterial()
//gradientMap 卡通着色的渐变贴图。使用此类纹理时，需要将Texture.minFilter[Texture.minFilter](https://threejs.org/docs/index.html#api/zh/textures/Texture.minFilter "Texture.minFilter")和Texture.magFilter[Texture.magFilter](https://threejs.org/docs/index.html#api/zh/textures/Texture.magFilter "Texture.magFilter")设置为[THREE.NearestFilter](https://threejs.org/docs/index.html#api/zh/constants/Textures "Textures")。默认为空。
// material.gradientMap = gradients;
//标准网格材质，遵循物理原则PBR
const material = new THREE.MeshStandardMaterial(); //标准网格材质，遵循物理原则PBR
material.metalness = 1; //金属感
material.roughness = 0; //粗糙感
// MeshStandardMaterial-金属感粗糙感会影响环境贴图显示
// material.envMap = environmentMap;//几何体贴图
// 场景环境贴图
rgbeLoader.load("/textures/environmentMap/2k.hdr", (environmentMap) => {
environmentMap.mapping = THREE.EquirectangularReflectionMapping;
scene.background = environmentMap;
scene.environment = environmentMap;
});
// material.map = doorColor;
// material.transparent = true;//透明开启，配合alphaMap
// material.alphaMap = alphaColor;//alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。 默认值为null。
// material.aoMap = ambientOcclusionColor; //环境遮挡效果贴图。需要第二组uv2，否则可能渲染不了或者渲染错误
// material.aoMapIntensity = 1; //环境遮挡效果的强度。默认值为1。零是不遮挡效果。
// material.displacementMap = doorHeightTexture; //位移贴图会影响网格顶点的位置，与仅影响材质的光照和阴影的其他贴图不同，移位的顶点可以投射阴影，阻挡其他对象， 以及充当真实的几何体。位移纹理是指：网格的所有顶点被映射为图像中每个像素的值（白色是最高的），并且被重定位。
// material.displacementScale = 0.1;//位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。
// material.metalnessMap = metalnessColor; //该纹理的蓝色通道用于改变材质的金属度。
// material.roughnessMap = roughnessColor; //该纹理的绿色通道用于改变材质的粗糙度。
// material.normalMap = normalColor; //用于创建法线贴图的纹理。RGB值会影响每个像素片段的曲面法线，并更改颜色照亮的方式。法线贴图不会改变曲面的实际形状，只会改变光照。
gui.add(material, "metalness").min(0).max(1).step(0.0001).name("金属感");
gui.add(material, "roughness").min(0).max(1).step(0.0001).name("粗糙感");
gui
.add(material, "aoMapIntensity")
.min(0)
.max(10)
.step(0.0001)
.name("环境遮挡效果");
gui
.add(material, "displacementScale")
.min(0)
.max(10)
.step(0.0001)
.name("位移贴图对网格的影响程度");
// 增加光源
// 环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
// 点光源
// const pointLight = new THREE.PointLight(0xffffff, 20);
// pointLight.position.x = 2;
// pointLight.position.z = 2;
// pointLight.position.y = 2;
// scene.add(pointLight);
//直线光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 4);
directionalLight.position.set(0, 0, 10);
scene.add(directionalLight);
// 球
const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.5, 16, 16), material);
sphere.geometry.setAttribute(
"uv2",
new THREE.BufferAttribute(sphere.geometry.attributes.uv.array, 2)
);
sphere.position.x = -2;
// 平面
const plane = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), material);
console.log("plane", plane.geometry.attributes.uv);
// 第二组uv2
plane.geometry.setAttribute(
"uv2",
new THREE.BufferAttribute(plane.geometry.attributes.uv.array, 2)
);
console.log("uv2", plane.geometry.attributes.uv2);
// 圆环
const torus = new THREE.Mesh(
new THREE.TorusGeometry(0.3, 0.2, 16, 32),
material
);
torus.geometry.setAttribute(
"uv2",
new THREE.BufferAttribute(torus.geometry.attributes.uv.array, 2)
);
torus.position.x = 2;
scene.add(sphere, plane, torus);
/**
* Sizes
*/
const sizes = {
width: window.innerWidth,
height: window.innerHeight,
};
window.addEventListener("resize", () => {
// Update sizes
sizes.width = window.innerWidth;
sizes.height = window.innerHeight;
// Update camera
camera.aspect = sizes.width / sizes.height;
camera.updateProjectionMatrix();
// Update renderer
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});
/**
* Camera
*/
// Base camera
const camera = new THREE.PerspectiveCamera(
75,
sizes.width / sizes.height,
0.1,
100
);
camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 4;
camera.lookAt(sphere);
scene.add(camera);
// Controls
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
/**
* Animate
*/
const clock = new THREE.Clock();
const tick = () => {
const elapsedTime = clock.getElapsedTime();
sphere.rotation.y = 0.1 * elapsedTime;
plane.rotation.y = 0.1 * elapsedTime;
torus.rotation.y = 0.1 * elapsedTime;
sphere.rotation.x = 0.15 * elapsedTime;
plane.rotation.x = 0.15 * elapsedTime;
torus.rotation.x = 0.15 * elapsedTime;
// Update controls
controls.update();
// Render
renderer.render(scene, camera);
// Call tick again on the next frame
window.requestAnimationFrame(tick);
};
tick();
