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