当前位置： 首页 > news >正文

Three.js之模型对象、材质

news 2025/7/15 5:25:58

参考资料

  • 三维向量Vector3与模型位置
  • …
  • 克隆.clone()和复制.copy()

知识点

注：基于Three.jsv0.155.0

  • 三维向量Vector3与模型位置
  • 欧拉Euler与角度属性.rotation
  • 模型材质颜色(Color对象)
  • 模型材质父类Material：透明、面属性
  • 模型材质和几何体属性
  • 克隆.clone()和复制.copy()

代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Three.js</title>
</head><body></body><!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 --><script type="importmap">{"imports": {"three": "./js/three.module.js","three/addons/": "../three.js/examples/jsm/"}}</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';const width = 800const height = 500// 场景const scene = new THREE.Scene();// 几何体const geometry = new THREE.BoxGeometry(100, 100, 100);// 材质 const material = new THREE.MeshBasicMaterial({color:0x0000ff,});// 网格模型：物体const mesh = new THREE.Mesh(geometry, material);// 位置属性mesh.position.set(0, 0, 0);// mesh.position.x = 100;// mesh.scale.set(2, 2, 2);// mesh.scale.x = 2;// mesh.translateOnAxis(new THREE.Vector3(1, 0, 1), 100);// mesh.translateX(100);scene.add(mesh);// 角度属性// mesh.rotation.x = Math.PI / 4;// mesh.rotation.set(0, 0, Math.PI / 4);// mesh.rotateX(Math.PI / 4);console.log('🚀 ~ file: 3.1三维向量Vector3与模型位置.html:46 ~ mesh.rolation:', mesh.rotation)// 材料颜色// mesh.material.color.set('red');// mesh.material.color.set('#ff0000');// mesh.material.color.set(0xff0000);mesh.material.color.r = 1;// 材料透明度mesh.material.opacity = 0.8;mesh.material.transparent = true; // 是否透明// 材料面属性// mesh.material.side = THREE.FrontSide; // 正面可见mesh.material.side = THREE.DoubleSide; // 两面可见console.log('🚀 ~ file: 3.1三维向量Vector3与模型位置.html:66 ~ mesh.material.side:', mesh.material.side) // 2console.log('🚀 ~ file: 3.1三维向量Vector3与模型位置.html:63 ~ mesh.material:', mesh.material)console.log('🚀 ~ file: 3.1三维向量Vector3与模型位置.html:89 ~ mesh.geometry:', mesh.geometry)// 克隆、复制const mesh2 = mesh.clone();mesh2.position.set(200, 0, 0);mesh2.material = mesh.material.clone();mesh2.material.color.set(0xff0000);mesh2.position.copy(mesh.position);mesh2.position.y += 150;scene.add(mesh2);// 坐标系const axes = new THREE.AxesHelper(200);scene.add(axes);// 相机const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);camera.position.set(200, 200, 200);camera.lookAt(scene.position);// 渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);// 控制器const controls = new OrbitControls(camera, renderer.domElement);controls.addEventListener('change', () => {renderer.render(scene, camera);});// 渲染循环function render() {mesh.rotateY(0.01);// mesh旋转动画// 同步mesh2和mesh的姿态角度一样，不管mesh姿态角度怎么变化，mesh2始终保持同步mesh2.rotation.copy(mesh.rotation);renderer.render(scene, camera);requestAnimationFrame(render);}render();</script>
</html>

相关文章：

Three.js之模型对象、材质

参考资料 三维向量Vector3与模型位置…克隆.clone()和复制.copy() 知识点 注&#xff1a;基于Three.jsv0.155.0 三维向量Vector3与模型位置欧拉Euler与角度属性.rotation模型材质颜色(Color对象)模型材质父类Material&#xff1a;透明、面属性模型材质和几何体属性克隆.clo…...

编程日记 2023/9/2 18:17:50

uniapp启动微信小程序开发者工具报错Enable IDE Service (y/N) 

