three.js 学习系列05

最新推荐文章于 2023-11-20 13:26:38 发布
最新推荐文章于 2023-11-20 13:26:38 发布
阅读量280 收藏
点赞数
分类专栏： webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tomihaohao/article/details/105236891
版权

这一节我们学习 使用几何体

planeGeometry
在这里插入图片描述
在这里插入图片描述
CircleGeometry
在这里插入图片描述
在这里插入图片描述
ShapeGeometry
在这里插入图片描述
在这里插入图片描述
BoxGeometry
在这里插入图片描述
在这里插入图片描述
SphereGeometry 球几何体
在这里插入图片描述
在这里插入图片描述
CylinderGeometry 圆柱几何体
在这里插入图片描述
在这里插入图片描述
TorusGeometry 圆环几何体
在这里插入图片描述
在这里插入图片描述
TorusKnotGeometry 圆环扭结几何体
在这里插入图片描述
在这里插入图片描述
PolyhedronGeometry 多面几何体
在这里插入图片描述
在这里插入图片描述

  • 开始创建几何体时选择一种合适的材质。不要直接使用那些复杂的材质，可以从简单的MeshBasicMaterial 材质开始并将 wireframe 属性设置为true 或者可以使用 MeshNormalMaterial 材质可以
  • 创建二维几何体的时候 Z轴没有考虑，如果你想拥有一个水平的二维图形，那么你必须将这个网格绕X轴旋转 -0.5*Pi
  • 如果你要旋转一个二维图形，或者一个开放的三维图形 例如圆柱或者管子 记住要将材质设置成THREE.DoubleSide
