1、Three.js开端预备环境
预备工作从 CDN 导入
1.安装 VSCode
2.安装 Node.js
3.查看Three.js最新版本
https://i-blog.csdnimg.cn/direct/d1641cc97be3428cab12676caeb9c52e.png
4.如何cdn引入：
https://cdn.jsdelivr.net/npm/three@v版本号/build/three.module.js
比方：https://cdn.jsdelivr.net/npm/three@v0.170.0/build/three.module.js
https://i-blog.csdnimg.cn/direct/439173392f2b46e8926b4cbe53364684.png
我们需要用到three.js和它对应的工具包
https://cdn.jsdelivr.net/npm/three@v0.170.0/examples/jsm/
https://i-blog.csdnimg.cn/direct/08a32460df7848ceae24199cfa8cb596.png
5.创建html文件
<!DOCTYPE html>
<html>
<head>
<title>three.js css3d - sprites</title>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
body {
color: #000;
}
</style>
</head>
<body>
<div id="container"></div>
<!-- 类似于创建 并设置别名 -->
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
}
}
</script>
<!-- 导入包名 -->
<script type="module">
import * as THREE from 'three';
console.log(THREE, 'THREE')
</script>
</body>
</html>
6.在VSCode中安装serve服务器~ Live Server
https://i-blog.csdnimg.cn/direct/e3add03bee2742e69a3fda5930ee2f31.png
安装完成后 在文件名右键或者文件中右键
https://i-blog.csdnimg.cn/direct/a7ad6d41de7a40af96b0aceb7cdb819d.png
https://i-blog.csdnimg.cn/direct/ebd7393a8b824bc1bb6b596b307689c7.png
页面：
肯定是没内容的 因为我们只是引入 打印了一下 THREE 对象
https://i-blog.csdnimg.cn/direct/fc1f8d94a9cc489ab82c4112ae5b7290.png
这就表示我们环境预备好了。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]