02 2023 档案

three.js教程8-渲染器WebGLRenderer和前端UI界面
摘要：1、html的UI交互界面与Canvas画布叠加 需求：把threejs Cavnas画布和HTML元素叠加布局，在canvas上添加按钮，通过按钮点击修改canvas场景。 // canvas画布绝对定位 renderer.domElement.style.position = 'absolute 阅读全文
posted @ 2023-02-09 21:05 JackGIS 阅读(1421) 评论(0) 推荐(0)
three.js教程7-PBR材质与环境贴图CubeTextureLoader
摘要：1、PBR材质 PBR是基于物理的渲染(physically-based rendering)。模拟物体表面的反射算法。 Three.js提供了两个PBR材质相关的类MeshStandardMaterial和MeshPhysicalMaterial MeshPhysicalMaterial是Mesh 阅读全文
posted @ 2023-02-09 21:04 JackGIS 阅读(3451) 评论(0) 推荐(0)
three.js教程6-加载外部三维模型gltf
摘要：1、建模软件 3D美术常用的三维建模软件，比如Blender、3damx、C4D、maya等等 Blender(轻量、免费、开源) 3damx C4D maya 机械相关：SW、UG等 建筑相关：草图大师、revit 2、GLTF格式简介 (Web3D领域JPG) Khronos Group组织20 阅读全文
posted @ 2023-02-09 20:51 JackGIS 阅读(12889) 评论(0) 推荐(2)
three.js教程5-几何体顶点UV坐标、纹理贴图TextureLoader
摘要：1、纹理贴图 纹理贴图，是给MeshLambertMaterial等材质一些纹理图片，以达到更好的视觉效果。 使用方法：通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。 co 阅读全文
posted @ 2023-02-09 19:59 JackGIS 阅读(3704) 评论(0) 推荐(0)
three.js教程4-Group层级模型
摘要：1、组对象Group、层级模型-形成树状结构 //创建两个网格模型mesh1、mesh2 const geometry = new THREE.BoxGeometry(20, 20, 20); const material = new THREE.MeshLambertMaterial({color 阅读全文
posted @ 2023-02-08 21:00 JackGIS 阅读(1785) 评论(0) 推荐(1)
three.js教程3-模型对象、材质material
摘要：1、Object3D的position和scale是三维向量Vector3 因此模型的位置和缩放等变化，也是使用Vector3的属性和方法实现，查询文档Vector3。 三维向量Vector3有xyz三个分量，查看three.js文档你可以知道Vector3对象具有属性.x、.y、.z，Vector 阅读全文
posted @ 2023-02-08 20:52 JackGIS 阅读(921) 评论(0) 推荐(0)
three.js教程2-几何体BufferGeomety顶点
摘要：1、网格模型(三角形概念) 网格模型Mesh其实就一个一个三角形(面)拼接构成。使用使用网格模型Mesh渲染几何体geometry，就是几何体所有顶点坐标三个为一组，构成一个三角形，多组顶点构成多个三角形，就可以用来模拟表示物体的表面。 正面三角形：顶点逆时针形成 反面三角形：顶点顺时针形成 con 阅读全文
posted @ 2023-02-07 21:34 JackGIS 阅读(1518) 评论(0) 推荐(1)
three.js教程1补充-gui.js库使用
摘要：gui.js是一个前端js库，对HTML、CSS和JavaScript进行了封装，学习开发的时候，借助dat.gui.js可以快速创建可手动控制三维场景的UI交互界面，打开API文档中案例体验一下就能感受到。 （1）引入gui.js gihtub地址：https://github.com/dataa 阅读全文
posted @ 2023-02-07 11:22 JackGIS 阅读(4699) 评论(0) 推荐(0)
three.js教程1-快速入门
摘要：1、项目开发环境引入threeJs 如果采用的是Vue + threejs或React + threejs技术栈，threejs就是一个js库，直接通过npm命令行安装就行。 npm安装特定版本three.js(注意使用哪个版本，查文档就查对应版本) // 比如安装148版本 npm install 阅读全文
posted @ 2023-02-07 11:19 JackGIS 阅读(8982) 评论(0) 推荐(1)