three.js 源码注释（六十八）extras/geometries/BoxGeometry.js

最新推荐文章于 2024-04-27 20:09:33 发布
最新推荐文章于 2024-04-27 20:09:33 发布
阅读量2.3k 收藏
点赞数
分类专栏： webgl three.js gles javascript 库 THREE.JS源码注释 文章标签： 图形 三维 webgl three.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/omni360/article/details/43152431
版权
本文详细注释了THREE.JS库中extras/geometries/BoxGeometry.js的源码，适合学习和理解three.js如何创建三维立方体几何体。内容包含对关键函数和结构的解释，并提供了代码注释的链接。
摘要由CSDN通过智能技术生成

商域无疆 (http://blog.csdn.net/omni360/)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句：商域无疆 -  本博客专注于 敏捷开发及移动和物联设备研究：数据可视化、GOLANG、Html5、WEBGL、THREE.JS，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。


俺也是刚开始学,好多地儿肯定不对还请见谅.

以下代码是THREE.JS 源码文件中extras/geometries/BoxGeometry.js文件的注释.

更多更新在 : https://github.com/omni360/three.js.sourcecode


/**
 * @author mrdoob / http://mrdoob.com/
 * based on http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/org/papervision3d/objects/primitives/Cube.as
 */
/*
///BoxGeometry用来
最低0.47元/天 解锁文章
商域无疆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
three.js 源码注释（八十二）extras/geometries/RingGeometry.js
omni360的专栏
02-01 1879
RingGeometry用来在三维空间内创建一个二维圆环面对象. 用法: var geometry = new THREE.RingGeometry(1,5,32); var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); var Ring = new THREE.Mesh(geometry,material); scene.add(Ring); <summary>TorusGeometry</summar
three-rounded-box:THREE.js的带有圆角边缘的几何类
05-10
三圆盒 观看。 带有圆角边缘的几何类。 扩展THREE.BufferGeometry 。 建设者 RoundedBoxGeometry（ width ， height ， depth ， radius ， radiusSegments ） width = Float //size of box in x axis, default 1 height = Float //size of box in y axis, default 1 depth = Float //size of box in z axis, default 1 radius = Float //radius of the fillet, default 0.15 radiusSegments = Int //segments alo
学习three.js之几何体-三维立方体BoxGeometry(vue中使用three.js24)
点燃火柴的博客
11-20 4216
BoxGeometry几何体介绍和使用1.BoxGeometry几何体介绍2.demo说明3.demo代码 1.BoxGeometry几何体介绍 BoxGeometry可以用来创建三维立方体，可以指定立方体的宽度、高度、深度以及这三个方向上的分段数，接下来介绍一下这些参数： 属性 必须 描述 width 是 该属性指定方块的宽度，指沿x轴方向上的长度 height 是 该属性指定方块的高度，指沿y轴方向上的长度 depth 是 该属性指定方块的深度，指沿z轴方向上的长度 widt
立方几何体（BoxGeometry）
liuhao9999的博客
12-08 2504
BoxGeometry是四边形的原始几何类，它通常使用构造函数所提供的“width”、“height”、“depth”参数来创建立方体或者不规则四边形。 示例 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); var cube = new THREE.Mesh( geometry, material ); scene.ad...
three.js从入门到精通系列教程006 - three.js创建旋转立方体BoxGeometry
深南大道
01-20 449
【代码】three.js从入门到精通系列教程006 - three.js创建旋转立方体BoxGeometry。
初识 three.js
肖的博客
11-15 463
认识 three.js 官方文档 安装 yarn add three 引入 import * as THREE from 'three' 使用 threeAnimation() { const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.in...
three.js 源码注释（七十四）extras/geometries/ExtrudeGeometry.js
omni360的专栏
01-30 2880
ExtrudeGeometry用来通过截面(参数shape)生成拉伸几何体. <summary>ExtrudeGeometry</summary> <param name ="shapes" type="THREE.Shape">拉伸几何体截面</param> <param name ="options" type="Object">拉伸几何体参数选项</param> * parameters = { * * curveSegments: <int>, // number of points on
three.js 源码注释（八十八）extras/GeometryUtils.js
omni360的专栏
02-01 2988
/************************************************************** * GeometryUtils geometry对象的工具集 **************************************************************/ merge方法将两个几何体对象或者Object3D里面的几何体对象合并,(使用对象的变换)将几何体的顶点,面,UV分别合并. NOTE: merge方法在新版本中已经放到了Geomet对象下
three.js 源码注释（八十九）extras/ImageUtils.js
omni360的专栏
02-01 3231
/************************************************************** * ImageUtils image对象的工具集,更方便的加载图片的辅助类. **************************************************************/ /* loadTexture加载url指定的位置的图片资源,并创建纹理,返回纹理对象. */ <summary>loadTexture</summary> <param n
three.js 入门四：THREE.BoxGeometry 解析
火焰
03-14 6608
就是一个面有4个点, 假设长宽深的segments都是1的话(默认是1), 那么每个。BoxGeometry在创建的时候, 内部划分成了6个。代码在上方下载链接。
three.js 包围盒`Box3`
u014291990的博客
12-13 975
所谓包围盒Box3，就是一个长方体空间，把模型的所有顶点数据包围在一个最小的长方体空间中，这个最小长方体空间就是该模型的包围盒Box3。
three.js 编辑器中菜单栏中添加一个box
海涛高软
07-03 238
相关文章： three.js为对象添加一个脚本执行的逻辑 three.js编辑挂在对象上的一个脚本 FR:徐海涛（hunkxu) FR：徐海涛（hunk Xu) QQ技术交流群：386476712
Three.js——十五、Box3、相机动画、lookAt()视线方向、管道漫游案例、OrbitControls旋转缩放限制、以及相机控件MapControls
NanChen的博客
07-17 2304
正投影相机和透视相机的区别 如果都以高处俯视去看整个场景，正投影相机就类似于 2d 的可视化的效果，透视相机就类似于人眼观察效果如果你想整体预览全部立方体，就需要调整相机的渲染范围，比如设置上下左右的范围。使用场景：正投影可以用来预览中国地图，或者 2D 可视化的效果 透视投影相机一般是人在场景用漫游，或者高俯视整个就是将整个模型的所有顶点包裹起来形成一个长方体，此长方体就是 Box3 改变相机的位置.position，三维场景在 canvas 画布上呈现不同的效果，如果连续改变相机的位置.positi
three.js 包围盒简单应用
weitaming1的博客
08-30 8408
一、包围盒 二、包围盒简单应用： （一）移动模型到合适的位置 计算多个模型组合的group的包围盒 var bbox = new THREE.Box3().setFromObject(group) 将导入的外部模型移动到世界坐标中心。（比较粗糙的，实际上是包围盒的中心移动到世界坐标中心，而非实际模型） 注意点：从代码中看，group.position.set(-x1,-y1,-z1)...
Threejs 通过 THREE.Box3 实现碰撞检测
IkeShyZz的博客
02-09 5181
根据官方文档：https://threejs.org/docs/#api/en/math/Box3.intersectsSphere Class 1： 我需要操作的物体 protected init () { // 创建一个正方体 let geometry = new THREE.BoxGeometry(0.1, 0.025, 0.05, 1, 1, 1); let material = new THREE.MeshPhongMaterial( { color: 0x000000, tran.
three.js 学习笔记 | 光线投射技术 - 包围盒(碰撞检测)
好好学习天天向上
04-27 1854
如果没有设置则每次调用都会初始化一个新数组。
threejs包围盒的应用
yunduanzhijie的博客
01-05 4639
1、可以当作场景边界的判定值 2、用于相机飞行的参考值 3、物体碰撞的载体 4、不规则物体的体积判断 5、不规则物体的中心点计算（group更好用）
three.js 05-04 之 BoxGeometry 几何体
zhulx_sz 的博客
12-15 7069
前面几篇介绍的都是基于二维的平面几何体。今天开始介绍基于三维的几何体，譬如像 BoxGeometry 方块。这是一种非常简单的三维几何体，你只要指定宽度、高度及深度就可以创建出一个方块。下面给出了常用的几个属性： 属性 描述 width 必选。此属性定义方块的宽度。即方块沿 x 轴方向的长度 height 必选。此属性定义方块的高度。即方块沿 y
three.js 实现地下水的三维建模
最新发布
07-04
three.js是一个基于WebGL的JavaScript库，用于创建互动式的3D图形和动画。要在three.js中实现地下水的三维建模，你可以按照以下步骤操作： 1. **设置场景**（Scene）：首先，创建一个新的Three.js场景，并配置好相机（Camera）和渲染器（Renderer），通常使用`THREE.PerspectiveCamera`和`THREE.WebGLRenderer`。 2. **加载几何体（Geometry）**：地下水可能涉及到复杂的流线形状，可以考虑使用自定义几何体或者现有的库如`@mrdoob/three-extras`中的地形模型。如果要表现水流动感，可以使用流形曲面或者分块几何体构建类似波纹的效果。 3. **纹理贴图（Texturing）**：使用水资源相关的纹理贴图给地下水面添加真实感，这可以通过`THREE.TextureLoader`加载图片并应用到几何体表面。 4. **材质（Material）**：选择合适的着色器，例如`THREE.WaterShader`或自定义的透明/反射材质（`THREE.MeshBasicMaterial`, `THREE.MeshPhongMaterial` 或 `THREE.ShaderMaterial`），模拟水的折射、反射效果。 5. **动态更新**：如果要展示流动的地下水，可以结合物理引擎如` Cannon.js`或`ammo.js`来模拟水流的运动，或者使用time-based animations来变化几何体的位置和姿态。 6. **照明（Lighting）**：适当的环境光和点光源可以帮助增强视觉效果，比如阳光照射出水面的反光。 7. **交互与用户控制**：为模型添加交互功能，比如鼠标悬停、点击等事件，以模拟观察者的行为。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值