THREE.js 入门(六) 纹理、uv坐标

一、uv坐标

相当于x、y轴,通过自定义uv坐标可以截取所需的纹理范围

javascript 复制代码
<template>
  <div id="container"></div>
</template>

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

// 场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x666666);

// 相机
const camera = new THREE.PerspectiveCamera();
// camera.position.x = 10;
camera.position.y = 0;
camera.position.z = 2;

// 创建矩形
const geometry = new THREE.PlaneGeometry(1, 1)
const texture = new THREE.TextureLoader().load('/textureMsg/cloud.jpeg') // 纹理贴图

// UV像素的取值范围 分别为四个顶点的坐标 左上 右上 左下 右下
const uv = new Float32Array([
  0, 1,
  1, 1,
  0, 0,
  1, 0
])

// UV像素的颜色值
// const colors = new Float32Array([
//   1.0, 0.0, 0.0, // 红色
//   0.0, 1.0, 0.0, // 绿色
//   0.0, 0.0, 1.0  // 蓝色
// ]);

// const colorAttribute = new THREE.BufferAttribute(colors, 3); // 每个颜色有3个分量 (r, g, b)
// geometry.setAttribute('color', colorAttribute);


// // 设置矩形的uv 
geometry.attributes.uv = new THREE.BufferAttribute(uv, 2) // uv坐标 2表示只有x,y  3是x,y,z

// 材质
const material = new THREE.MeshBasicMaterial({
  side: THREE.DoubleSide, // 双面可见
  map: texture,  // 纹理贴图
  // vertexColors: true // 顶点颜色
})

console.log(geometry, 'geometry')

// 创建网格
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

// 添加坐标辅助线
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

onMounted(() => {
  // 渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 将渲染器添加到页面
  document.getElementById("container").appendChild(renderer.domElement);

  // 轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);

  // 动画
  function animate() {
    // 更新动画
    requestAnimationFrame(animate);

    // 轨道控制器更新
    controls.update();
    renderer.render(scene, camera);
  }
  animate();
});
</script>

二、效果

1、原图

2、截取后

相关推荐
一匹电信狗19 小时前
【LeetCode_160】相交链表
c语言·开发语言·数据结构·c++·算法·leetcode·stl
软件技术NINI19 小时前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
曦樂~19 小时前
【Qt】信号与槽(Signal and Slot)- 简易计算器
开发语言·数据库·qt
歪歪10020 小时前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手20 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
yaoxin52112320 小时前
212. Java 函数式编程风格 - Java 编程风格转换:命令式 vs 函数式(以循环为例)
java·开发语言
wangqiaowq20 小时前
ImmutableList.of() 是 Google Guava 库 提供的一个静态工厂方法,用于创建一个不可变的(immutable)列表。
开发语言·windows·python
苏打水com20 小时前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html
十五年专注C++开发20 小时前
QDarkStyleSheet: 一个Qt应用的暗色主题解决方案
开发语言·c++·qt·qss
麦麦鸡腿堡20 小时前
Java的代码块介绍与快速入门
java·开发语言