three.js 学习中遇到的几个知识点整理

最新推荐文章于 2025-09-18 15:08:32 发布
原创 最新推荐文章于 2025-09-18 15:08:32 发布 · 307 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#材质 #html5 #three.js

这篇博客探讨了在three.js中遇到的问题，包括WebGLRenderer不支持lineWidth属性，CanvasRenderer作为替代方案；解释了相机的lookAt方法实际上指向一个方向而非点，并强调修改相机属性后需要更新投影矩阵；介绍了纹理加载器TextureLoader的使用，以及纹理贴图的三种重复方式：简单重复、边缘拉伸和镜像重复。

1、three.js 中的材质 设置lineWidth属性无效

原因是WebGLRenderer渲染器中暂不支持这个属性，只有CanvasRenderer渲染器可以支持这个属性

2.相机的lookat代表一个方向，而不是一个点

3.相机的属性修改完成之后，需要调用camera.updateProjectionMatrix()方法来更新

4.纹理加载类 ImageUtils 

加载不同图片格式的一个类 THREE.TextureLoader()

5.纹理贴图的重复的方式

THREE.RepeatWrapping = 1000; 简单重复

THREE.ClampToEdgeWrappiing = 1001; 边缘拉伸

THREE.MirroredRepeatWrapping = 1002;镜像重复

