three.js 细一万倍教程 从入门到精通(二)

目录

三、全面认识three.js物体

3.1、掌握几何体顶点_UV_法向属性

3.2、BufferGeometry设置顶点创建矩形

3.3、生成酷炫三角形科技物体

四、详解材质与纹理

4.1、初识材质与纹理

4.2、详解纹理偏移_旋转_重复

偏移

旋转

重复

4.3、设置纹理显示算法与mipmap

mapFilter

minFilter

4.4、透明材质与透明纹理

4.5、环境遮挡贴图与强度


三、全面认识three.js物体

3.1、掌握几何体顶点_UV_法向属性

我们先打印一下几何体变量

// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
console.log(cubeGeometry)

3.2、BufferGeometry设置顶点创建矩形

// 创建几何体
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([-1.0, -1.0, 1.0,1.0, -1.0, 1.0,1.0, 1.0, 1.0,1.0, 1.0, 1.0,-1.0, 1.0, 1.0,-1.0, -1.0, 1.0,
])geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
// 材质
const material = new THREE.MeshBasicMaterial({color: 0xffff00});
// 根据几何体和材质创建物体
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh);

注意:geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3)) 其中的3代表传来的数组每三个值作为一个坐标。

3.3、生成酷炫三角形科技物体

// 添加物体
// 创建几何体 50个三角形
for (let i = 0; i < 50; i++) {// 每一个三角形,需要3个定点,每个顶点需要3个值(x、y、z)const geometry = new THREE.BufferGeometry();const positionArray = new Float32Array(9);for (let j = 0; j < 9; j++) {positionArray[j] = Math.random() * 5 // 打印出一个在 0 到 5 之间(包括 0 不包括 5)的随机数}geometry.setAttribute('position', new THREE.BufferAttribute(positionArray, 3));// 随机颜色let color = new THREE.Color(Math.random(), Math.random(), Math.random())// 材质const material = new THREE.MeshBasicMaterial({color: color, transparent: true});// 根据几何体和材质创建物体const mesh = new THREE.Mesh(geometry, material)scene.add(mesh);
}

四、详解材质与纹理

4.1、初识材质与纹理

案例:制作个纹理

网上下载一张图片,我这用门的图片来当纹理,下载好图片后将图片放到dist/textures下。

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door.jpg");// 添加物体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 材质
const basicMaterial = new THREE.MeshBasicMaterial({color: "#ffff00",map: doorColorTexture
})
const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
scene.add(cube);

4.2、详解纹理偏移_旋转_重复

偏移

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door.jpg");
// 设置纹理【偏移】
doorColorTexture.offset.x = 0.5;
doorColorTexture.offset.y = 0.5;

旋转

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door.jpg");
// 设置纹理【旋转】
doorColorTexture.rotation = Math.PI / 4; // 旋转45度

重复

4.3、设置纹理显示算法与mipmap

其实就是当你的图片是16像素比较低的时候,你放大或者缩小还是能显示,尽管放大后变得模糊。

mapFilter

当一个纹素覆盖大于一个像素时,贴图将如何采样,默认值为THREE.LinearFilter,它将获取四个最接近的纹素。另一个是THREE.NearestFilter,它将使用最接近纹素的值。

minFilter

当一个纹素覆盖小于一个像素时,贴图将如何采样,默认值为THREE.LinearMipmapLinearFilter,它将使用mipmapping以及三次线性滤镜。

// texture纹理显示设置
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;

4.4、透明材质与透明纹理

比如我们要将门抠出来,其余地方的面积改为透明的。

我们还需要准备一个黑白门框图,黑色的会被变为透明,白色留着。

// 导入纹理
const textureLoader = new THREE.TextureLoader();
// 导入门的图片
const doorColorTexture = textureLoader.load("./textures/door/color.jpg");
// 导入黑白门框图
const doorAplhaTexture = textureLoader.load("./textures/door/alpha.jpg");// 添加物体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 材质
const basicMaterial = new THREE.MeshBasicMaterial({color: "#ffff00",map: doorColorTexture,alphaMap: doorAplhaTexture,transparent: true // 透明
})
const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
scene.add(cube);

// 添加平面
const plane = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), basicMaterial);
plane.position.set(3, 0, 0);
scene.add(plane);

4.5、环境遮挡贴图与强度

