Three.js---材质、点线面、光源、组对象Group、相机对象

最新推荐文章于 2024-04-24 10:18:14 发布
最新推荐文章于 2024-04-24 10:18:14 发布
阅读量740 收藏 3
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37542119/article/details/108528695
版权
本文详细介绍了Three.js中的材质、点线面模型、光源和相机对象。讨论了材质的属性，如.opacity和.side，以及点模型、线模型和网格模型的差异。讲解了模型变换、对象克隆复制、光源类型如SpotLight和DirectionalLight。此外，还阐述了层次模型的构建、命名、查找和遍历方法，以及相机的正投影和透视投影应用场景。最后，探讨了相机位置调整和浏览器窗口尺寸变化时的自适应渲染策略。
摘要由CSDN通过智能技术生成

Three.js—材质、点线面、光源

材质

在这里插入图片描述

材质与模型的关系

在这里插入图片描述

材质的共有属性

.side如何贴面
.opacity材质透明度

点线面模型

点模型Points、线模型Line、网格网格模型Mesh都是由几何体Geometry和材质Material构成，这三种模型的区别在于对几何体顶点数据的渲染方式不同。
在这里插入图片描述

模型对象的变换

具体使用文档可参考Object3D
在这里插入图片描述

对象的克隆、复制

复制方法.copy()
克隆方法.clone()

光源对象

光照原理及光源类型

在这里插入图片描述

基类Light和Object3D

SpotLight、DirectionalLight、环境光AmbientLight等光源对象都有一个共同的基类Light，光源Light也有一个基类Object3D。也就是说Threejs环境光、点光源等子类光源可以继承Light和Object3D两个父类的属性和方法。
在这里插入图片描述

层级模型、树结构

通过组对象Group组织各个模型，构成一个层级结构。
在这里插入图片描述

  1. 通过THREE.Group类创建一个
