1.准备工作将下列文件在three.js的包中找到，注意的是我这里使用的是模块化版本的，这里不知道模块化的，可以先去看一下es6的模块化。控制器： OrbitControls.js加载器：GLTFLoader.js材质： RoomEnvironment.js和MeshoptDecoder.js模型文件：我这里用的是glb（最后面有源码链接）将上面的文件准备好后就可以开始进行下一步了2.开始开发1.在body中新建一个div用来承载three.js创建canvas标签2.把准备好的文件引入，注意script标签加上type=module部分代码在这，完成源码在下面，这里方便理解 import*a
一、实现效果，选中3d模型，可拖动、旋转、放大和缩小二、前提把.gltf文件放到public/static文件夹路径下，如下图Tips：如果想下载.gltf的格式文件，可以该网站下载：Sketchfabhttps://sketchfab.com/search?q=gltf&type=models三、导入three.jsnpminstallthree四、引入three.js，由于GLTFLoader和OrbitControls属于three.js,按照路径引入就可以了，不用关心引入路径，因为npm已经对应上了。import*asTHREEfrom"three";import{GLTFLoader
一、实现效果，选中3d模型，可拖动、旋转、放大和缩小二、前提把.gltf文件放到public/static文件夹路径下，如下图Tips：如果想下载.gltf的格式文件，可以该网站下载：Sketchfabhttps://sketchfab.com/search?q=gltf&type=models三、导入three.jsnpminstallthree四、引入three.js，由于GLTFLoader和OrbitControls属于three.js,按照路径引入就可以了，不用关心引入路径，因为npm已经对应上了。import*asTHREEfrom"three";import{GLTFLoader
目录一、Three.js是什么？二、VUE简单使用Three.js步骤1.npm安装2.template模板3.引入库4.定义全局变量5.初始化场景6.初始化相机7.初始化灯光8.初始化渲染器9.创建模型(这里我搭建的模型是一个简单双面货架模型)10.根据浏览器窗口自适应11.初始化函数，页面加载完成时调用（mounted()中调用）12.Style样式三、VUE进阶使用Three.js步骤（完成各种事件和效果）在简单使用Three.js的基础上，添加以下控件和代码1.引入库及需要使用的组件2.template模板3.定义全局变量4.使用OrbitControls控制给模型添加缩放，旋转，平移
目录一、Three.js是什么？二、VUE简单使用Three.js步骤1.npm安装2.template模板3.引入库4.定义全局变量5.初始化场景6.初始化相机7.初始化灯光8.初始化渲染器9.创建模型(这里我搭建的模型是一个简单双面货架模型)10.根据浏览器窗口自适应11.初始化函数，页面加载完成时调用（mounted()中调用）12.Style样式三、VUE进阶使用Three.js步骤（完成各种事件和效果）在简单使用Three.js的基础上，添加以下控件和代码1.引入库及需要使用的组件2.template模板3.定义全局变量4.使用OrbitControls控制给模型添加缩放，旋转，平移
目录创作背景功能分解创建3d地球创建3d月球 创建3d小火箭
目录创作背景功能分解创建3d地球创建3d月球 创建3d小火箭
前言使用前端three.js加载3d模型过程中，往往会出现模型大小过大导致前端加载时间过长，降低用户体验。本文所记录的是笔者在使用gltf-pipeline压缩3d模型中踩坑DRACOLoader与解决的一个过程。所采用的three库版本为^0.138.2解决方案与介绍通过gltf-pipeline可以大幅度压缩gltf/glb模型文件。并且有如下的作用将glTF转换为glb（和反向）将缓冲区/纹理保存为嵌入或单独的文件将glTF1.0模型转换为glTF2.0（使用KHR_techniques_webgl和KHR_blend扩展）应用Draco网格压缩安装npminstall-ggltf-pi
前言使用前端three.js加载3d模型过程中，往往会出现模型大小过大导致前端加载时间过长，降低用户体验。本文所记录的是笔者在使用gltf-pipeline压缩3d模型中踩坑DRACOLoader与解决的一个过程。所采用的three库版本为^0.138.2解决方案与介绍通过gltf-pipeline可以大幅度压缩gltf/glb模型文件。并且有如下的作用将glTF转换为glb（和反向）将缓冲区/纹理保存为嵌入或单独的文件将glTF1.0模型转换为glTF2.0（使用KHR_techniques_webgl和KHR_blend扩展）应用Draco网格压缩安装npminstall-ggltf-pi
声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。背景不知不觉，掘金关注者人数已经超过1000人，因此特地做了这个页面纪念一下，感谢大家关注?，希望博客园的粉丝也涨涨。后续也将继续努力，持续输出一些有价值的文章。本文内容涉及的技术栈为React+Three.js+Stulus，本文中主要包含的知识点包括：圆锥几何体ConeGeometry、圆柱几何体CylinderGeometry、材质捕捉纹理材质MeshMatcapMaterial、文字创建和修饰的FontLoader和TextGeometry、使用Gsap和它的插件Ph
