WEB 3D技术 three.js 顶点交换

本文 我们来说 顶点的转换

其实就是 我们所有顶点的位置发生转变 我们整个物体的位置也会随之转变

这里 我们编写代码如下

javascript 复制代码
import './style.css'
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
//创建相机
const camera = new THREE.PerspectiveCamera(
    45, //视角 视角越大  能看到的范围就越大
    window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好
    0.1,
    1000
);
const scene = new THREE.Scene();
let uvTexture = new THREE.TextureLoader().load("/textUv.jpg");

const geometry = new THREE.BufferGeometry();
// 创建顶点数据
const vertices = new Float32Array([
    -1.0 ,-1.0 ,0.0,
    1.0 ,-1.0, 0.0,
    1.0 ,1.0 ,0.0,
    -1.0 ,1.0, 0.0
])
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const indices = new Uint16Array([0 ,1 ,2, 0, 3, 2]);
const material = new THREE.MeshBasicMaterial({
    map: uvTexture,
    side: THREE.DoubleSide
})
const uv = new Float32Array([
    0, 0, 1, 0, 1, 1, 0, 1
])
geometry.setAttribute("uv", new THREE.BufferAttribute(uv, 2));
const normals = new Float32Array([
    0, 0, 1,
    0, 0, 1,
    0, 0, 1,
    0, 0, 1
])
geometry.setAttribute("normal", new THREE.BufferAttribute(normals, 3));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
console.log(geometry);
const cube = new THREE.Mesh(geometry, material);
scene.add(cube)

//c创建一个canvas容器  并追加到 body上
const renderer = new THREE.WebGLRenderer(0);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
camera.position.z = 5;
//设置相机默认看向哪里   三个 0  代表 默认看向原点
camera.lookAt(0, 0, 0);
//将内容渲染到元素上
renderer.render(scene, camera);
const controls = new OrbitControls(camera, renderer.domElement);

let rgbeloader = new RGBELoader();
rgbeloader.load("/xhdr/Alex_Hart-Snow_Pano_2k.hdr",(texture) =>{
    scene.background = texture;
    texture.mapping = THREE.EquirectangularReflectionMapping;
    material.envMap = texture;
})

function animate() {
    controls.update();
    requestAnimationFrame(animate);
    /*cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;*/
    renderer.render(scene, camera);
}
animate();

运行代码 我们元素是在中间的

但是 我们统一将他每一个顶点 x轴的值都加四

两个 负一 加四成 3 两个 一加四成 5

运行代码 很明显的看到 我们改了顶点的x轴 整个几何体x轴也向右移动了

但是这样 position 是不会改变的 我们看到的元素 依旧在中间位置

其实有方法可以帮我们移动顶点

这里 我们官网搜索

BufferGeometry

拉到下面 找到它这个 translate 函数

这个函数就可以直接移动顶点

首先 我们将

vertices 顶点的内容还原回去

javascript 复制代码
// 创建顶点数据
const vertices = new Float32Array([
    -1.0,-1.0 ,0.0,
    1.0 ,-1.0, 0.0,
    1.0 ,1.0 ,0.0,
    -1.0 ,1.0, 0.0
])

我们可以直接

给需要移动顶点的几何体加上 translate 这里 我们设置所有顶点 y z 轴0不变 x轴加4

我们运行代码

然后 我们查看控制台中的 position

它也帮我们把 各个顶点的 x轴都加了4

那么 问题来了 我们什么时候要移动物体 什么时候又要移动顶点呢?

其实 绝大多数情况 position 直接移动物体是更好的

旋转呀 平移呀 我们都是更倾向于操作物体本身 因为最大的问题在于 移动顶点 你物体的中心点就不在物体中心了

但是有种特殊情况 比如 你的Float32Array 里面的顶点数据是后端接口返回的

它最初甚至的位置又有问题

那么 我们就需要 translate 去修正原点

相关推荐
浪里行舟23 分钟前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1231 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚1 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院1 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq7798233401 小时前
React组件完全指南
前端·javascript·react.js
EndingCoder1 小时前
MongoDB基础与Mongoose ODM
服务器·javascript·数据库·mongodb·中间件·node.js
qq7798233402 小时前
React Hooks完全指南
前端·javascript·react.js
Moment2 小时前
性能狂飙!Next.js 16 重磅发布:Turbopack 稳定、编译提速 10 倍!🚀🚀🚀
前端·javascript·后端
软件技术NINI2 小时前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html
DoraBigHead2 小时前
React Fiber:从“递归地狱”到“时间切片”的重生之路
前端·javascript·react.js