官网 https://threejs.org/ 简单化版的WebGL,使用JS在Web页面上展示3D画面 下载 https://codeload.github.com/mrdoob/three.js/zip/refs/heads/master 相关课程 https://www.bilibili.com/video/BV1Gg411X7FY?vd_source=eeaf93f88401c5a1a1c23a17e6ab228a&p=2&spm_id_from=333.788.player.switch
目录介绍
Build目录： 包含两个文件，three.js 和three.min.js 。这是three.js最终被引用的文件。一个已经压缩，一个没有压缩的js文件。 Docs目录： 这里是three.js的帮助文档，里面是各个函数的api，可惜并没有详细的解释。试图用这些文档来学会three.js是不可能的。 Editor目录：一个类似3D-max的简单编辑程序，它能创建一些三维物体。 Examples目录： 一些很有趣的例子demo，可惜没有文档介绍。对图像学理解不深入的同学，学习成本非常高。 Src目录：源代码目录，里面是所有源代码。 Test目录：一些测试代码，基本没用。 Utils目录： 存放一些脚本，python文件的工具目录。例如将3D-Max格式的模型转换为three.js特有的json模型。 .gitignore文件：git工具的过滤规则文件，没有用。 CONTRIBUTING.md文件：一个怎么报bug，怎么获得帮助的说明文档。 LICENSE文件：版权信息。 README.md文件：介绍three.js的一个文件，里面还包含了各个版本的更新内容列表。
阅读官方API
如果你学的是数学，这东西别说两三年，几十年变化都不大 如果你学的是后端，两三年一大变，一年一小变 如果你学的是前端，一年两三变是常有的，这就导致去年学的API今年就可能会有点小变动... 两三年知识没更新，之前的页面都可能运行不正常了 从一开始就尝试去阅读官方API，至少知道官方的API文档是个什么结构，主要的内容在哪个位置，看多少就习惯了... Scene 场景 https://threejs.org/docs/index.html#api/en/scenes/Scene
环境说明
Scripts "build/three.js" and "build/three.min.js" are deprecated with r150+, and will be removed with r160. Please use ES Modules or alternatives: https://threejs.org/docs/index.html#manual/en/introduction/Installation 官方说threejs从160版本开始啊，就没有build目录了，后续要使用npm进行安装... 这个159版本，就是旧版的最后一版，新版的过渡版本...
目录及文件准备-旧版安装方法
vim 01-1_demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
<link rel="shortcut icon" href="#" />
<script src="three.js"></script>
</head>
<body>
<script type="module" src="main.js"></script>
</body>
</html>
main.js中写自己的代码 要以web服务的方式启动
npm安装three
https://threejs.org/docs/index.html#manual/en/introduction/Installation
# three.js
npm install --save three
// 静态资源设置
app.use('/three', express.static(config.root + '/node_modules/three/build'));
import * as THREE from 'three'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );