Three.js纹理贴图

  • 开发
  • 28

贴图设置

偏移
在这里插入图片描述
旋转
在这里插入图片描述
重复
在这里插入图片描述
纹理显示的清晰度
在这里插入图片描述

<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>

材质设置 (正片叠底)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

<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>

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

在这里插入图片描述

在这里插入图片描述

<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>

粗糙/贴图

在这里插入图片描述

在这里插入图片描述

<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>

金属感/贴图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<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>

法线贴图

在这里插入图片描述在这里插入图片描述

<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>
阅读全部

相关推荐

  4. three.js纹理贴图不清晰，颜色失真

    2024-05-11 11:12:07       74 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-11 11:12:07       94 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-11 11:12:07       100 阅读

  9. 在Django里面运行非项目文件

    2024-05-11 11:12:07       82 阅读

  19. Python语言-面向对象

    2024-05-11 11:12:07       91 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-05-11 11:12:07       85 阅读

热门阅读

  1. NLP经典入门论文

    2024-05-11 11:12:07       31 阅读

  6. 解决rabbitmq连接过慢的问题【在无互联网的条件下】

    2024-05-11 11:12:07       34 阅读

  9. 蓝桥杯备战4.双子数

    2024-05-11 11:12:07       27 阅读

  10. 蓝桥杯国赛每日一题：递增三元组（前缀和，贡献法）

    2024-05-11 11:12:07       30 阅读

  11. 程序员必须学会的道理，少走十年弯路！

    2024-05-11 11:12:07       29 阅读

  14. c#文心接口应用举例

    2024-05-11 11:12:07       35 阅读

  15. 从零开始学习MySQL 事务处理

    2024-05-11 11:12:07       25 阅读

  21. ubuntu 查看 postgresql 用户

    2024-05-11 11:12:07       32 阅读

  22. 商品购物车数据以店铺id为key,组合对应的数据

    2024-05-11 11:12:07       34 阅读

  23. 1、搭建TS开发环境（利用rollup）

    2024-05-11 11:12:07       37 阅读

  24. python dict赋值时有逗号自动变成元组

    2024-05-11 11:12:07       33 阅读

  25. 每天一个数据分析题（三百一十九）-图表

    2024-05-11 11:12:07       28 阅读

  26. 【前端每日一题】 day3

    2024-05-11 11:12:07       41 阅读

  28. 山西在线教育系统,教育机构怎样招生？怎么做有效？

    2024-05-11 11:12:07       30 阅读

  29. 2024年华为OD机试真题-螺旋数字矩阵-C++-OD统一考试（C卷D卷）

    2024-05-11 11:12:07       33 阅读

  30. 深度学习中超参数设置

    2024-05-11 11:12:07       34 阅读