最低0.47元/天 解锁文章
宝藏男孩们的锦鲤搬砖工
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Three.js - 绘制线框几何模型
ithanmang
06-29 7205
通过 three.js 可以绘制线段模型，包括虚线和基础线条。 var lineGeometry = new THREE.Geometry(); lineGeometry.vertices.push(new THREE.Vector3(-200, -200, -200)); lineGeometry.vertices.push(new THREE.Vector3(200, 200, 200)...
Threejs中3D模型使用透明发光材质并加线框
05-06
透明发光材质是通过自定义shader实现，线框的关键代码如下： model.traverse(function(child) {     if (child.isMesh) {     child.material = customMaterial;     // 添加线框     var wireframeMaterial = new THREE.MeshBasicMaterial({color: 0x3366ff, wireframe: true, transparent: true});     var wireframe = new THREE.Mesh(child.geo
ThreeJS学习笔记一：场景、相机、渲染器、光源
to_the_Future的博客
10-12 911
在three中，场景、相机、渲染器是最核心的三个概念。我们通过相机拍摄场景，再通过渲染器把场景呈现在视图中。本文主要记录了threeJS中场景、相机、渲染器、光源的基本概念，以及实现了一个简单的3D场景。下次再见。
Three.js教程：点、线、网格模型介绍
ygtu2018的博客
05-24 1301
经过前面几章学习相信你对点模型Points、线模型Line、网格模型Mesh已经有了大致了解，本节课就对点、线、网格模型模型进行简单总结。点模型Points、线模型Line、网格网格模型Mesh都是由几何体Geometry和材质Material构成，这三种模型的区别在于对几何体顶点数据的渲染方式不同，如果有一定WebGL基础，就更容易理解这一点了。
Threejs入门之七:Threejs中的几何体
九仞山的专栏
04-02 2428
介绍Threejs中常见的几何体
行业分类-设备装置-一种新型点线面投影特性演示教具.zip
08-21
在IT行业中，设备装置的设计与应用常常涉及到各种技术，其中包括了点线面投影这一重要的几何概念。"一种新型点线面投影特性演示教具"是一个专门针对这一领域教学设计的工具，旨在帮助学习者更直观地理解点、线、面在...
《Three.js零基础入门教程》相关源码
07-20
5. 光源对象 6. 层级模型、树结构 7. 几何体对象、曲线、三维建模 8. 纹理贴图 9. 相机对象(投影方式) 10. 精灵模型、粒子系统 11. 帧动画模块 12. 骨骼动画、变形动画 13. 语音模块 14. 模型文件加载 15. WebGL渲染...
专题资料（2021-2022年）02空间点线面的位置关系.doc
10-07
本专题资料——“02空间点线面的位置关系”由北京四中的吕宝珠老师提供，旨在深入探讨这些核心知识。下面将详细阐述相关知识点，并通过典型例题进行解析。 1. **点、线、面的基本定义** - **点**：在几何学中，点...
经营管理-企划点线面.ppt
02-27
【经营管理-企划点线面】是关于企业策划和管理的知识体系，主要涵盖了企划的能力、企划的步骤以及在实际操作中的应用方法。企划是企业管理和运营中至关重要的一环，它涉及到对问题的界定、资料的搜集、市场调查、...
二、threejs 学习笔记-几何体BufferGeometry
weixin_60645637的博客
07-01 451
通过javascript类型化数组 (opens new window)Float32Array创建一组xyz坐标数据用来表示几何体的顶点坐标。//类型化数组创建顶点数据0, 0, 0, //顶点1坐标50, 0, 0, //顶点2坐标0, 100, 0, //顶点3坐标0, 0, 10, //顶点4坐标0, 0, 100, //顶点5坐标50, 0, 10, //顶点6坐标]);
Three.js克隆.clone()和复制.copy()
u014291990的博客
06-16 1万+
Three.js克隆.clone()和复制.copy() 你查看Threejs的文档可以发现Threejs的很多类都具有克隆.clone()和复制.copy()方法，比如网格模型Mesh、几何体Geometry、三维向量Vector3… 个人WebGL/Three.js技术博客 .copy()方法简单的说就是复制一个对象的属性值赋值给给另一个对象对应的属性。克隆方法.clone()是相当于新建一个...
three.js递归实现模型的透明化不透明化切换
最新发布
weixin_52619319的博客
04-24 480
直接引入函数就能用，第一个参数传需要改变的模型，第二个参数是控制透明度的，递归处理。
Three.js对象克隆.clone()和复制.copy()
u014291990的博客
12-01 4787
对象克隆.clone()和复制.copy() 本文是Three.js电子书的4.3节 Threejs大多数对象都有克隆.clone()和复制.copy()两个方法,点模型Points、线模型Line、网格网格模型Mesh一样具有这两个方法。 复制、克隆Vector3GeometryObject3DMaterialA.copy(B)N = M.clone()把B对象的属性值赋值给A对象返回一个和M相...
修复threejs中带有透明度的贴图显示错误等问题
qq_61834461的博客
01-23 553
在threejs中 ，透明贴图可能会因为多次渲染造成色差或透视，如图带有透明贴图的Sprite所示。
【Three.js入门】纹理及其常用属性、透明纹理、环境遮挡贴图与强度
HuoZhiyan 的博客
12-22 3997
本文主要介绍了Three.js的纹理及其常用属性，并扩展了透明纹理和环境遮挡贴图与强度的内容....
用ThreeJS控制stl模型的透明度
qitiandada的博客
09-10 2868
利用ThreeJs加载stl文件 我选择用这个js来渲染stl文件 渲染方法如下： 其中的 material是来控制模型的透明度，颜色的对象。 那么如何通过点击按钮来控制模型的透明度 如果你用的是Vue，完全可以给 opacity一个变量，利用Vue的双向数据绑定来随意变化透明度的值（取值范围为0~1） 原生的话 则需要通过改变对象内的属性值 其中的 id就是对象名，可以绑定一个点击事件通过点击来改变他们的透明度。 到此为止可以基本实现模型的透明度控制，但是会发现如果同时加载多个stl文件的话，如
解决threejs对mesh进行clone后“修改material原皮肤也变更”问题
牟云飞的博客
03-10 5674
threeJs提供了很多copy和clone方法，copy用来复制原对象属性到自己创建的新对象去，clone则直接复制一个新的对象，但是使用Raycaster射线做obj模型选择时，使用clone方式进行颜色增强，修改新对象的material原皮肤也变更。 这是因为threejs中的clone方法是一个浅度的clone，clone复制了新的对象，但是原对象内部的对象（属性为对象）不会被clo...
08.ThreeJs开发指南-第八章-加载外部模型
热门推荐
KingW
09-02 1万+
第八章 创建、加载高级网格和几何体对象的组合当从一个几何体中创建网格，并使用多种材质时，Three.js就会创建一个组。该几何体的多个副本就会添加到这个组里，每份副本都有自己特定的材质。我们看到的结果是，一个网格拥有多个材质，实际上它是一个包含多个网格的组。sphere = createMesh(new THREE.SphereGeometry(5,10,10)); cube = createMes
Threejs 三大组件 -- 场景、相机、渲染器
hb_zhouyj的博客
12-06 1万+
Three.js 中，要渲染物体到网页中，必备3个组件：场景 scene、相机 camera、渲染器 renderer。 场景 scene 场景是所有物体的容器。在Threejs中，场景只有一种，用 THREE.Scene 表示，构建场景如下： var scene = new THREE.Scene(); 场景组件包括： 相机 — 决定哪些东西要渲染到屏幕上 光源 — 对材
详细描述一下线面这段代码所定义的卷积核是怎样的，卷积核的权重具体是怎样的 ef Laplacian(self, x): weight=nn.Parameter([ [[[-1.,0.,0.],[0.,-1.,0.],[0.,0.,-1.]],[[-1.,0.,0.],[0.,-1.,0.],[0.,0.,-1.]],[[-1.,0.,0.],[0.,-1.,0.],[0.,0.,-1.]]], [[[-1.,0.,0.],[0.,-1.,0.],[0.,0.,-1.]],[[8.,0.,0.],[0.,8.,0.],[0.,0.,8.]],[[-1.,0.,0.],[0.,-1.,0.],[0.,0.,-1.]]], [[[-1.,0.,0.],[0.,-1.,0.],[0.,0.,-1.]],[[-1.,0.,0.],[0.,-1.,0.],[0.,0.,-1.]],[[-1.,0.,0.],[0.,-1.,0.],[0.,0.,-1.]]] ]) frame=tf.nn.conv2d(x,weight,[1,1,1,1],padding='SAME') #frame = tf.cast(((frame - tf.reduce_min(frame)) / (tf.reduce_max(frame) - tf.reduce_min(frame))) * 255, tf.uint8) return frame
07-14
这段代码定义了一个包含三个卷积核的权重矩阵，用于进行 Laplacian 操作的卷积计算。让我们逐步解释卷积核的具体形状和权重： 卷积核1: [ [[-1., 0., 0.], [ 0., -1., 0.], [ 0., 0., -1.]], ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值