Three 之 three.js （webgl）旋转属性函数的简单整理，以及基于此实现绕轴旋转的简单案例
仙魁XAN
04-22 8174
Three 之 three.js （webgl）旋转函数的简单整理，以及实现绕轴旋转的简单案例 目录 Three 之 three.js （webgl）旋转函数的简单整理，以及实现绕轴旋转的简单案例 一、简单介绍 二、案例简单示意图 三、案例旋转的实现原理 四、注意事项 五、该案例的大概实现步骤 六、关键代码 一、简单介绍 Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。 本节介绍， three.js （webgl）中几个常用旋转函数的整理，并在此
Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质配有效果图)
仙魁XAN
04-25 1万+
Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质有效果图) 目录 Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质配有效果图) 一、简单介绍 二、各种材质说明 1、MeshBasicMaterial 基础网格材质 2、MeshDepthMaterial 深度网格材质 3、MeshDistanceMaterial 距离网格材质 4、MeshLambertMaterial Lambert网格材质 5、MeshMatcapMat
three.js加载和使用纹理- 通过设置纹理的wrapS、wrapT、repeat属性实现纹理的重复平铺，纹理的重复映射(vue中使用three.js78)
点燃火柴的博客
06-03 7665
使用高光贴图创建色彩鲜明的地球1.demo效果2. 相关知识点2.2.4 wrapS（number）2.2.5 wrapT（number）2.2.12 repeat （Vector2）3. 实现要点4. demo代码 1.demo效果 2. 相关知识点 2.2.4 wrapS（number） 纹理在水平方向上纹理包裹方式，在UV映射中对应于U，默认THREE.ClampToEdgeWrapping，表示纹理边缘与网格的边缘贴合。中间部分等比缩放 另外两个可选值为 THREE.RepeatWrapping：
Threejs入门之十六：纹理贴图和纹理材质
九仞山的专栏
04-06 2181
详细介绍了纹理贴图和纹理材质的使用方法，顶点UV坐标的作用，不同几何体纹理贴图的方法和纹理贴图的阵列功能
Three.js 面试题详细总结
最新发布
qq_51398495的博客
09-18 1232
问题：什么时候需要使用自定义着色器？如何实现？答案要点：使用场景特殊视觉效果性能优化自定义材质属性实现方式使用ShaderMaterial编写顶点着色器和片段着色器GLSL语法基础uniform、attribute、varying变量基础概念：核心架构、组件关系技术深度：材质、光照、动画系统性能优化：渲染优化、内存管理实战经验：项目集成、问题解决前沿技术：新特性、发展趋势深入理解核心概念和原理积累实际项目经验关注性能优化最佳实践了解最新技术发展动向。
Three.js学习5：场景
九天翔龙的技术博客
02-04 1396
场景：可以理解为。能够控制在什么地方、摆放什么东西来交给three.js来渲染。能够放置的地方。Three.js 场景主要分为两类：Scene：普通场景。Frog：雾。
THREEJS注意事项
weixin_30292843的博客
11-16 210
1、给平面赋纹理坐标时注意是逆时针方向，否则THREEJS分不清楚。 转载于:https://www.cnblogs.com/shinejk/p/9968386.html
THREE js四大组件
weixin_42468607的博客
08-06 532
在Three.js中，要渲染物体到网页，需要四个组件：场景（scene）、相机（camera）、渲染器（renderer）、几何体（geometry） 有了这四大组件，才能通过相机将场景渲染到网页上去。 四大组件： 场景：场景是所有物体的容器 `var scene = THREE.Scene()` // 创建一个场景 相机 ...
Three.js简介与Python结合应用
keny-大成的博客
07-11 1094
Three.js简介与Python结合应用 Three.js是基于JavaScript的开源3D图形库，简化了WebGL开发，支持场景管理、几何体渲染、动画交互等功能。核心特点包括： 基础功能：内置几何体/材质，支持光照/阴影 高级应用：着色器定制、物理引擎集成、粒子系统 性能优化：InstancedMesh批量渲染，WebGL2加速 Python结合方案： Pyodide：浏览器中运行Python调用Three.js 后端架构：Flask/Django提供API数据，前端Three.js渲染 Jupyte
Three.js 这样写就有阴影效果啦
weixin_39415598的博客
09-03 1957
theme: smartblue 我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情 本文简介 点赞 + 关注 + 收藏 = 学会了 渲染阴影效果需要消耗一定的资源，所以 Three.js 默认是关闭阴影效果的。 想要在 Three.js 中实现阴影效果，只需记住接下来要讲的几个点即可。 本文要实现的效果 本文适合 Three.js 入门级...
Three 之 three.js （webgl）PostProcessing/shader/EffectComposer 屏幕渲染 之 屏幕pixel像素化效果的简单实现
仙魁XAN
09-09 820
Three js开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍， three.js （webgl）中有各种后期渲染效果的简单实现，不同屏幕渲染又有不同的效果，这里做简单的介绍，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。后期处理1、threejs 的后期处理通道包提供了各种强大的效果，有了这些效果会大大降低代码难度，并且可以直接使用内置的着色器包，避免了复杂的着色器代码编写。后期处理通道一般都按顺序执行，后加入的会覆盖前面的通道。
three.js入门知识点整理
JingYan_Chan的博客
07-13 1194
关于threejs和react-three-fiber的学习
three贴图地面
qq_34631220的博客
04-01 683
const geometry = new THREE.PlaneGeometry( 10000, 10000); const texture = new THREE.TextureLoader().load('/static/gltf/wuxuanxian/x/3d66Model-792313-files-13.jpg'); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat..
three.js 中的常量
yinge0508的博客
03-07 491
纹理常量： 包裹模式 THREE.RepeatWrapping THREE.ClampToEdgeWrapping THREE.MirroredRepeatWrapping
10.ThreeJs开发指南-第十章-加载和使用纹理
热门推荐
KingW
09-02 1万+
第十章 加载和使用纹理在材质中使用纹理function createMesh(geom,imageFile){ var texture = THREE.ImageUtils.loadTexture('../assets/textures/general/' + imageFile); var mat = new THREE.MeshPhongMaterial(); mat.map
探索三维世界【2】：Three.js 的 Texture 纹理
共勉
05-02 2764
你可以使用 TextureLoader 加载网页中的图像，然后在场景中创建一个新的纹理对象，并将其应用到任何需要的物体表面上。纹理是指将一张图像映射到 three.js 场景中的物体表面上的过程。在进行创建纹理加载器时，直接通过THREE父类进行创建，之后通过load方法进行加载图片到对应的纹理对象上。因此，TextureLoader 和 Texture 以及其子类之间是一种解耦的关系，TextureLoader 负责纹理的加载和创建工作，而 Texture 及其子类则负责实现具体的纹理效果和属性。
Three.js - 设置纹理offset偏移模拟箭头线性流动
ithanmang
10-30 7698
1、效果 通过循环 texture的offset属性值，可以实现，类似字幕的运动，以及箭头的线性流动等效果 2、示例地址 https://ithanmang.gitee.io/threejs/home/201810/20181030/01-texture-offset偏移.html 3、相关属性 该示例使用的是平面网格，然后加上材质贴图，设置纹理重复覆盖THREE.RepeatWrapping 然...
既有方向又会动的线，包你学会制作按箭头方向流动的线(three.js实战3)
点燃火柴的博客
06-13 6660
制作按箭头方向流动的线1.demo效果2. 实现思路3. 实现要点3.1 创建箭头流动线3.2 创建流动线3.3 更新纹理偏移4. demo代码 1.demo效果 2. 实现思路 实现思路比较简单，使用纹理材质创建网格对象，然后在render函数中改变纹理的偏移量（texture.offset.x），实现流动的效果 3. 实现要点 3.1 创建箭头流动线 创建长条状平面 使用THREE.PlaneGeometry类创建一个长条状平面，用来填充箭头纹理 创建纹理材质 使用TextureLoade
【Three.js】第十一章 Textures 纹理
m0_68324632的博客
06-01 1093
您可能知道，纹理是覆盖几何体表面的图像。许多类型的纹理会对几何体的外观产生不同的影响。这不仅仅是关于颜色。以下是最常见的纹理类型，使用了João Paulo著名的门纹理。如果您喜欢他的作品，请给他买一个Ko-fi或成为Patreon。
THREEJS中文API文档整理分享
在Three.js的中文API文档中，通常会包含以下几个方面的知识点： 1. **Three.js基础概念**：文档会介绍Three.js中的一些基础概念，比如场景（Scene）、相机（Camera）、渲染器（Renderer）、几何体（Geometry）、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值