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

Three.js之模型对象、材质

news 2025/11/9 20:49:14

参考资料

  • 三维向量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

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/11/8 12:59:41

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/11/7 19:36:56

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/7/21 15:40:47

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2025/11/8 9:16:21

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/11/8 10:12:46

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/10/6 22:42:00

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/8/28 21:52:02

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/9/29 5:00:25

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2025/11/8 6:45:40

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24