Three.js中文网 Three.js中文网
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (opens new window)
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (opens new window)
Web3D系统课程视频
  • 0.学前说明

  • 1.Three.js快速入门

    • 1. threejs文件包下载和目录简介
    • 2. 学习环境-编辑器和静态服务器
    • 3. 开发和学习环境,引入threejs
      • 4. 第一个3D案例—创建3D场景
      • 5. 第一个3D案例—透视投影相机
      • 6. 第一个3D案例—渲染器
      • 7. 三维坐标系-加强三维空间认识
      • 8. 光源对物体表面影响
      • 9. 相机控件OrbitControls
      • 10. 平行光与环境光
      • 11. 动画渲染循环
      • 12. Canvas画布布局和全屏
      • 13. stats查看threejs渲染帧率
      • 14. 阵列立方体和相机适配体验
      • 15. Threejs常见几何体简介
      • 16. 高光网格材质Phong
      • 17. WebGL渲染器设置(锯齿模糊)
      • 18. gui.js库(可视化改变三维场景)
      • 19. gui调试界面2-颜色命名等
      • 20. gui调试3-下拉菜单、单选框
      • 21. gui.js库(分组)
      • 22. examples和文档(辅助开发)
      • 23. threejs语法总结
    • 2.几何体BufferGeometry

    • 3.模型对象、材质

    • 4.层级模型

    • 5.顶点UV坐标、纹理贴图

    • 6.加载外部三维模型(gltf)

    • 7.PBR材质与纹理贴图

    • 8.持续更新中

    • Three.js教程
    • 1.Three.js快速入门
    郭隆邦
    2023-01-20
    目录

    3. 开发和学习环境,引入threejs

    # 开发和学习环境,引入threejs库

    本节课主要给大家说下threejs怎么引入的问题。

    1. 开发环境:项目开发引入threejs,比如vue或react脚手架引入threejs。
    2. 学习环境:入门threejs阶段,.html文件中直接引入threejs

    # 项目的开发环境引入threejs

    比如你采用的是Vue + threejs或React + threejs技术栈,这很简单,threejs就是一个js库,直接通过npm命令行安装就行。

    npm安装特定版本three.js(注意使用哪个版本,查文档就查对应版本)

    // 比如安装148版本
    npm install three@0.148.0 --save
    

    # npm安装后,如何引入three.js

    执行import * as THREE from 'three';,ES6语法引入three.js核心。

    // 引入three.js
    import * as THREE from 'three';
    

    如果你没有前端ES6基础,可以参考我分享的前端公开课ES6入门教程 (opens new window)。

    # npm安装后,如何引入three.js其他扩展库

    除了three.js核心库以外,在threejs文件包中examples/jsm目录下,你还可以看到各种不同功能的扩展库。

    一般来说,你项目用到那个扩展库,就引入那个,用不到就不需要引入。

    // 引入扩展库OrbitControls.js
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    // 引入扩展库GLTFLoader.js
    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
    
    // 扩展库引入——旧版本,比如122, 新版本路径addons替换了examples/jsm
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
    

    # 学习环境:.html文件中直接引入threejs

    如果不是正式开发Web3D项目,只是学习threejs功能,完全没必要用webpack或vite搭建一个开发环境。

    学习使用的环境,只要创建一个.html文件,编写threejs代码,最后通过本地静态服务打开.html文件就行。

    # script标签方式引入three.js

    你可以像平时开发web前端项目一样,通过script标签把three.js当做一个js库引入你的项目。

    three.js库可以在threejs官方文件包下面的build目录获取到。

    <script src="./build/three.js"></script>
    
    //随便输入一个API,测试下是否已经正常引入three.js
    console.log(THREE.Scene); 
    

    # ES6 import方式引入

    给script标签设置type="module",也可以在.html文件中使用import方式引入three.js。

    <script type="module">
    // 现在浏览器支持ES6语法,自然包括import方式引入js文件
    import * as THREE from './build/three.module.js';
    </script>
    

    # type="importmap"配置路径

    学习环境中,.html文件引入three.js,最好的方式就是参考threejs官方案例,通过配置<script type="importmap">,实现学习环境.html文件和vue或reaact脚手架开发环境一样的写法。这样你实际项目的开发环境复制课程源码,不用改变threejs引入代码。

    下面配置的type="importmap"代码具体写法不用掌握记忆,复制粘贴后,能修改目录就行,你可以去电子书课件或者课件源码中复制。

    <!-- 具体路径配置,你根据自己文件目录设置,我的是课件中源码形式 -->
    <script type="importmap">
        {
    		"imports": {
    			"three": "../../../three.js/build/three.module.js"
    		}
    	}
    </script>
    
    <!-- 配置type="importmap",.html文件也能和项目开发环境一样方式引入threejs -->
    <script type="module">
        import * as THREE from 'three';
        // 浏览器控制台测试,是否引入成功
        console.log(THREE.Scene);
    </script>
    

    # type="importmap"配置——扩展库引入

    通过配置<script type="importmap">,让学习环境.html文件,也能和vue或react开发环境中一样方式方式引入threejs扩展库。

    配置addons/等价于examples/jsm/。

    <script type="importmap">
        {
    		"imports": {
    			"three": "./three.js/build/three.module.js",
                "three/addons/": "./three.js/examples/jsm/"
    		}
    	}
    </script>
    
    <script type="module">
        // three/addons/路径之后对应的是three.js官方文件包`/examples/jsm/`中的js库
        // 扩展库OrbitControls.js
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        // 扩展库GLTFLoader.js
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
        console.log(OrbitControls);
        console.log(GLTFLoader);
    </script>
    
    2. 学习环境-编辑器和静态服务器
    4. 第一个3D案例—创建3D场景

    ← 2. 学习环境-编辑器和静态服务器 4. 第一个3D案例—创建3D场景→

    Theme by Vdoing | Copyright © 2016-2023 郭隆邦 | 引用请注明网站链接
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式