Three.js纹理贴图

夏暖冬凉2024-05-11 9:02

贴图设置

偏移

旋转

重复

纹理显示的清晰度

html 复制代码 
<template>
  <div id="webgl"></div>
</template>

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();

// 导入纹理
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('../public/Snipaste_2024-05-05_16-18-48.png')

// 设置纹理偏移
// texture.offset.x = 0.5 // 向左偏移，负为反
// texture.offset.y = 0.5
// texture.offset.set(0.5, 0.5)
// 纹理旋转
// 设置旋转中心点
// texture.center.set(0.5, 0.5)
// texture.rotation = Math.PI / 4 // 旋转45°
// 设置纹理的重复
// texture.repeat.set(2, 3) // 水平重复2次，竖着重复3次
// 设置纹理重复的模式 (默认是将重复的纹理推至外部边缘)
// texture.wrapS = THREE.MirroredRepeatWrapping // 水平贴图，镜像重复
// texture.wrapT = THREE.RepeatWrapping // 垂直贴图，纹理重复到无穷大
// 纹理显示设置（通过算法实现）
// texture.minFilter = THREE.NearestFilter // 取最接近的
// texture.magFilter = THREE.NearestFilter

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ // 漫反射；可改为镜面反射MeshPhongMaterial
  // color: 0xff0000,//0xff0000设置材质颜色为红色
  map: texture
});
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);
// scene.add(camera);

const axesHelper = new THREE.AxesHelper(5); // 长度
scene.add(axesHelper);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

// 相机围绕目标进行轨道运动
const controls = new OrbitControls(camera, renderer.domElement);

function render(time) {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render()
</script>

材质设置 (正片叠底)



html 复制代码 
<template>
  <div id="webgl"></div>
</template>

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';


const scene = new THREE.Scene();

// 导入纹理
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('../public/c4965b97abab46118cb221b818bc74a5.png')
const aplhaTexture = textureLoader.load('../public/44add4748d2b47e8bfa7e58cd2545981.jpeg')
const aoTexture = textureLoader.load('../public/26ad6804f422468988c3de6fe003bd6a.jpeg')

const geometry = new THREE.BoxGeometry(1, 1, 1);
// 材质；里面的属性可以在构建时设置，也可以之后通过.的形式来设置
const material = new THREE.MeshBasicMaterial({
  // color: 0xff0000,//0xff0000设置材质颜色为红色
  map: texture,
  alphaMap: aplhaTexture, // 灰度纹理贴图 (黑色透明，白色不透明)
  transparent: true,
  // opacity: 0.8
  side: THREE.DoubleSide, // 因为性能原因默认只渲染正面
  aoMap: aoTexture, // 环境遮挡贴图；需要第二组UV
  aoMapIntensity: 0.8, // 遮挡强度默认为1
});
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

// 添加平面
const planeGeometry =  new THREE.PlaneGeometry(1,1)
const plane = new THREE.Mesh(planeGeometry, material)
plane.position.set(3, 0, 0)
scene.add(plane)
// 新版本好像用不上了
// planeGeometry.setAttribute(
//   "uv2",//第二个uv
//   new THREE.BufferAttribute(planeGeometry.attributes.uv.array,2),//取原来的uv数组，设置两个为一组坐标
// )

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);
// scene.add(camera);

const axesHelper = new THREE.AxesHelper(5); // 长度
scene.add(axesHelper);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

// 相机围绕目标进行轨道运动
const controls = new OrbitControls(camera, renderer.domElement);

function render(time) {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render()
</script>

置换贴图（突出位移），灯光

html 复制代码 
<template>
  <div id="webgl"></div>
</template>

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();

// 导入纹理
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('../public/c4965b97abab46118cb221b818bc74a5.png')
const aplhaTexture = textureLoader.load('../public/44add4748d2b47e8bfa7e58cd2545981.jpeg')
const aoTexture = textureLoader.load('../public/26ad6804f422468988c3de6fe003bd6a.jpeg')
const heightTexture = textureLoader.load('../public/178dba688dde40558095c585f1bf6cbe.jpeg')

const geometry = new THREE.BoxGeometry(1, 1, 1, 100, 100, 100);
// 材质；里面的属性可以在构建时设置，也可以之后通过.的形式来设置
const material = new THREE.MeshStandardMaterial({ // 标准网格材质
  // color: 0xff0000,//0xff0000设置材质颜色为红色
  map: texture,
  alphaMap: aplhaTexture, // 灰度纹理贴图 (黑色透明，白色不透明)
  transparent: true,
  // opacity: 0.8
  side: THREE.DoubleSide, // 因为性能原因默认只渲染正面
  aoMap: aoTexture, // 环境遮挡贴图；需要第二组UV
  displacementMap: heightTexture, // 设置置换贴图
  displacementScale: 0.1 // 置换贴图影响程度，默认为1; 黑色无位移，白色是最大位移
});
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

// 添加平面
const planeGeometry = new THREE.PlaneGeometry(1, 1, 200, 200) // 宽高，宽高顶点数（细分）
const plane = new THREE.Mesh(planeGeometry, material)
plane.position.set(1, 0, 0)
scene.add(plane)

// 灯光
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.9)
scene.add(light)
// // 平行光
// const directionalLight = new THREE.DirectionalLight(0xffffff, 0.9)
// directionalLight.position.set(5, 5, 5)
// scene.add(directionalLight)

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);
// scene.add(camera);