准备图片

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door/color.jpg");
const doorAplhaTexture = textureLoader.load("./textures/door/alpha.jpg");
const doorAoTexture = textureLoader.load("./textures/door/ambientOcclusion.jpg");// 添加物体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 材质
const basicMaterial = new THREE.MeshBasicMaterial({color: "#ffff00",map: doorColorTexture,alphaMap: doorAplhaTexture,transparent: true,aoMap: doorAoTexture
})
const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
scene.add(cube);

门更加真实立体,纹路更加清晰。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/679771.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《UE5_C++多人TPS完整教程》学习笔记8 ——《P9 访问 Steam(Acessing Steam)》

本文为B站系列教学视频 《UE5_C多人TPS完整教程》 —— 《P9 访问 Steam&#xff08;Acessing Steam&#xff09;》 的学习笔记&#xff0c;该系列教学视频为 Udemy 课程 《Unreal Engine 5 C Multiplayer Shooter》 的中文字幕翻译版&#xff0c;UP主&#xff08;也是译者&…

Python语言例题集(003)

#!/usr/bin/python3 #猜数字 import random secretNumberrandom.randint(1,20) print(‘我想了一个1到20间的整数&#xff0c;你能猜出来吗&#xff1f;’) for guessesTaken in range(1,7): print(‘猜一下&#xff01;’) guessint(input()) if guess<secretNumber: pr…

《Linux 简易速速上手小册》第10章: 性能监控与优化(2024 最新版)

文章目录 10.1 理解系统负载10.1.1 重点基础知识10.1.2 重点案例&#xff1a;服务器响应变慢10.1.3 拓展案例 1&#xff1a;多核 CPU 系统的负载解读10.1.4 拓展案例 2&#xff1a;分析具体时间段的系统负载 10.2 优化性能10.2.1 重点基础知识10.2.2 重点案例&#xff1a;优化 …

没更新的日子也在努力呀,布局2024!

文章目录 ⭐ 没更新的日子也在努力呀⭐ 近期的一个状态 - 已圆满⭐ 又到了2024的许愿时间了⭐ 开发者要如何去 "创富" ⭐ 没更新的日子也在努力呀 感觉很久没有更新视频了&#xff0c;好吧&#xff0c;其实真的很久没有更新短视频了。最近的一两个月真的太忙了&#…

LLM大模型相关问题汇总

一、基础篇 1. 目前 主流的开源模型体系 有哪些&#xff1f; 2. prefix LM 和 causal LM 区别是什么&#xff1f; 3. 涌现能力是啥原因&#xff1f; 4. 大模型LLM的架构介绍&#xff1f; 5. 你比较关注那些主流的开源大模型&#xff1f; 6. 目前大模型模型结构都有那些&a…

CSP-202312-2-因子化简(质数筛法)

CSP-202312-2-因子化简 一、质数筛法 主流的质数筛法包括埃拉托斯特尼筛法&#xff08;Sieve of Eratosthenes&#xff09;、欧拉筛法&#xff08;Sieve of Euler&#xff09;、线性筛法&#xff08;Linear Sieve&#xff09;等。这些算法都用于高效地生成一定范围内的质数。 …

设计模式-观察者模式 Observer

观察者模式 一、概述二、使用场景三、发布订阅1) 观察者模式2) 发布-订阅模式 四、源码使用1) jdk中的观察者2) Guava中的消息总线 五、进阶1) 异步非阻塞模型 一、概述 观察者模式是一种行为设计模式&#xff0c;允许对象间存在一对多的依赖关系&#xff0c;当一个对象的状态…

二叉搜索树题目:二叉搜索树的最小绝对差

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;二叉搜索树的最小绝对差 出处&#xff1a;530. 二叉搜索树的最小绝对差 难度 3 级 题目描述 要求 给定一个二叉…

C#入门及进阶|数组和集合(四):数组的参数传递

数组的参数传递 向方法传递参数有两个方法&#xff0c;一个是“传值”&#xff0c;另一个是“传引用”。 传值时&#xff0c;如果对被调用的方法的值的副本进行修改&#xff0c;不会影响原始变量的值。 1.值传递 通过“传值”方式来传递引用&#xff0c;相当于允许方法直接访问…

什么是Java中的微服务架构,你能列举一些微服务架构的优缺点吗?

