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

three.js——模型对象的使用材质和方法

模型对象的使用材质和方法

  • 前言
  • 效果图
  • 1、旋转、缩放、平移,居中的使用
    • 1.1 旋转rotation(.rotateX()、.rotateY()、.rotateZ())
    • 1.2缩放.scale()
    • 1.3平移.translate()
    • 1.4居中.center()
  • 2、材质属性.wireframe

前言

BufferGeometry通过.scale()、.translate()、.rotateX()、.rotateY()等方法可以对几何体本身进行缩放、平移、旋转,这些方法本质上都是改变几何体的顶点数据。
官网的模型和材质使用

效果图

在这里插入图片描述

1、旋转、缩放、平移,居中的使用

1.1 旋转rotation(.rotateX()、.rotateY()、.rotateZ())

//几何体绕着x轴旋转45度
cube.rotation.x = Math.PI / 4
// 几何体绕着x轴旋转45度
geometry.rotateX(Math.PI / 4);

1.2缩放.scale()

// 几何体xyz三个方向都放大2倍
geometry.scale(2, 2, 2);

1.3平移.translate()

// 几何体沿着x轴平移50
geometry.translate(50, 0, 0);

1.4居中.center()

geometry.translate(50, 0, 0);//偏移
// 居中:已经偏移的几何体居中,执行.center(),你可以看到几何体重新与坐标原点重合
geometry.center();

2、材质属性.wireframe

线条模式渲染,查看几何体三角形结构

// 子元素的材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
// 设置子元素为线框模式
material.wireframe = true
http://www.lryc.cn/news/169764.html

相关文章:

  • sql explain
  • 【LeetCode-简单题】剑指 Offer 05. 替换空格
  • 数字虚拟人制作简明指南
  • Nginx 文件解析漏洞复现
  • Lombok依赖
  • XML 和 JSON 学习笔记(基础)
  • L1-005 考试座位号分数 15
  • 无涯教程-JavaScript - CEILING.MATH函数
  • ChatGPT提示词(prompt)资源汇总
  • MySQL 几种导数据的方法与遇到的问题
  • (21)多线程实例应用:双色球(6红+1蓝)
  • 升级OpenSSL并进行编译安装
  • Spring整合RabbitMQ
  • MySQL——事务和视图
  • 做好制造项目管理的5个技巧
  • JavaScript中While循环
  • python经典百题之乒乓球比赛
  • 【C++ Exceptions】Catch exceptions by reference!
  • 高斯公式证明
  • 速卖通获得aliexpress商品详情 API 返回值说明
  • c++语法-模板
  • DMNet复现(一)之数据准备篇:Density map guided object detection in aerial image
  • k8s相关命令-命名空间
  • CG Magic分享同一场景里下,VR渲染器和CR渲染器哪个好?
  • Hive工作原理
  • vue 使用this.$set设置对象属性值时,不更新试图
  • uniapp视频播放功能
  • Java面向对象七大原则以及设计模式单例模式和工厂模式简单工厂模式
  • Linux 遍历目录(cd 命令)
  • 整合Nginx实现反向代理