const axesHelper = new THREE.AxesHelper(5); // 长度
scene.add(axesHelper);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

// 相机围绕目标进行轨道运动
const controls = new OrbitControls(camera, renderer.domElement);

function render(time) {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render()
</script>

粗糙/贴图

html 复制代码 
<template>
  <div id="webgl"></div>
</template>

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();

// 导入纹理
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('./c4965b97abab46118cb221b818bc74a5.png')
const aplhaTexture = textureLoader.load('./44add4748d2b47e8bfa7e58cd2545981.jpeg')
const aoTexture = textureLoader.load('./26ad6804f422468988c3de6fe003bd6a.jpeg')
const heightTexture = textureLoader.load('./178dba688dde40558095c585f1bf6cbe.jpeg')
const roughnessTexture = textureLoader.load('../public/e35ed3d8a9d54ca0bf1b615a077274b1.jpeg')

const geometry = new THREE.BoxGeometry(1, 1, 1, 100, 100, 100);
// 材质；里面的属性可以在构建时设置，也可以之后通过.的形式来设置
const material = new THREE.MeshStandardMaterial({ // 标准网格材质
  // color: 0xff0000,//0xff0000设置材质颜色为红色
  map: texture,
  alphaMap: aplhaTexture, // 灰度纹理贴图 (黑色透明，白色不透明)
  transparent: true,
  // opacity: 0.8
  side: THREE.DoubleSide, // 因为性能原因默认只渲染正面
  aoMap: aoTexture, // 环境遮挡贴图；需要第二组UV
  displacementMap: heightTexture, // 设置置换贴图
  displacementScale: 0.1, // 置换贴图影响程度，默认为1; 黑色无位移，白色是最大位移
  // roughness: 0, // 粗糙设置，0为光滑，1为粗糙
  roughnessMap: roughnessTexture // 如果已设置粗糙度，则会2个数值相乘（黑色光滑，白色粗糙）
});
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

// 添加平面
const planeGeometry = new THREE.PlaneGeometry(1, 1, 200, 200) // 宽高，宽高顶点数（细分）
const plane = new THREE.Mesh(planeGeometry, material)
plane.position.set(1, 0, 0)
scene.add(plane)

// 灯光
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.9)
scene.add(light)
// // 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.9)
directionalLight.position.set(5, 5, 5)
scene.add(directionalLight)

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);
// scene.add(camera);

const axesHelper = new THREE.AxesHelper(5); // 长度
scene.add(axesHelper);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

// 相机围绕目标进行轨道运动
const controls = new OrbitControls(camera, renderer.domElement);

function render(time) {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render()
</script>

金属感/贴图



html 复制代码 
<template>
  <div id="webgl"></div>
</template>

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();

// 导入纹理
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('./c4965b97abab46118cb221b818bc74a5.png')
const aplhaTexture = textureLoader.load('./44add4748d2b47e8bfa7e58cd2545981.jpeg')
const aoTexture = textureLoader.load('./26ad6804f422468988c3de6fe003bd6a.jpeg')
const heightTexture = textureLoader.load('./178dba688dde40558095c585f1bf6cbe.jpeg')
const roughnessTexture = textureLoader.load('../public/e35ed3d8a9d54ca0bf1b615a077274b1.jpeg')
const metalnessTexture = textureLoader.load('../public/10a429ee358849a9aaafeb3e5817641b.jpeg')

const geometry = new THREE.BoxGeometry(1, 1, 1, 100, 100, 100);
// 材质；里面的属性可以在构建时设置，也可以之后通过.的形式来设置
const material = new THREE.MeshStandardMaterial({ // 标准网格材质
  // color: 0xff0000,//0xff0000设置材质颜色为红色
  map: texture,
  alphaMap: aplhaTexture, // 灰度纹理贴图 (黑色透明，白色不透明)
  transparent: true,
  // opacity: 0.8
  side: THREE.DoubleSide, // 因为性能原因默认只渲染正面
  aoMap: aoTexture, // 环境遮挡贴图；需要第二组UV
  displacementMap: heightTexture, // 设置置换贴图
  displacementScale: 0.1, // 置换贴图影响程度，默认为1; 黑色无位移，白色是最大位移
  // roughness: 0, // 粗糙设置，0为光滑，1为粗糙
  roughnessMap: roughnessTexture, // 如果已设置粗糙度，则会2个数值相乘（黑色光滑，白色粗糙）
  metalness: 1, // 金属感， 0为木材或石材，1为金属
  metalnessMap: metalnessTexture// 如果已设金属感，则会2个数值相乘（黑色为木材，白色为金属）
});
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

// 添加平面
const planeGeometry = new THREE.PlaneGeometry(1, 1, 200, 200) // 宽高，宽高顶点数（细分）
const plane = new THREE.Mesh(planeGeometry, material)
plane.position.set(1, 0, 0)
scene.add(plane)

// 灯光
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.9)
scene.add(light)
// // 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.9)
directionalLight.position.set(5, 5, 5)
scene.add(directionalLight)

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);
// scene.add(camera);

