百度百科官网,电影网站如何优化,厦门城乡建设局网站,设计公司的网站一、关于 Three.js 的版本
随着页面3D化应用越来越多#xff0c;近两年 Three.js 处于飞速发展之中。现在 Three.js 几乎每个月都会发布一个新的版本#xff0c;会增加新的 API#xff0c;废掉一些旧的功能之类的。
可以从 Three.js 官网 Three.js – JavaScript 3D Libra…一、关于 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 typemoduleimport * as THREE from ./js/three.module.min.js;// Our JS code goes here
/script
方式二引入外部 JS
在 three.module.min.js 同级添加自己的 js 文件 myjs.js。
HTML 页面
script srcjs/myjs.js typemodule/script
my.js 代码
import * as THREE from ./three.module.min.js;
console.info( THREE );
注意
无论哪种引入 Three.js 请注意 script 标签的 typemodule不可少。
成功的标志
如果能看到以下内容输出就说明 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 在浏览器地址栏输入 chrome://flags/。 将 Override software rendering list 选项设为Enabled。 WebGL Draft Extentions 选项改为 Enbale. Chrome 73之后的版本, 确保 Choose ANGLE graphics backend 为 OpenGL。 解决方案2 反正不影响代码运行无视这个错误。否则换个浏览器比如 firefox。
四、关于 VSCode 下 Three.js 的代码提示
我用的方法是安装 three.js 的typescript语法(.d.ts)的依赖
要用到 Node 环境。
npm install --save-dev types/three
不过这个代码提示就我用的 r161 的版本来看感觉挺鸡肋的只能说聊胜于无。
