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>
相关推荐
逆旅行天涯2 分钟前
【Threejs】从零开始（六）--GUI调试开发3D效果
前端·javascript·3d
m0_7482552623 分钟前
easyExcel导出大数据量EXCEL文件，前端实现进度条或者遮罩层
前端·excel
web147862107231 小时前
C# .Net Web 路由相关配置
前端·c#·.net
m0_748247801 小时前
Flutter Intl包使用指南：实现国际化和本地化
前端·javascript·flutter
飞的肖1 小时前
前端使用 Element Plus架构vue3.0实现图片拖拉拽，后等比压缩，上传到Spring Boot后端
前端·spring boot·架构
青灯文案11 小时前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_748254881 小时前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.1 小时前
WPSJS：让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营1 小时前
Vue零基础教程|从前端框架到GIS开发系列课程（七）响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
gis分享者2 小时前
学习threejs，PerspectiveCamera透视相机和OrthographicCamera正交相机对比
threejs·透视相机·正交相机
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10红米手机使用google play