
three.js
文章平均质量分 71
jieyucx
这个作者很懒,什么都没留下…
展开
-
blender基本操作
在Blender中,基本操作是非常重要的,掌握这些操作可以让您更轻松地进行建模、动画制作等工作。本文介绍了Blender的选择、移动、变换、吸附、模式切换等基本操作,希望对初学者有所帮助。当然,Blender的功能非常丰富,还有很多其他的功能和工具等待着您去探索。原创 2023-09-05 15:49:43 · 2850 阅读 · 0 评论 -
blender基础认识(选项开关、工具栏、视图等)
Blender是一个功能强大的三维建模软件,学习它需要一定的时间和努力。在本文中,我们介绍了Blender的基础认识,包括选项开关、工具栏、视图等的使用方法。通过学习这些基础知识,你可以更好地掌握Blender的使用,提高自己的建模技能。希望本文对你有所帮助,也希望你可以继续深入学习Blender,创造出更加出色的作品。原创 2023-08-03 11:21:39 · 6540 阅读 · 0 评论 -
blender的下载安装和配置中文环境
在这篇文章中,我们详细地介绍了怎样下载、安装Blender和如何配置中文环境。希望这些步骤对那些想要开始使用Blender但又对如何开始感到困惑的人们有所帮助。总的来说,Blender是一款强大的3D创建软件,值得我们投入时间去学习和使用。只要按照这些步骤进行,即使是初学者也能渐渐熟悉它的操作过程。轻松设定中文环境后,我们就可以更好地理解和使用Blender了。希望大家都能从中获得乐趣,并借此机会发掘出自己的创造潜力。原创 2023-08-02 18:00:21 · 25343 阅读 · 5 评论 -
threeJs着色器ShaderMaterial以及统一着色语言GLSL语法基本介绍
好啦,到这里我们详细介绍了three.js库中的着色器ShaderMaterial和统一着色语言GLSL的基本语法。首先介绍了ShaderMaterial在three.js中的地位以及功用。它是一种特殊的材质书写方式,让你可以编写自定义着色器。ShaderMaterial给予了我们底层的、未过滤的访问权,让我们可以编写自己的顶点(vertex)和片段(fragment)着色器程序。接着深入解析了统一着色语言GLSL(OpenGL Shading Language)的语法基础。原创 2023-07-21 10:26:58 · 2765 阅读 · 0 评论 -
webGL渲染流程
WebGL是一种用于在网页浏览器中的。它基于标准,并允许开发人员使用JavaScript和其他Web技术创建高性能的图形和交互式内容。WebGL可以直接访问用户的图形硬件,并利用图形处理单元(GPU)进行快速图形渲染,从而实现在现代网页浏览器上展示逼真的3D图形和效果。通过WebGL,开发人员可以创建各种各样的应用程序,包括VR)和AR)应用等。原创 2023-07-04 15:57:23 · 1975 阅读 · 0 评论 -
three.js应用cannon物理引擎设置物体的相互作用
Cannon.js是一个基于JavaScript的,可以用于。它提供了一系列的物理模拟功能,包括等。Cannon.js 的Cannon.js 是一个功能强大、灵活且易于使用的 3D 物理引擎,它可以帮助开发者轻松实现真实世界中的物理效果,并在浏览器中展示出来。无论是游戏开发还是模拟应用程序,Cannon.js 都是一个优秀的选择。这个示例展示了如何使用Cannon.js和Three.js实现鼠标拾取功能。鼠标拾取是指通过鼠标点击来选择和交互3D场景中的物体。原创 2023-07-03 16:14:36 · 1806 阅读 · 0 评论 -
three.js利用点材质打造星空
这里只是做个简单的介绍,详细的介绍大家可以看看THREE.BufferGeometry及其属性介绍是Three.js中的一个重要的类,用于管理和操作几何图形数据。它是对的一种更新和改进,通过直接操作二进制数组来提高绘制性能。在Three.js中,几何图形数据通常存储在顶点属性数组中。传统的THREE.Geometry使用JavaScript数组来存储这些数据,而THREE.BufferGeometry则使用更高效的TypedArray(如Float32Array、Uint16Array等)。原创 2023-06-30 10:56:32 · 997 阅读 · 0 评论 -
three.js点材质(PointsMaterial)常用属性设置
上一章节简单介绍了下怎么使用点材质和点对象创建物体这一章节介绍一下点材质上的常用属性。原创 2023-06-30 09:39:10 · 1403 阅读 · 12 评论 -
three.js中的点对象(Point)和点材质(PointsMaterial)
点材质用于渲染点对象,它决定了点的颜色、透明度等属性。原创 2023-06-27 20:17:17 · 3777 阅读 · 5 评论 -
three.js中聚光灯及其属性介绍
Three.js中的聚光灯(SpotLight)是一种用于在场景中创建聚焦光照的光源类型。:聚光灯的颜色。:聚光灯的强度。:聚光灯的有效距离。:聚光灯的光锥角度。:聚光灯锥形光圈的模糊半径。:聚光灯的衰减系数。:聚光灯的位置。:聚光灯的目标位置(用于确定聚光灯的方向)。原创 2023-06-26 18:41:30 · 1172 阅读 · 0 评论 -
three.js中物体的灯光与阴影设置
在three.js中,使用new THREE.DirectionalLight可以创建一个方向光源。这个光源可以通过设置阴影属性来让场景中的对象产生阴影。设置阴影属性mapSize:阴影贴图的大小。可以使用THREE.Vector2或者数字类型的参数来设置。bias:偏移量,用于保持阴影的正确性。可以使用数字类型的参数来设置。camera:阴影相机。原创 2023-06-26 17:22:45 · 1326 阅读 · 0 评论 -
three.js通过CubeTexture加载环境贴图,和RGBELoader加载器加载hdr环境贴图
RGBELoader是一个three.js中的纹理加载器,它可以加载HDR格式的纹理。HDR格式有更高的精度和更广的颜色范围,能够更好地表现真实的光照和阴影等细节。导入RGBELoader模块:import {创建RGBELoader实例:加载HDR纹理:});加载器使用的第一个参数是纹理的路径,第二个参数是加载成功后的回调函数。在回调函数中可以获取加载成功后的texture对象并进行相关操作。第三个参数是加载进度的回调函数,第四个参数是加载失败的回调函数。原创 2023-06-26 11:55:44 · 7154 阅读 · 1 评论 -
three.js加载管理器LoadingManager实现对纹理图片的加载监听
LoadingManager是three.js中的加载管理器,用于监控和管理加载资源的过程。通过使用LoadingManager,我们可以在应用程序中方便地加载各种类型的数据,例如模型、纹理、声音等,而不必为加载过程中的事件处理器和错误处理器编写复杂的代码。使用LoadingManager是很简单的,首先创建一个新的LoadingManager对象并设置它的事件处理器。然后,我们可以通过将LoadingManager对象作为参数传递给各种加载器类来进行实际的加载。原创 2023-06-26 10:24:30 · 1139 阅读 · 0 评论 -
three.js标准网格材质(MeshStandardMaterial)光照、粗糙度、金属度、法线属性介绍
PBR代表物理上逼真的渲染,是一种在计算机图形学中用于模拟光线如何从材料反射,折射和吸收的方法。在three.js中,PBR包含使用物理基础渲染代码和材料处理技术来模拟光线和材料之间的物理相互作用,以创建逼真的材料外观和光照效果。这种渲染技术可以提供更真实的阴影,高光,反射和漫反射效果,使场景看起来更加真实。原创 2023-06-25 18:13:12 · 3779 阅读 · 0 评论 -
three.js物体纹理及其常用属性介绍
THREE中的纹理和材质是用来渲染3D场景中的物体表面的。纹理贴图定义物体表面的颜色和外观,而材质则定义物体表面如何反射光线。纹理可以使用多种类型的图像文件,包括等。纹理可以是简单的颜色、图案或者是复杂的图像。材质是指物体表面材料的特性。在THREE中,材质可以定义物体表面的颜色质地透明度等属性。材质可以使用多种类型的渲染器,包括基本的Phong(光泽)、Lambert(哑光)和Basic渲染器。此外,高级材质如PBR(物理渲染)材质还可以模拟真实的光学特性,包括表面反射、漫反射和透明度等。原创 2023-06-21 17:54:10 · 1264 阅读 · 0 评论 -
three.js常用几何体介绍以及自定义几何体
/ 添加物体 // 创建几何体 for(let i = 0;i < 50;i ++) {// 每一个三角形,需要3个顶点,每个顶点需要3个值 const geometry = new THREE . BufferGeometry();j < 9;j ++) {// 根据几何体和材质创建物体 const mesh = new THREE . Mesh(geometry , material);原创 2023-06-21 15:27:05 · 1071 阅读 · 0 评论 -
three.js几何体的_UV_、法向属性以及BufferGeometry类介绍
Three.js中的BufferGeometry是一种高效的几何体对象,它是在WebGL上操作顶点缓冲区的优化版本。与基本几何形状不同,BufferGeometry是基于类型化数组的,可以直接传递给着色器程序,这就提高了性能,减少了内存开销。BufferGeometry还允许我们在不同的顶点属性之间传递数据,如纹理坐标、法线或颜色。因此,它是三维场景渲染中常用的一种对象类型。在BufferGeometry中,我们需要自己定义模型的顶点、法线、颜色和纹理坐标等信息。原创 2023-06-21 12:35:33 · 1673 阅读 · 0 评论 -
使用dat.gui更改three.js中的物体变量
gui是一种JavaScript库,用于创建可视化控件和调试工具。它是dat.gui的简称。dat.gui是一个用于在Web应用程序中创建可定制GUI的JavaScript库。它可以轻松创建滑块、复选框、颜色选择器等控件,用户可以直接在GUI上进行交互和调整。dat.gui还提供了一些调试工具,例如实时查看变量值等。它是一个轻量级、易于使用且高度可定制的库,可用于构建各种类型的Web应用程序,从游戏到数据可视化。原创 2023-06-20 18:14:59 · 768 阅读 · 0 评论 -
threejs实现监听窗口变化自适应画面以及全屏和退出全屏
如上图,我改变窗口大小之后,整个场景并没有跟着窗口的变化自适应。原创 2023-06-20 16:57:08 · 942 阅读 · 0 评论 -
three.js中通过gsap动画库实现物体的动画
是一个JavaScript动画库,由GreenSock公司开发,用于在Web应用程序中创建高性能动画。使用GSAP可以通过一些简单的动画操作来实现复杂的动画效果,例如等工具。原创 2023-06-20 16:04:41 · 1904 阅读 · 0 评论 -
three.js设置物体的缩放和旋转
使用three.js设置物体的缩放可以通过对象的scale属性来实现。其中,scale属性是一个THREE.Vector3类型的对象,包含了x、y、z三个方向的缩放比例。设置scale时,可以直接使用Vector3的set方法设置缩放比例,也可以分别设置x、y、z三个方向的缩放比例。其中,Vector3的multiply方法将会对scale属性进行按元素乘法,实现沿x轴缩小一半的效果。示例效果。原创 2023-06-20 10:54:21 · 5137 阅读 · 0 评论 -
three.js修改物体的位置
要修改物体的位置,可以使用物体的position属性。该属性是一个对象,它表示物体在3D空间中的位置。// 将物体向右移动5个单位 object . position . y -= 10;// 将物体向下移动10个单位 object . position . z += 15;// 将物体向前移动15个单位请注意,这些代码只会在下一次渲染时生效。这将强制three.js重新计算物体的变换矩阵,并将其应用于场景中的所有对象。原创 2023-06-20 10:31:07 · 5157 阅读 · 0 评论 -
three.js坐标轴辅助器AxesHelper
坐标轴辅助器可协助您在three.js场景中定位和定向对象,使调试和所有其他工作更加轻松。函数使用一个数值参数,该数字指定辅助器的大小。在这个例子中,我们设置大小为5。在这里,我们创建了一个坐标轴辅助器并将其添加到场景中。原创 2023-06-20 10:14:30 · 1737 阅读 · 0 评论 -
three.js轨道控制器查看物体
在上一章节中我们只是将物体和场景渲染到了浏览器中,但是我们并不能实现交互,当我们想用鼠标滑动查看物体时,物体是不会动的,要实现这种交互效果,我们需要借助轨道控制器实现。原创 2023-06-19 17:26:13 · 425 阅读 · 0 评论 -
使用three.js渲染第一个场景和物体
【代码】使用three.js渲染第一个场景和物体。原创 2023-06-19 17:05:07 · 525 阅读 · 0 评论 -
使用parcel搭建threejs开发环境
Parcel是一个快速、零配置的Web应用打包器,可将L和图像等静态文件打包到一个捆绑文件中。它的主要目标是简化Web应用程序的打包过程,使开发人员可以更快速地创建现代Web应用程序。Parcel支持许多不同的文件类型和模块系统,并具有自动编译自动安装依赖项和热模块更换等功能。它是一个强大而易于使用的开发工具,广泛用于现代Web开发中。原创 2023-06-19 16:15:01 · 313 阅读 · 0 评论 -
Three.js3D可视化介绍,以及本地搭建three.js官网
three.js官网Three.js是一个基于WebGL的图形库,它可以轻松地在浏览器中创建3D场景和动画。同时,它支持外部模型和纹理的导入,让开发者可以更加便捷地创建出震撼的3D场景。Three.js游戏开发Three.js可以轻松地创建3D游戏场景和动画效果,让游戏制作变得更加简单。产品展示:对于需要展现3D产品模型的企业来说,Three.js可以帮助他们创建出非常逼真的展示场景,大大提升了产品展示效果。教育培训Three.js还可以用于教育培训领域,例如创建出生动有趣的动画来解释物理现象或者化学反应。原创 2023-06-19 12:00:42 · 9627 阅读 · 0 评论