Threejs之纹理Texture

本文目录

前言
一、Texture的基本概念
- 1.1 定义及作用
- 1.2 常用属性
二、代码及效果
- 2.1 代码
- 2.2 效果

前言

在Three.js中，Texture（纹理）是一项核心功能，创建一个纹理贴图，将其应用到一个表面，或者作为反射/折射贴图。它允许开发者将图像、视频或其他数据源映射到3D场景中的物体表面上，从而增强物体的视觉效果和真实感。
构造函数
Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, colorSpace )
更多关于Texture（纹理）文档请点这列

一、Texture的基本概念

1.1 定义及作用

定义：Texture在Three.js中指的是将一张图像（或其他数据源，如视频、数据数组等）映射到3D场景中的物体表面上的过程。通过Texture，可以在物体表面应用各种图像效果，使物体的外观更加逼真和多样化。
作用：Texture用于模拟物体的外观和材质，如木纹、石纹、金属质感等，从而创建出更加生动和真实的3D场景。

1.2 常用属性

needsUpdate：将其设置为true，以便在下次使用纹理时触发一次更新。这对于设置包裹模式尤其重要。

二、代码及效果

2.1 代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body {margin: 0;padding: 0;width: 100%;height: 100%;}</style>
</head><body><script type="module">// 倒入轨道控制器import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'import * as THREE from "three";// 创建场景const scene = new THREE.Scene();scene.background = new THREE.Color(0xffffff);// 创建相机const camera = new THREE.PerspectiveCamera( // 透视相机45, // 视角 角度数window.innerWidth / window.innerHeight, // 宽高比 占据屏幕0.1, // 近平面（相机最近能看到物体）1000, // 远平面（相机最远能看到物体）);camera.position.set(0, 2, 5);camera.lookAt(0, 0, 0);// 创建渲染器const renderer = new THREE.WebGLRenderer({antialias: true, // 抗锯齿});// 设置渲染器宽高renderer.setSize(window.innerWidth, window.innerHeight)// renderer（渲染器）的dom元素添加到我们的HTML文档中document.body.appendChild(renderer.domElement)// 加载纹理const img = new Image()img.src = "../images/rabbit.png"const texture = new THREE.Texture(img)img.onload = () => {texture.needsUpdate = true}// 设置Mesh（网格），网格包含一个几何体以及作用在此几何体上的材质const cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ map: texture}));// 将网格对象放入到我们的场景中scene.add(cube);// 控制器const control = new OrbitControls(camera, renderer.domElement)// 开启阻尼惯性，默认值为0.05control.enableDamping = true// 渲染循环动画function animate() {// 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）requestAnimationFrame(animate);// 更新控制器。如果没在动画里加上，那必须在摄像机的变换发生任何手动改变后调用control.update();renderer.render(scene, camera);};// 执行动画animate();</script>
</body></html>