const axesHelper = new THREE.AxesHelper(5); // 长度
scene.add(axesHelper);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

// 相机围绕目标进行轨道运动
const controls = new OrbitControls(camera, renderer.domElement);

function render(time) {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render()
</script>

法线贴图

html 复制代码 
<template>
  <div id="webgl"></div>
</template>

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();

// 导入纹理
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('./c4965b97abab46118cb221b818bc74a5.png')
const aplhaTexture = textureLoader.load('./44add4748d2b47e8bfa7e58cd2545981.jpeg')
const aoTexture = textureLoader.load('./26ad6804f422468988c3de6fe003bd6a.jpeg')
const heightTexture = textureLoader.load('./178dba688dde40558095c585f1bf6cbe.jpeg')
const roughnessTexture = textureLoader.load('../public/e35ed3d8a9d54ca0bf1b615a077274b1.jpeg')
const metalnessTexture = textureLoader.load('../public/10a429ee358849a9aaafeb3e5817641b.jpeg')
const normalTexture = textureLoader.load('../public/f9fec9a6991242c38a0ab3197a4a82df.jpeg')

const geometry = new THREE.BoxGeometry(1, 1, 1, 100, 100, 100);
// 材质；里面的属性可以在构建时设置，也可以之后通过.的形式来设置
const material = new THREE.MeshStandardMaterial({ // 标准网格材质
  // color: 0xff0000,//0xff0000设置材质颜色为红色
  map: texture,
  alphaMap: aplhaTexture, // 灰度纹理贴图 (黑色透明，白色不透明)
  transparent: true,
  // opacity: 0.8
  side: THREE.DoubleSide, // 因为性能原因默认只渲染正面
  aoMap: aoTexture, // 环境遮挡贴图；需要第二组UV
  displacementMap: heightTexture, // 设置置换贴图
  displacementScale: 0.1, // 置换贴图影响程度，默认为1; 黑色无位移，白色是最大位移
  // roughness: 0, // 粗糙设置，0为光滑，1为粗糙
  roughnessMap: roughnessTexture, // 如果已设置粗糙度，则会2个数值相乘（黑色光滑，白色粗糙）
  metalness: 1, // 金属感， 0为木材或石材，1为金属
  metalnessMap: metalnessTexture, // 如果已设金属感，则会2个数值相乘（黑色为木材，白色为金属）
  normalMap: normalTexture // 法线贴图，每个颜色代表不一样的朝向
});
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

// 添加平面
const planeGeometry = new THREE.PlaneGeometry(1, 1, 200, 200) // 宽高，宽高顶点数（细分）
const plane = new THREE.Mesh(planeGeometry, material)
plane.position.set(1, 0, 0)
scene.add(plane)

// 灯光
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.9)
scene.add(light)
// // 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.9)
directionalLight.position.set(5, 5, 5)
scene.add(directionalLight)

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);
// scene.add(camera);

const axesHelper = new THREE.AxesHelper(5); // 长度
scene.add(axesHelper);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

// 相机围绕目标进行轨道运动
const controls = new OrbitControls(camera, renderer.domElement);

function render(time) {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render()
</script>
相关推荐
意疏1 分钟前
openJiuwen实战：用AsyncCallbackFramework为Agent增强器添加可观测性
java·服务器·前端
llxxyy卢1 分钟前
polar中等web部分题目
前端
wuhen_n2 分钟前
5年前端，我为什么要all in AI Agent？
前端·vue.js·ai编程
我爱切图10 分钟前
echart 移动端进行双指缩放时，当放大到最大级别后，手指没有离开屏幕，图表还会自动移动问题修复
前端
optimistic_chen16 分钟前
【Vue入门】创建Vue工程环境和响应式函数
前端·javascript·vue.js·前端框架·html
南城书生25 分钟前
Android Handler 机制源码分析
前端
南城书生25 分钟前
Android 大图加载与 OOM 优化
前端
南城书生26 分钟前
RecyclerView 源码分析
前端
南城书生27 分钟前
LeakCanary 原理分析
前端
没想好d27 分钟前
通用管理后台组件库-13-页签组件
前端
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03本地部署 OpenClaw + DeepSeek-R1 完全指南04OpenClaw 飞书机器人不回复消息？3 小时踩坑总结05Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南06得物前端部门，没了07OpenClaw macOS 完整安装与本地模型配置教程（实战版）08Window 10部署openclaw报错node.exe : npm error code 12809OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录10OpenClaw 接入 QQ Bot 完整实践指南