- 博客(115)
- 收藏
- 关注
RSS订阅原创 Three导入dae格式模型实例
FBX最大的用途是用在诸如在 Max、Maya、Softimage 等软件间进行模型、材质、动作和摄影机信息的互导，这样就可以发挥 Max 和 Maya 等软件的优势。这是一个商业的格式，但也开放给了第三方软件，但总是感觉除了他自己的软件之外或多或少的都有解决不完的问题。设置控件的target属性，会改变相机的lookAt视点，但是修改相机的lookAt是不会影响THREE.OrbitControls的target的，原因是控件的默认目标并不是相机的聚焦点。控制器的焦点，.object的轨道围绕它运行。
2022-11-13 16:58:08
1036
3
原创 Three Ammo实现物理作用实例
让我们用一个简单的例子说明：我们希望创建一个对物理有反应的3D立方体。在图形端我们将创建一个由BoxGeometry几何体对象和材质对象组成的网格模型。因此，为了正确地模拟动力有必要在我们的物理世界中创建刚体。为此，我们希望包含在物理模拟中的每个3D对象(图像世界中的)都将拥有自己的刚体(在物理世界中)。然而，模拟的每个3D对象并不具有相同的形式，因此并不会在相同的物理作用场景中做出相同的反应。我们称物理世界中受动态力影响的所有实体为刚体(具有质量、速度和能够进行碰撞等)。这就是我们所说的碰撞的几何结构。
2022-11-04 22:52:58
845
原创 Three outline物体边界线条实例
当前 bufferGeometry 的外边界球形，可以通过 .computeBoundingSphere() 计算。检测所有在射线与物体之间，包括或不包括后代的相交部分。返回结果时，相交部分将按距离进行排序，最近的位于第一个。recursive —— 若为true，则同时也会检查所有的后代。否则将只会检查对象本身。object —— 检查与射线相交的物体。object —— 相交的物体。
2022-11-01 15:42:27
367
原创 Three后期处理glitch(短时脉冲波干扰)实例
RenderPass通常位于过程链的开始，以便将渲染好的场景作为输入来提供给下一个后期处理步骤。GlitchPass将会使用这些图像数据，来应用一个疯狂的故障效果。将该向量转换为单位向量（unit vector），也就是说，将该向量的方向设置为和原向量相同，但是其长度（length）为1。添加对象到这个对象的子级，可以添加任意数量的对象。当前传入的对象中的父级将在这里被移除，因为一个对象仅能有一个父级。这是Three.js中大部分对象的基类，提供了一系列的属性和方法来对三维空间中的物体进行操纵。
2022-10-27 12:00:27
299
原创 Three lava岩浆圈实例
看看解释的意思是：获取x和minVal之间较大的那个值，然后再拿较大的那个值和最后那个最大的值进行比较然后获取较小的那个。clamp实际上是获得三个参数中大小处在中间的那个值。函数有个说明：如果minVal > minMax的话，函数返回的结果是未定的。也就是说x的值大小没有限制，但是minval的值必须比maxVal小。用于在three.js中实现后期处理效果，该类管理了产生最终视觉效果的后期处理过程链。后期处理过程根据它们添加/插入的顺序来执行，最后一个过程会被自动渲染到屏幕上。
2022-10-26 20:56:34
222
原创 Three点阵交互实例
geometry —— （可选）是一个BufferGeometry的实例，默认值是一个新的BufferGeometry。返回一个新的 BufferGeometry ，其中包含将所有（在容差范围内的）具有相似属性的顶点合并而成的顶点。BufferGeometryUtils：一个包含 BufferGeometry 实例的实用方法的类。material —— （可选） 是一个对象，默认值是一个PointsMaterial。tolerance – 要合并的顶点属性之间允许的最大差异。4.鼠标移开后原点缩小一部分。
2022-10-24 18:12:31
596
原创 IntersectionObserver实现滚动加载
实际上，因为 document.querySelector 如果元素不存在就会返回 null ，而当 element 传递给 sectionObserver.observe() 时，如果 element 是 null ，就会抛出上述异常发生 Failed to execute ‘observe’ on ‘IntersectionObserver’: parameter 1 is not of type ‘Element’ ，所以请确保 document.querySelector 选择的元素必须存在。
2022-10-20 13:02:35
977
原创 Three 自定义着色器Shader实例
如下形式的对象：{ “uniform1”: { value: 1.0 }, “uniform2”: { value: 2 } }，指定要传递给shader代码的uniforms；键为uniform的名称，值(value)是如下形式：{ value: 1.0 }这里 value 是uniform的值。顶点/片段着色器的GLSL代码，这是shader程序的实际代码。1.Shader着色器，是一个用GLSL(openGL sharding language)编写的小程序 ，在GPU上运行。
2022-10-19 15:37:10
574
原创 Three Shader应用实例
Vector3.setFromSphericalCoords ( radius : Float, phi : Float, theta : Float ) : this------------------------------------从球坐标中的radius、phi和theta设置该向量。degToRad ( degrees : Float ) : Float--------------将度转化为弧度。sigma -(可选)指定一个以弧度为单位的模糊半径，应用于PMREM生成之前的场景。
2022-10-17 21:59:12
680
原创 Three多点物体实例
BufferGeometry：是面片、线或点几何体的有效表述，包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。使用来自Texture的数据设置点的颜色。可以选择包括一个alpha通道，通常与 .transparent或.alphaTest合用。设置运行alphaTest时要使用的alpha值。如果不透明度低于此值，则不会渲染材质。点材质(PointsMaterial)：Points使用的默认材质。
2022-10-15 20:54:34
240
原创 Three全景天空盒子-太阳神庙实例
使用getContext()可以获取对绘图上下文的引用，对于平面图形，需要给这个方法传入参数’2d’，表示要获取2d上下文对象。.enableDamping : Boolean将其设置为true以启用阻尼（惯性），这将给控制器带来重量感。注意若该值被启用，必须在动画循环里调用.update()。console.log(image.height) console.log(image.width)可知图片宽度是高度的八倍。2d绘图上下文内置支持操作对象，使用drawImage()方法将现有图像绘制到画布上。
2022-10-13 22:23:02
354
原创 Three morph图形变换实例
Object.keys()：获得对象上所有可枚举的实例属性。这个方法接受一个对象作为参数，返回包含该对象所有可枚举属性名称的字符串数组。向GUI添加一个新的控制器，创建的控制器类型是从对象[property]的初始值推断出来的。有关颜色属性，请参见addColor。在传入的时间间隔内，逐渐将此动作的权重（weight）由0升到1/由1降至0，两方法均可链式调用。GridHelper：坐标格辅助对象，坐标格实际上是2维线数组。
2022-10-12 22:18:19
322
原创 Three dynamic_sea实例
纹理在每一个方向U和v的表面上重复了多少次，如果repeat在任何一个方向上都大于1，相应的Wrap参数也应该设置为THREE.RepeatWrapping或THREE.mirrredrepeatwrapped以实现所需的平铺效果。请注意：纹理中图像的平铺，仅有当图像大小（以像素为单位）为2的幂（2、4、8、16、32、64、128、256、512、1024、2048、……）时才起作用，宽度、高度无需相等，但每个维度的长度必须都是2的幂。当开发者改变了该队列的值，则标志位需要设置为 true。
2022-10-09 17:49:22
434
原创 Three立体文本实例
FontLoader：一个用于加载JSON格式的字体的类，返回font， 返回值是表示字体的Shape类型的数组。（表示文本的）曲线上点的数量。边界矩形不会默认计算，需要调用该接口指定计算边界矩形，否则保持默认值 null。文本上斜角的深度，默认值为20。字体大小，默认值为100。font — THREE.Font的实例。text — 将要显示的文本。
2022-10-08 13:05:48
409
原创 Three extrude挤压模型实例
如果没有点被指定，一个空的形状将会被创建，且.currentPoint将会被设为原点。当使用ExtrudeGeometry创建Mesh的时候，如果你希望分别对它的表面和它挤出的侧面使用单独的材质，你可以使用一个材质数组。bevelEnabled — bool，对挤出的形状应用是否斜角，默认值为true。steps — int，用于沿着挤出样条的深度细分的点的数量，默认值为1。curveSegments — int，曲线上点的数量，默认值是12。depth — float，挤出的形状的深度，默认值为1。
2022-10-06 15:54:45
561
原创 Three读取pdb文件创建分子结构图实例
BufferAttribute:这个类用于存储与BufferGeometry相关联的 attribute（例如顶点位置向量，面片索引，法向量，颜色值，UV坐标以及任何自定义 attribute ）。在该向量与传入的向量v之间的线性插值，alpha是沿着线的长度的百分比 —— alpha = 0 时表示的是当前向量，alpha = 1 时表示的是所传入的向量v。获取给定索引的矢量的第一维元素 （即 X 值）。获取给定索引的矢量的第二维元素 （即 Y 值）。获取给定索引的矢量的第三维元素 （即 Z 值）。
2022-10-05 21:38:16
582
原创 Three物体剪切clipping实例
用户定义的剪裁平面，在世界空间中指定为THREE.Plane对象。空间中与平面的有符号距离为负的点被剪裁（未渲染）。在三维空间中无限延伸的二维平面，平面方程用单位长度的法向量和常数表示为海塞法向量Hessian normal form形式。用户自定义的剪裁平面，在世界空间中被指定为THREE.Plane对象。这些平面全局使用，空间中与该平面点积为负的点将被切掉。normal - (可选参数) 定义单位长度的平面法向量Vector3。constant - (可选参数) 从平面到原点的有符号距离。
2022-09-30 15:07:21
596
原创 Three调用外部导入模型动画实例
材质定义了3D对象的外观，动画定义了3D对象的变换操作(比如旋转、平移操作)。蒙皮定义了3D对象如何进行骨骼变换，相机定义了渲染程序的视锥体设置。这里为什么render()渲染函数在onLoad()回调函数中呢，GLTFLoader 依赖 ES6 Promises，.load models是一个异步调用过程，加载需要时间，这段时间内mixer为空，原位置调用则mixer.update不存在。该函数接收parse所返回的已加载的JSON响应。onError — （可选）若在加载过程发生错误，将被调用的函数。
2022-09-28 13:43:13
666
原创 Three动画animation初步
值数组中的每一个成员，属于某一特定时间点，不仅可以是一个简单的数字，还可以是一个向量（如果是位置动画）或者是一个四元数（如果是旋转动画）。因此，值数组的长度可能是时间数组的三四倍。关键帧轨道(KeyframeTrack)中总是存在两个数组：times数组按顺序存储该轨道的所有关键帧的时间值，而values数组包含动画属性的相应更改值。关键帧轨道(KeyframeTrack)是关键帧(keyframes)的定时序列, 它由时间和相关值的列表组成, 用来让一个对象的某个特定属性动起来。
2022-09-27 22:02:53
760
原创 Three阴影指示器实例
较高的值会以计算时间为代价提供更好的阴影质量。值必须是2的幂，直到给定设备的WebGLRenderer.capabilities.maxTextureSize， 宽度和高度不必相同（例如，（512,1024）有效）。默认值为（512,512）。如果设置了灯光的距离属性，则远剪裁平面将跟踪该值，否则默认为500。这是一个可以帮助可视化给定光的阴影图的helper。从光的角度来看，其他物体背后的物体将处于阴影中。.specular高亮的程度，越高的值越闪亮，默认值为 30。这定义了材质的光泽度和光泽的颜色。
2022-09-23 21:06:59
486
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人