Three.js学习2:页面引入 Three.js

一、关于 Three.js 的版本

随着页面3D化应用越来越多,近两年 Three.js 处于飞速发展之中。现在 Three.js 几乎每个月都会发布一个新的版本,会增加新的 API,废掉一些旧的功能之类的。

可以从 Three.js 官网 Three.js -- JavaScript 3D Library 下载最新版本,官网的文档一般也是当前最新版本。

因为 Three.js 每月更新的时候,API会有变化。所以:

  1. **实际开发时的 Three.js API 应该以项目 Three.js 版本对应的文档为准。只要能实现功能,不用追求最新版。**当然,这是我的个人观点。
  2. 学习 Three.js 的时候,注意看教程的发布时间,以及教程的版本。不同版本,可能代码不兼容--虽然绝大部分代码变化不大,但是不排除个别方法做了调整。

我用的是目前 Three.js 最新版,r161。

二、页面引入 Three.js

不知道什么时候起,Three.js 官方不再支持类似 jQuery 的引入方式,全面转向了ES6 module 方式引入 Three.js 或者 common JS 的方式。从build 文件夹里的三个 three.js 文件就可以看出来。

three.cjs 是 common JS 文件,用在 node 里,可以通过 require 导入。

three.module.js 是按照 ES6 module 导入方式,通过 import 命令导入。three.module.min.js 是前面文件的压缩版。

这里以three.module为例,说明如何在页面引入 Three.js。

因为版本更新较快,所以网上一些引入 Three.js 的方式不再适用。这个大家在学习的时候,一定要注意 Three.js 的版本。

方式一:页面嵌入式

在 HTML 页面里:

html 复制代码
<script  type="module">
	import * as THREE from "./js/three.module.min.js";
    
    // Our JS code goes here
</script>

方式二:引入外部 JS

在 three.module.min.js 同级,添加自己的 js 文件 myjs.js。

HTML 页面:

html 复制代码
<script src="js/myjs.js" type="module"></script>

my.js 代码:

javascript 复制代码
import * as THREE from "./three.module.min.js";
console.info( THREE );

注意:

无论哪种引入 Three.js ,请注意 script 标签的 type="module",不可少。

成功的标志:

如果能看到以下内容输出,就说明 Three.js 引入页面成功。恭喜你,打开了 Three.js 的大门!

三、Chrome 下一个扯淡的报错

明明页面跑起来,但是 Chrome 却一直在报一个错。

three.module.js:27681 THREE.WebGLRenderer: A WebGL context could not be created. Reason: Could not create a WebGL context, VENDOR = 0x8086, DEVICE = 0x4909, GL_VENDOR = Google Inc. (Intel), GL_RENDERER = ANGLE (Intel, Intel(R) Iris(R) Xe MAX 100 Graphics Direct3D9Ex vs_3_0 ps_3_0, igdumdim64.dll -30.0.101.1934), GL_VERSION = 30.0.101.1934, Sandboxed = yes, Optimus = no, AMD switchable = no, Reset notification strategy = 0x8252, ErrorMessage = BindToCurrentSequence failed: .

THREE.WebGLRenderer: A WebGL context could not be created. Reason: Failed to create a WebGL2 context.

搞得我一度怀疑是我的代码问题,或者 Three.js 版本有问题。

经多方查阅,发现这个是 Chrome 的问题, Firefox 就没有这个报错,一切正常。

解决方案1:

  1. 在浏览器地址栏输入 chrome://flags/

  2. Override software rendering list 选项设为Enabled

  3. WebGL Draft Extentions 选项改为 Enbale.

  4. Chrome 73之后的版本, 确保 Choose ANGLE graphics backendOpenGL

解决方案2:

反正不影响代码运行,无视这个错误。否则换个浏览器,比如 firefox。

四、关于 VSCode 下 Three.js 的代码提示

我用的方法是安装 three.js 的typescript语法(.d.ts)的依赖:

要用到 Node 环境。

javascript 复制代码
npm install --save-dev @types/three 

不过这个代码提示,就我用的 r161 的版本来看,感觉挺鸡肋的,只能说聊胜于无。

相关推荐
im_AMBER14 分钟前
学习日志05 python
python·学习
杨进军15 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW30 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字36 分钟前
Kotlin lazy 委托的底层实现原理
前端
gnip1 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
真的想上岸啊1 小时前
学习C++、QT---18(C++ 记事本项目的stylesheet)
开发语言·c++·学习