欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

1-学习Three.js 入门

程序员文章站 2022-03-27 07:52:13
...

前言

学习three.js需要从基础系统的学习,这里我推荐一个学习的网站:WebGl中文网,最好的学习webgl(three.js)网站。当然它的每一章节每一小节知识点并不全,有很多需要从其他地方补充。这里就把我学习的过程整理成文章,供大家更容易的理解three.js。

入题

你可以从WebGL中文网的的网盘下载本教程的示例文件,地址是:http://hewebgl.com/article/getarticle/129,中文网提供了下载示例,你可以下载下来用于代码学习。同时它也提供了three.js下载地址: https://github.com/mrdoob/three.js。中文网也推荐了最好使用谷歌最新浏览器,作为效果演示,下载: https://www.google.com/intl/zh-CN/chrome/browser/。同样对于使用什么开发工具,中文网也做了大量的尝试,最终推荐WebStorm作为开发工具,需要**自己可以找一下**教程包,这里提供一个下载地址:http://www.ddxia.com/view/129861415446916.html 同时,你也可以在中文网的网盘直接下载(包含**):http://pan.baidu.com/s/1o6JQX9S 和 http://pan.baidu.com/s/1tRb4a 下载。

第一个示例

做好以上准备工作,你就可以通过下面的代码进入three.js的学习了(需要联网)。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
</body>
</html>

为了验证Threejs确实启动,我们用Chrome浏览器打开上面的那个网页,浏览器里面什么都没有,这时按F12键,打开调试窗口,并在Console下输入 THREE.REVISION命令,得到当前版本号,这表示现在使用的three.js文件的版本。

第一小节基本和中文网无异,只是省去了一些相关的介绍,具体查看:第1章 开启Threejs之旅(一)

 

说明在最后

内容并非原创,如有不妥请联系删除:QQ1034070006