01Three.js前提须知讲到Three.js，就需要先说一下OpenGL和WebGL。OpenGL是一个跨平台的3D/2D的绘图标准（规范），WebGL（WebGraphicsLibrary）是一种3D绘图协议。WebGL允许把JavaScript和OpenGL结合在一起运用，但使用WebGL原生的API来写3D程序非常的复杂，同时需要相对较多的数学知识，对于前端开发者来说学习成本非常高。WebGLWebGL是一种Javascript的3D图形接口，把JavaScript和OpenGLES2.0结合在一起。OpenGLOpenGL是开放式图形标准，跨编程语言、跨平台，Javascript、
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
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控制给模型添加缩放，旋转，平移
下载组件threejsnpminstallthree-S 引入threejsimport*asTHREEfrom"three";代码 import*asTHREEfrom"three";exportdefault{ name:"HOME", components:{ //vueQr, //glHome, }, data(){ return{ }; }, methods:{ }, mounted(){ //1.创建场景 constscene=newTHREE.Scene(); console.log(scene) //2.创建相机 constcamera=newTHREE.
下载组件threejsnpminstallthree-S 引入threejsimport*asTHREEfrom"three";代码 import*asTHREEfrom"three";exportdefault{ name:"HOME", components:{ //vueQr, //glHome, }, data(){ return{ }; }, methods:{ }, mounted(){ //1.创建场景 constscene=newTHREE.Scene(); console.log(scene) //2.创建相机 constcamera=newTHREE.
目录创作背景功能分解创建3d地球创建3d月球 创建3d小火箭
