Three.js入门教程:构建threejs的HTML代码框架

256 阅读1分钟

视频课程地址: www.bilibili.com/video/BV1g4…

我们知道threejs是运行在网页上的,所以我们先要构建一个HTML网页。

在当前这个代码中我们准备从浏览器的控制台,输出现在使用的Threejs版本号。

所以我们需要把three.js的源码拷贝到我们的libs目录中。

2.webp

我们从上一课中下载的源文件中拷贝src目录到libs目录下

3.webp

我们现在往这个文件中开始输入页面代码

4.webp

title标签,里面输入动力IT实训-threejs-002

5.webp

指定本文件字符编码格式为UTF-8

6.webp

引入three.js源文件

7.webp

设置一下这个页面的样式,对body的margin设置为0,溢出部分设置为不可见

8.webp

输入body标签,输入DIV的注释,我们将通过这个div输出程序运行的效果,ID号我们设置为PUIEDU-webgl-output

9.webp

我们现在从浏览器的控制台输出当前three.js的版本号

10.webp

接下来我们开始运行调试一下,在右键弹出的菜单中选择Open with Live Server

11.webp

我们按下F12,在弹出的浏览器调试窗口中选择控制台标签页

输出了正确的135版本号

12.webp

关于,构建three.js的HTML代码框架就先讲到这里,下节课再见!

作者:动力IT实训

视频课程地址: www.bilibili.com/video/BV1g4…