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

news2024/11/19 15:33:32

一、关于 Three.js 的版本

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

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

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

实际开发时的 Three.js API 应该以项目 Three.js 版本对应的文档为准。只要能实现功能，不用追求最新版。当然，这是我的个人观点。
学习 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 页面里：

<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 页面：

<script src="js/myjs.js" type="module"></script>

my.js 代码：

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 就没有这个报错，一切正常。