什么是Java中的微服务架构&#xff0c;你能列举一些微服务架构的优缺点吗&#xff1f; 微服务架构是一种将单个应用程序拆分为多个小型服务的架构风格&#xff0c;每个服务都运行在自己的进程中&#xff0c;并通过轻量级的通信机制&#xff08;通常是HTTP或者消息队列&#xf…

【DSP】数字信号处理发展里程碑(AI【文心一言】 辅助生成)

在远离尘嚣的学术殿堂中&#xff0c;数字信号处理&#xff08;DSP&#xff09;这一学科犹如一颗璀璨的明珠&#xff0c;其发展历程充满了传奇色彩。下面&#xff0c;就让我们一起穿越时空&#xff0c;回到那些激动人心的时刻&#xff0c;见证数字信号处理从无到有、从弱到强的壮…

java对象内部都有哪些东西

普通对象 对象头 markword 占8字节ClassPointer 指针 :-XX userCompressedClassPointrs 为4字节&#xff0c;不开启为 8字节实例数据 引用类型: -XX userCommpressedOops 为4字节&#xff0c;不开启8字节Padding对齐&#xff0c; 8的倍数 数组对象 对象头&#xff1a;markwor…

算法沉淀——位运算(leetcode真题剖析)

算法沉淀——位运算 常用位运算总结1.基础位运算2.确定一个数中第x位是0还是13.将一个数的第x位改成14.将一个数的第x位改成05.位图6.提取一个数最右边的17.删掉一个数最右边的18.异或运算9.基础例题 力扣题目讲解01.面试题 01.01. 判定字符是否唯一02.丢失的数字03.两整数之和…

【北邮鲁鹏老师计算机视觉课程笔记】05 Hough 霍夫变换

【北邮鲁鹏老师计算机视觉课程笔记】05 Hough 霍夫变换 1 投票策略 考虑到外点率太高 ①让直线上的每一点投票 ②希望噪声点不要给具体的任何模型投票&#xff0c;即噪声点不会有一致性的答案 ③即使被遮挡了&#xff0c;也能把直线找出来 参数空间离散化 直线相当于就是m,b两…

Python 3 中使用 pandas 和 Jupyter Notebook 进行数据分析和可视化

简介 Python 的 pandas 包用于数据操作和分析&#xff0c;旨在让您以直观的方式处理带标签或关联数据。 pandas 包提供了电子表格功能&#xff0c;但由于您正在使用 Python&#xff0c;因此它比传统的图形电子表格程序要快得多且更高效。 在本教程中&#xff0c;我们将介绍如…

git revert回退某次提交

请直接看原文: 【git revert】使用以及理解&#xff08;详解&#xff09;_git revert用法-CSDN博客 -------------------------------------------------------------------------------------------------------------------------------- 前言 试验得知:用Reset HEAD方…

mmap函数的详细讲解

mmap&#xff08;&#xff09;函数是一个用于在用户空间和内核空间之间进行文件映射的系统调用。它允许文件在物理内存中的特定区域被映射到进程的地址空间中&#xff0c;从而允许进程通过内存访问操作来读取和写入文件。 函数原型&#xff1a; #include <sys/mman.h> …

笔记---dp---最长上升子序列模型

模型原始题目&#xff1a;AcWing.895.最长上升子序列 题目关系如下&#xff1a; 转化一 AcWing.1017.怪盗基德的滑翔翼 怪盗基德是一个充满传奇色彩的怪盗&#xff0c;专门以珠宝为目标的超级盗窃犯。 而他最为突出的地方&#xff0c;就是他每次都能逃脱中村警部的重重围堵…

ZigBee学习——在官方例程实现组网

✨Z-Stack版本&#xff1a;3.0.2 ✨IAR版本&#xff1a;10.10.1 ✨这篇博客是在善学坊BDB组网实验的基础上进行完善&#xff0c;并指出实现的过程中会出现的各种各样的问题&#xff01; 善学坊教程地址&#xff1a; ZigBee3.0 BDB组网实验 文章目录 一、基础工程选择二、可能遇…

Linux(Ubuntu) 环境搭建:MySQL

注&#xff1a;服务器默认以root用户登录 服务器的终端中输入以下指令&#xff1a; # 安装 MySQL apt install mysql-server # 查看版本 mysql -V # 查看 MySQL 服务状态 systemctl status mysql # 安装完成后&#xff0c;MySQL 服务将自动启动 # MySQL 服务在系统启动时自动…