下载安装好微信小程序开发者路径 配置好启动路径后 报错[微信小程序开发者工具] ? Enable IDE Service (y/N) [27D[27C 解决办法 因为微信开发者工具的服务端口号没有打开...

编程日记 2023/9/2 18:16:49

Gitee注册和使用

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言程序设计————KTV C语言小游戏 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂。 目录 1.Gitee 1.1Gitee是什么 1.2Gitee的注册以及远程仓库的创建…...

编程日记 2023/9/2 18:15:48

【Flutter】下载安装Flutter并使用学习dart语言

前言 安装flutter, 并使用flutter内置的dartSDK学习使用dart语言。 编辑器&#xff1a; Android Studio fluuter 版本 : flutter_windows_3.13.1 内置dartSDK : 3.1.0 dart路径路径&#xff1a; flutter安装路径\bin\cache\dart-sdk 安装Flutter 下载安装包 flutter下载地址…...

编程日记 2023/9/2 18:14:47

HTTP返回状态值详解整理

一、总体 1xx:信息响应类&#xff0c;表示接收到请求并且继续处理 2xx:处理成功响应类&#xff0c;表示动作被成功接收、理解和接受 3xx:重定向响应类&#xff0c;为了完成指定的动作&#xff0c;必须接受进一步处理 4xx:客户端错误&#xff0c;客户请求包含语法错误或者是不能…...

编程日记 2023/9/2 18:13:46

python web 开发与 Node.js + Express 创建web服务器入门

目录 1. Node.js Express 框架简介 2 Node.js Express 和 Python 创建web服务器的对比 3 使用 Node.js Express 创建web服务器示例 3.1 Node.js Express 下载安装 3.2 使用Node.js Express 创建 web服务器流程 1. Node.js Express 框架简介 Node.js Express 是一种…...

编程日记 2023/9/2 18:12:44

OpenCV（三）：Mat类数据的读取

目录 1.Mat类矩阵的常用属性 2.Mat元素的读取 1.at方法读取Mat矩阵元素 at (int row,int col) 2.矩阵元素地址定位方式访问元素 3.Android jni demo 1.Mat类矩阵的常用属性 下面是一些Mat类的常用属性&#xff1a; rows: 返回Mat对象的行数。 cols: 返回Mat对象的列数。 …...

编程日记 2023/9/2 18:11:42

区块链BaaS篇

区块链BaaS&#xff08;Blockchain as a Service&#xff09;区块链即服务&#xff1b;感觉5年前做的BaaS和现在做的BaaS没啥区别&#xff0c;换了批人重复造轮子&#xff0c;BaaS做的越来越乱&#xff0c;也越来越中心化。BaaS是方便区块链调用的工具&#xff0c;工具是方便使…...

编程日记 2023/9/2 18:10:40

C++|观察者模式

观察者模式&#xff1a; 定义对象间的一种一对多&#xff08;变化&#xff09;的依赖关系&#xff0c;以便当一个 对象(Subject)的状态发生改变时&#xff0c;所有依赖于它的对象都 得到通知并自动更新 动机&#xff1a; 在软件构建过程中&#xff0c;我们需要为某些对象建立…...

编程日记 2023/9/2 18:09:37

【java 入侵 C# 之路】1-入门

感谢 https://www.cnblogs.com/mww-NOTCOPY/p/12213373.html 百度百科 jvm对应clr java se runtime对应 .net framework&#xff0c; jdk对应 .net framework sdk&#xff0c; java对应C# .NET 是开发者平台&#xff0c;它包含开发环境、技术框架、社区论坛、服务支持等&…...

编程日记 2023/9/2 18:08:35

【git】从一个git仓库迁移到另外一个git仓库

在远端服务器创建一个新的仓库 用界面创建&#xff0c;当然也可以用命令创建 拉去源仓库 git clone --bare git192.168.10.10:java/common.gitgit clone --bare <旧仓库地址>拉去成功以后会出现 进入到文件夹内部 出现下面信息&#xff1a; 推送到新的远端仓库 git …...

编程日记 2023/9/2 18:07:34

控制goroutine 的并发执行数量

goroutine的数量上限是1048575吗&#xff1f; 正常项目&#xff0c;协程数量超过十万就需要引起重视。如果有上百万goroutine&#xff0c;一般是有问题的。 但并不是说协程数量的上限是100多w 1048575的来自类似如下的demo代码: package mainimport ( "fmt" "ma…...

编程日记 2023/9/2 18:06:32

深入解析即时通讯App开发中的关键技术

即时通讯App开发在现代社交和通信领域中扮演着重要的角色。随着移动设备的普及和网络的高速发展&#xff0c;人们对即时通讯工具的需求不断增加。本篇文章将深入探讨即时通讯App开发中的关键技术&#xff0c;帮助读者了解该领域的最新动态和技术趋势。 基础架构和通信协议 现…...

编程日记 2023/9/2 18:05:31

ClickHouse进阶（三）：ClickHouse 索引

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术&#xff0c;IT贫道_Apache Doris,大数据OLAP体系技术栈,Kerberos安全认证-CSDN博客 &…...

编程日记 2023/9/2 18:04:30

四、MySQL(表操作)如何添加字段？修改表？删除字段？修改表名？删除表？格式化某张表？

1、添加字段 &#xff08;1&#xff09;基础语法&#xff1a; alter table 表名 add 字段名 类型名(长度) [comment注释] [约束]; &#xff08;2&#xff09;示例&#xff1a;添加nickname这个字段 2、修改表 修改表中某个字段的【数据类型】/【数据类型&字段名】 &…...

编程日记 2023/9/2 18:03:28

docker启动paddlespeech服务，并使用接口调用

一、检查docker容器是否启动 1.输入命令 systemctl status docker 启动 systemctl start docker 守护进程重启 sudo systemctl daemon-reload 重启docker服务 systemctl restart docker 重启docker服务 sudo service docker restart 关闭docker service docker…...

编程日记 2023/9/2 18:02:27

如何训练ChatGPT以生成音乐和创意艺术作品？

训练ChatGPT生成音乐和创意艺术作品是一个令人兴奋且具有挑战性的任务。这种技术&#xff0c;也被称为生成式艺术&#xff0c;涉及将人工智能&#xff08;AI&#xff09;模型与创意艺术的融合。在本文中&#xff0c;我将探讨如何训练ChatGPT以生成音乐和创意艺术作品的过程&…...

编程日记 2023/9/2 18:01:26

北约报告：2023-2043，下一代量子技术的发展与挑战

“当今的新技术正在以令人眼花缭乱的速度发展&#xff0c;我们所有人都可以在负责任且合乎道德的方式开发和部署新技术方面发挥作用。” ——这是副秘书长Mircea Geoană在2023年3月22日、在布鲁塞尔发布《北约科学技术组织2023-2043年趋势报告》时传达的信息。 Geoană先生强调…...

编程日记 2023/9/2 18:00:25

arm版Linux下安装es集群

背景&#xff1a;由于生产上网络没通&#xff0c;没办法&#xff0c;只能自己安装一个es集群的测试环境了&#xff0c;我的电脑是Mac M2&#xff0c;安装的Linux是centos7&#xff0c;也是arm版的。 第一步&#xff1a;查看自己Linux系统的版本 命令&#xff1a;uname -a 例如…...

编程日记 2023/9/2 17:59:24

vConsole调试工具的三种使用方式

1.在html页面时, 在页面引入 cdn 方式引入 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" co…...

编程日记 2023/9/2 17:58:23

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2025/7/14 14:22:34

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/7/11 11:01:00

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/7/6 11:42:31

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/7/9 1:12:03

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

编程新知 2025/7/13 2:55:13

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/7/14 9:00:10

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2025/7/12 7:28:21

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/6/21 16:56:20

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2025/7/14 0:41:18

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2025/7/5 22:36:20