three.js 纹理贴图进阶
基础篇：three.js 基础认识与简单应用
纹理贴图：three.js 纹理贴图的使用
一、CubeTextureLoader--添加场景背景
示例：运行结果如下图
代码与详解如下：
主要代码：
/**
* 设置cube纹理加载器--环境贴图
*/
const cubeTextureLoader = new THREE.CubeTextureLoader();
// 参数为6个方向的图片
const envMapTexture = cubeTextureLoader
.setPath("static/textures/environmentMaps/3/")
.load(["px.jpg", "nx.jpg", "py.jpg", "ny.jpg", "pz.jpg", "nz.jpg"]);
// 给场景添加背景
scene.background = envMapTexture;
// 给场景中的所有物体添加默认的环境贴图
scene.environment = envMapTexture;
全部代码：
/*
* @Description: 详解环境贴图--CubeTextureLoader--添加场景背景
*/
import * as THREE from "three";
// 导入轨道控制器(鼠标控制)
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
/*
*1. 创建场景
*/
const scene = new THREE.Scene();
/*
* 2.创建相机(这里是 透视摄像机--用来模拟人眼所看到的景象)
*/
const camera = new THREE.PerspectiveCamera(
75, // 视野角度
window.innerWidth / window.innerHeight, // 长宽比
0.1, // 进截面
1000 // 远截面
);
// 设置相机位置
camera.position.set(7, 7, 7);
scene.add(camera); // 将相机添加到场景中
/**
* 设置cube纹理加载器--环境贴图
*/
const cubeTextureLoader = new THREE.CubeTextureLoader();
// 参数为6个方向的图片
const envMapTexture = cubeTextureLoader
.setPath("static/textures/environmentMaps/3/")
.load(["px.jpg", "nx.jpg", "py.jpg", "ny.jpg", "pz.jpg", "nz.jpg"]);
/*
* 添加物体
*/
// 创建几何体
const sphereGeometry = new THREE.SphereBufferGeometry(1, 20, 20);
// 设置材质
const material = new THREE.MeshStandardMaterial({
metalness: 0.7, // 金属材质
roughness: 0.1, // 光滑度
// 环境贴图 如果存在scene.environment = envMapTexture;这里可以不写
// envMap: envMapTexture,
});
// 生成几何体
const sphere = new THREE.Mesh(sphereGeometry, material);
scene.add(sphere);
// 给场景添加背景
scene.background = envMapTexture;
// 给场景中的所有物体添加默认的环境贴图
scene.environment = envMapTexture;
/**
* 灯光
*/
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
// 直线光源（平行光）
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
// 设置平行光的位置
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);
/**
* 3.初始化渲染器
*/
const renderer = new THREE.WebGL1Renderer();
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);
/**
* 创建轨道控制器（OrbitControls）
* 可以使得相机围绕目标进行轨道运动
*/
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真是效果，必须在动画循环render()中调用update()
controls.enableDamping = true;
// controls.autoRotate = true;
// controls.autoRotateSpeed = 2; // 自转速度
/**
* 辅助三维坐标系
* 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
*/
var axesHelper = new THREE.AxesHelper(7);
scene.add(axesHelper);
// 定义循环渲染方法
function render() {
renderer.render(scene, camera); // 执行渲染操作
controls.update(); // 加不加都行
requestAnimationFrame(render); // 渲染下一帧的时候就会调用render函数
}
render();
// 监听尺寸变化实现自适应画面
window.addEventListener("resize", () => {
// console.log("画面变化了");
// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
// 更新摄像机的投影矩阵
camera.updateProjectionMatrix();
// 更新渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置渲染器的像素比
renderer.setPixelRatio(window.devicePixelRatio);
});
二、经纬线映射贴图与HDR--导入RGBELoader模块
示例：运行结果如下图
代码与详解如下：
主要代码：
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
// 加载hdr环境图
const rgbeLoader = new RGBELoader();
// 异步加载
rgbeLoader.loadAsync("static/textures/hdr/002.hdr").then((texture) => {
// 经纬线映射贴图 -- 针对球体 实现周围环境渲染
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture; // 设置场景环境
scene.environment = texture; // 设置环境贴图
});
全部代码：
/*
* @Description: 经纬线映射贴图与HDR--导入RGBELoader模块
*/
import * as THREE from "three";
// 导入轨道控制器(鼠标控制)
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
// 加载hdr环境图
const rgbeLoader = new RGBELoader();
// 异步加载
rgbeLoader.loadAsync("static/textures/hdr/002.hdr").then((texture) => {
// 经纬线映射贴图 -- 针对球体 实现周围环境渲染
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture; // 设置场景环境
scene.environment = texture; // 设置环境贴图
});
/*
*1. 创建场景
*/
const scene = new THREE.Scene();
/*
* 2.创建相机(这里是 透视摄像机--用来模拟人眼所看到的景象)
*/
const camera = new THREE.PerspectiveCamera(
75, // 视野角度
window.innerWidth / window.innerHeight, // 长宽比
0.1, // 进截面
1000 // 远截面
);
// 设置相机位置
camera.position.set(7, 7, 7);
scene.add(camera); // 将相机添加到场景中
/**
* 设置cube纹理加载器--环境贴图
*/
// const cubeTextureLoader = new THREE.CubeTextureLoader();
// const envMapTexture = cubeTextureLoader.load([
// "static/textures/environmentMaps/1/px.jpg",
// "static/textures/environmentMaps/1/nx.jpg",
// "static/textures/environmentMaps/1/py.jpg",
// "static/textures/environmentMaps/1/ny.jpg",
// "static/textures/environmentMaps/1/pz.jpg",
// "static/textures/environmentMaps/1/nz.jpg",
// ]);
/*
* 添加物体
*/
// 创建几何体
const sphereGeometry = new THREE.SphereBufferGeometry(1, 20, 20);
// 设置材质
const material = new THREE.MeshStandardMaterial({
metalness: 0.7, // 金属材质
roughness: 0.1, // 光滑度
// 环境贴图 如果存在scene.environment = envMapTexture;这里可以不写
// envMap: envMapTexture,
});
// 生成几何体
const sphere = new THREE.Mesh(sphereGeometry, material);
scene.add(sphere);
// 给场景添加背景
// scene.background = envMapTexture;
// // 给场景中的所有物体添加默认的环境贴图
// scene.environment = envMapTexture;
/**
* 灯光
*/
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
// 直线光源（平行光）
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
// 设置平行光的位置
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);
/**
* 3.初始化渲染器
*/
const renderer = new THREE.WebGL1Renderer();
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);
/**
* 创建轨道控制器（OrbitControls）
* 可以使得相机围绕目标进行轨道运动
*/
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真是效果，必须在动画循环render()中调用update()
controls.enableDamping = true;
// controls.autoRotate = true;
// controls.autoRotateSpeed = 2; // 自转速度
/**
* 辅助三维坐标系
* 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
*/
var axesHelper = new THREE.AxesHelper(7);
scene.add(axesHelper);
// 定义循环渲染方法
function render() {
renderer.render(scene, camera); // 执行渲染操作
controls.update(); // 加不加都行
requestAnimationFrame(render); // 渲染下一帧的时候就会调用render函数
}
render();
// 监听尺寸变化实现自适应画面
window.addEventListener("resize", () => {
// console.log("画面变化了");
// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
// 更新摄像机的投影矩阵
camera.updateProjectionMatrix();
// 更新渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置渲染器的像素比
renderer.setPixelRatio(window.devicePixelRatio);
});