Three.js中文网 Three.js中文网
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (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语法总结
      • 【选修】Vue+Threejs开发环境
      • 【选修】React+Three.js开发环境
    • 2.几何体BufferGeometry

    • 3.模型对象、材质

    • 4.层级模型

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

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

    • 7.PBR材质与纹理贴图

    • 8.渲染器和前端UI界面

    • 9.生成曲线、几何体

    • 10.相机基础

    • 11.光源和阴影

    • 12.精灵模型Sprite

    • 13.后处理EffectComposer

    • 14.射线拾取模型

    • 15.场景标注标签信息

    • 16.关键帧动画

    • 17.动画库tween.js

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

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

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

    视频讲解 (opens new window)

    本节课主要给大家说下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-2025 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式