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、截取后

相关推荐
尘浮7286 分钟前
60天python训练计划----day59
开发语言·python
前端 贾公子7 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆12 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山20 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45329 分钟前
css模块化以及rem布局
前端·javascript·css
Chef_Chen35 分钟前
从0开始学习R语言--Day39--Spearman 秩相关
开发语言·学习·r语言
不学会Ⅳ42 分钟前
Mac M芯片搭建jdk源码环境(jdk24)
java·开发语言·macos
好开心啊没烦恼2 小时前
Python 数据分析:计算,分组统计1,df.groupby()。听故事学知识点怎么这么容易?
开发语言·python·数据挖掘·数据分析·pandas
lljss20203 小时前
Python11中创建虚拟环境、安装 TensorFlow
开发语言·python·tensorflow
Python×CATIA工业智造6 小时前
Frida RPC高级应用:动态模拟执行Android so文件实战指南
开发语言·python·pycharm