Three.js
官网
有啥用？
最近想做一个集装箱计算的项目，要实时3D预览，作为技术预研的一部分，看看Three.js和filament
先看看Three.js吧。
创建项目
我是在vue的项目上去开发，大家也可以参考一下官方的
这里我用的打包工具是parceljs.cn
npm init
走完以上这步，就会得到了package.json文件了
然后直接把我的拷贝下去吧：
{
"name": "threejs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
},
"author": "sunofbeach.net",
"license": "ISC",
"devDependencies": {
"@vue/component-compiler-utils": "^3.3.0",
"parcel-bundler": "^1.12.5",
"vue-template-compiler": "^2.7.14"
},
"dependencies": {
"three": "^0.147.0",
"vue": "^2.7.14",
"vue-hot-reload-api": "^2.3.4"
}
}
然后执行npm install安装相关的 依赖库
注意，这里有个src/index.html
也就是我创建了文件夹src，创建了一个文件index.html
里面的内容可以参考：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Parcel - Vue</title>
</head>
<body>
<div id="app"></div>
<script src="./index.js"></script>
</body>
</html>
这里面引入了一个index.js
我创建了index.js
// index.js
import Vue from 'vue'
import App from './app.vue'
new Vue({
el: '#app',
render: h => h(App)
});
这里导入了app.vue
// app.vue
<template>
<div>
测试
</div>
</template>
<script>
export default {}
</script>
<style>
</style>
到这里，就跟我们普通的vue开发差不多了。
直接运行起来吧！