Tomihaohao
关注
专栏目录
threejs-tutorial:Three.js 系列教程，学习和探索 Three.js 世界
04-18
threejs-tutorial 从今天 2020年11月27日 开始学习和探索 Three.js 。 以下内容更新于 2021.04.16 特别提醒： 本教程最开始使用的是 r123 版本，但是后来 Three.js 更新到 r125 版后，r125 中做了一些修改，将 ...
three.js跳动的火焰 流动的河
07-14
three.js是JavaScript的一个流行库，用于在Web浏览器中进行3D图形渲染。这个项目可能是为了展示如何利用three.js的特性来模拟真实世界的物理现象，如火的燃烧和水的流动。 在描述中提到的“很简单的一个效果”，...
Three.js中的几何体
yinge0508的博客
12-08 670
1，CylinderGeometry 一个用来创建圆柱几何体模型的类 var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 ); var material = new THREE.MeshBasicMaterial( {color: 0xffff00} ); var cylinder = new THREE.Mesh( geometry, material ); scene.add( cylinder ); 构造器（Constructor）.
Three.js学习05
qq_43881663的博客
10-03 1267
提示：本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。 文章目录前言一、纹理贴图1.将几何体模型整个表面进行纹理贴图2.利用数组将几何体模型某些面进行不同的纹理贴图二、利用face3的.materialIndex 将几何体的某些三角面改变材质（颜色、贴图等）三、1.c2.c2.1 c 前言 本篇主要介绍。 一、纹理贴图 1.将几何体模型整个表面进行纹理贴图 声明几何体后使用 THREE.TextureLoader() 方法创建一个纹理加载器对象加载图
前端开发three.js入门超详细学习，一起来学习3D吧
前端开发工程师
11-20 5230
Three.js 是一个用于在 Web 浏览器中创建和渲染 3D 图形的 JavaScript 库。它提供了一系列强大的功能和工具，使开发者能够轻松地在网页中创建交互式的 3D 场景和动画。
Three.js学习07
qq_43881663的博客
10-07 945
提示：本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。 文章目录前言一、精灵模型Sprite1.设置纹理贴图2.精灵材质对象SpriteMaterial3.创建精灵模型对象4.scale.set() 方法设置精灵大小二、精灵模型模拟森林场景1.创建草坪2.利用for循环设置一定数量的雨滴精灵模型三、精灵模型模拟下雨场景1.创建草坪2.创建group群组里放入一定数量的雨滴3.利用函数让渲染器渲染遍历雨滴群组，控制刷新频率产生动画效果，然后执行渲染操作。
Three.js学习02
qq_43881663的博客
10-01 385
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、顶点1.几何体由三角形构成，三角形由3个顶点构成面2.顶点法向量2.1 不设置顶点法向量2.2 添加法向量使光源参与光照计算2.3 添加法向量没有效果的问题3.重复的顶点数据可以用顶点索引总结 前言 提示： 提示： 一、顶点 1.几何体由三角形构成，三角形由3个顶点构成面 首先明确几何体都由三角形构成，两个三角形拼成一个矩形平面。比如一个立方体网格模型由6个矩形构成。 球体网格模型也是通过三角形构成一个球面，三角形数量越
Three.js学习09
qq_43881663的博客
10-25 432
提示：本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。 文章目录前言一、三维模型导入1.stl格式的三维模型导入1.1 引入STLLoader.js文件1.2 使用 THREE.STLLoader() 创建加载器加载模型1.3 效果2.obj格式的三维模型导入2.1 引入OBJLoader.js和MTLLoader.js文件2.2 使用 THREE.OBJLoader()和THREE.MTLLoader() 创建加载器加载模型2.3 改变材质属性 前言
Three.js学习七——播放模型动画时模型沿着轨迹移动
热门推荐
Mr_Bobcp的博客
06-10 2万+
在播放导入的模型动画同时，让模型沿着预定路径轨迹移动。例如导入一个会跑步动作的模型，让它沿着一条类似跑道的路径跑步移动。模型使用的是官方示例中的Soldier模型。
Three.js学习10
qq_43881663的博客
11-18 720
提示：本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。 文章目录前言一、光线投射Raycaster1.a2.a2.1 a二、b1.b2.b2.1 b三、c1.c2.c2.1 c 前言 本篇主要介绍光线投射Raycaster用于进行鼠标拾取，形成鼠标点击事件的效果。 一、光线投射Raycaster 想要给物体添加点击事件，官方文档提供了一个Raycast类进行物体拾取。这个类用于进行raycasting（光线投射）, 光线投射用于进行鼠标拾取（在三维空
Three.js系列: 造个海洋球池来学习物理引擎
程序员秋风的博客
05-24 626
github地址：https://github.com/hua1995116/Fly-Three.js 大家好，我是秋风。继上一篇《Three.js系列:   游戏中的第一/三人称视角》今天想要和大家分享的呢，是做一个海洋球池。 海洋球大家都见过吧？就是商场里非常受小孩子们青睐的小球，自己看了也想往里蹦跶的那种。 就想着做一个海洋球池，然后顺便带大家来学习学习 Three.js 中的物理引擎。 那么让我们开始吧，要实现一个海洋球池，那么首先肯定得有“球”吧。 因此先带大家来实现一个小球，而恰恰在
three.js的室内地图展示
05-21
three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得更加简单。通过这个项目，我们可以学习到以下几个关键知识点： 1. **WebGL基础**：WebGL是一种在浏览器中渲染3D图形的标准，它是OpenGL的一...
three.js-r133.zip
06-16
而Three.js则抽象了WebGL的复杂性，提供了一系列直观的类和方法，让开发者可以专注于创意，而不是底层的图形编程。 二、Three.js-r133版本特色 1. **改进和优化**：r133版本可能包含了对先前版本的性能优化和错误...
three-building:three.js+vue 3D建筑
08-04
【标题】：“three-building:three.js+vue 3D建筑” ...通过学习这个项目，开发者不仅可以掌握如何在Vue应用中集成Three.js，还可以了解到如何创建和控制3D对象，以及如何利用Vue的组件系统来构建复杂的3D交互应用。
基于java的共享汽车管理系统的开题报告2.docx
09-25
基于java的共享汽车管理系统的开题报告2.docx
基于SpringBoot的ChongyouLostandfound失物招领网站设计源码
09-25
该源码是一款基于SpringBoot框架构建的重邮失物招领网站，包含了250个文件，涵盖101个XML配置文件、44个Java源代码文件、26个HTML页面文件、20个JavaScript脚本文件、12个CSS样式文件、12个图片文件（JPG格式）、10个属性文件、5个ICO图标文件、5个PNG图片文件、4个SVG矢量图形文件。项目采用Java、HTML、JavaScript和CSS等多种语言实现，功能完善，界面友好。
小白学JavaScript的第六天
最新发布
09-25
小白学JavaScript的第六天
源享科技STM32学习开发板芯片资料74HC595
09-25
源享科技STM32学习开发板芯片资料74HC595
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值