VueのVueCliは、3つのjsプロジェクトの単純な配置を作成します（Webページ3D）（いくつかの注意事項）
コンテンツ
VueのVueCliは、3つのjsプロジェクトの単純な配置を作成します（Webページ3D）（いくつかの注意事項）
Vueプロジェクトに関連する3つをインストールし、シンプルな3Dシーンプレビューを実現します
1. npm（cnpm）インストールの-Sおよび-Dパラメーターの簡単な説明
2. Vue Cliプロジェクトのディレクトリ構造の簡単な説明（バージョンによって若干異なる場合があります）：
3. vue-cliプロジェクトのページに関連するメインファイルの簡単な説明（バージョン設定は異なります）
1.簡単な紹介
Vueによって開発されたいくつかの知識は、同様の問題に後で遭遇するのを容易にするために編成されており、時間内にチェックして使用することができます。
このセクションでは、Vue cli + 3を使用してVueフロントエンド開発でWeb3Dシーンを開発する方法を紹介します。欠点がある場合は指摘するか、より良い方法がある場合はメッセージを残してください。
動作環境：
- 10勝
- ノード16.14.2バージョン
- npmバージョン8.5.0
- @ vue / cli 5.0.4
- 3つの0.139.1
第二に、実現原理
1. vueはプロジェクト名を作成し、vueを使用してプロジェクトを作成します
2.3つの関連パッケージをvueインストールします
3.プロジェクトを開き、必要に応じて3つの関連コードをApp.vueに追加します
4. npm runserveがプロジェクトを実行し、デプロイメントが成功し、URLを入力すると、ブラウザーが参照できるようになります
3.注意が必要な事項
1.ここでの操作の前提は、npm（nodejs）とvueの基本環境が構築されていることです。
（---基本的な環境は構築されていません。ブログ投稿を参照してください：
2.一部のプラグイン、特に3つに依存する必要がある他のパッケージのインストール順序に注意を払う必要がある場合があります。次に、3つをインストールする必要があります。
3. vue環境でページをレンダリングするときは、three.jsモードカードを直接導入するよりも明らかに優れているため、注意してください（背後のコードを参照）
シーンとカメラをデータに入れないでください。マウント時に初期化する必要があります。タイマーは、マウント前にクリアされます。
4.通常、Gitにプッシュされたvue cliプロジェクトは、node_moduleなどの関連コードをアップロードしないため、インターネットから初めてダウンロードまたはクローン化されたvueプロジェクトでは、ターゲットディレクトリを切り替える必要があります。コマンドでnpm installと入力します（ウィンドウ）packgaeをロードします。jsonの依存関係パッケージ、npmrunserveはプロジェクトを正常に実行できます
5. 3つのインストールが成功したら、プロジェクトimport three from 'three';でプログラムを実行します。
コンソールエラーが見つかりましたdefault export is not declared in imported module
three.jsにはデフォルトのエクスポートオブジェクトがないことを説明します
- 次のように書く必要があります
import * as THREE from 'three'; - または、次のようにすることもできます。
import { Scene, WebGLRenderer, PerspectiveCamera, BoxGeometry, MeshBasicMaterial, Mesh} from 'three'; - または、CommonJSの形式でインポートします
var three = require ('three'); (作说明使用，暂未尝试该法)
4.実装手順
Vue CliCreateVueプロジェクト
1.新しいプロジェクトを作成するには、Vue Cliプロジェクトフォルダーを作成する必要があります（プロジェクト管理のみ）
2. cmdを開き、前に作成したフォルダーに切り替えてから、vue createプロジェクト名を使用してプロジェクトを作成します。プロジェクトはデフォルトまたは手動で作成できます。ここでは、テストでデフォルトでvue3プロジェクトを作成することを選択します。
注文：
- e：トグル
- cd xx\xx宛先フォルダーに切り替えます
- vue create xx_xx-xxを使用して、vueプロジェクトを作成します
3.その後、システムはプロジェクトファイルとパッケージを自動的にダウンロードします。通常はそのまま待ちます。
4.プロジェクトが作成されたら、名前プロンプトに従って作成されたプロジェクトフォルダーに切り替えて、サービスを実行できます（一般的な目的は、プロジェクトの作成に問題がないかどうかを確認することです）。
注文：
- cdxx_xxx-xx作成したプロジェクトフォルダに切り替えます
- npmrunserveはサービスを実行します
5.対応するURLを入力します。問題ありません。以下の効果を確認できます。
Vueプロジェクトに関連する3つをインストールし、シンプルな3Dシーンプレビューを実現します
1. cmdで、コマンドを使用して3つをインストールします
コマンド：cnpm install three -S（-Sの目的は、packgae.jsonフォルダーに3つの依存関係を追加することです）
2.トラック制御プラグインをインストールします three-orbit-controls (不需要好似也可以不安装，待确认)
（注：このプラグインを導入する前に、three.jsライブラリが導入されていることを確認してくださいOrbitControls = require('three-orbit-controls')(THREE)。使用：controls = new OrbitControls(camera);）
コマンド：cnpm install -S three-orbit-controls
3.objダウンロードパッケージをインストールします
（注：プラグインを導入する前に、three.jsライブラリが導入されていることを確認する必要があります。このプラグインには、.objファイルと.mtlファイルをロードするためのローダーが含まれています。
import {MTLLoader,OBJLoader} from 'three-obj-mtl-loader';
手順：mtlLoader = new MTLLoader(); objLoader = new OBJLoader();
特に、プラグインとthree-mtl-loaderプラグインを単独で使用するとエラーが発生する可能性があることに注意してください。three-obj-loader）。
命令：npm i -S three-bj-mtl-loader
4.インストールCSS2DRenderer 包
（注：プラグインを導入する前に、htree.jsライブラリが導入されimport {CSS2DRenderer,CSS2DObject} from 'three-css2drenderer';使用されていることを確認する必要がありますlabelRenderer = new CSS2DRenderer(); label = new CSS2DObject( text );:)
コマンド：npm install -S three-css2drenderer
5. 3つの関連パッケージをインストールした後、プロジェクトフォルダーのpackage.jsonファイルに3つの依存関係が追加されていることを確認できます。
6.プロジェクトを開きます。これはWebStormで開いたプロジェクトです。次に、テストの3つの関連コードをアプリに追加します。
7.ここでテストされた関連コードの主な機能は、シーンにボックスを表示することです。その後、マウスはボックスを操作して観察できます。
8. cmdに戻り、サーバーを実行します（前のサーバーが閉じられていない場合は、ブラウザーで直接プレビューできます）。
コマンド：npm runserve
9.ブラウザのプレビュー効果は次のとおりです。
5.関連コード
1.App.vue関連の変更と追加されたコード
<template>
<div id="container"></div>
</template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import Stats from 'three/examples/jsm/libs/stats.module.js';
export default {
name: 'ThreeTest',
components: {
},
data(){
return{}
},
mounted() {
// three 一些参数定义（这样可以必要的避免卡顿）
this.scene;
this.camera;
this.renderer;
this.stats;
this.box;
this.init();
},
methods:{
init() {
// scene
this.initScene();
// camera
this.initCamera();
// light
this.initLight();
// renderer
this.initRenderer();
// OrbitControls
this.initOrbitControls();
// onWindowResize
this.onWindowResize();
this.axiesHelper();
this.iniStats();
this.addBox();
this.animate();
},
initScene() {
this.scene = new THREE.Scene();
},
initCamera() {
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
this.camera.position.set(-15, 7, 15);
this.camera.lookAt(this.scene.position);
},
onWindowResize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
window.addEventListener('resize', this.onWindowResize);
},
initLight() {
const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
this.scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(-1, 1, 1);
this.scene.add(directionalLight);
},
initRenderer() {
this.renderer = new THREE.WebGLRenderer({antialias: true});
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setClearColor(0xcccccc);
document.body.appendChild(this.renderer.domElement);
},
initOrbitControls() {
const controls = new OrbitControls(this.camera, this.renderer.domElement);
controls.minDistance = 5;
controls.maxDistance = 50;
},
iniStats() {
this.stats = new Stats();
document.body.appendChild(this.stats.dom);
},
addBox() {
var boxGeo = new THREE.BoxGeometry(10,10,)
this.box = new THREE.Mesh(boxGeo,new THREE.MeshPhongMaterial())
this.scene.add(this.box);
},
moveBox(){
this.box.position.set(10,0,10);
},
animate() {
requestAnimationFrame(this.animate);
this.stats.update();
this.render();
},
axiesHelper() {
var helper = new THREE.AxesHelper(20);
this.scene.add(helper);
},
render() {
this.renderer.render(this.scene, this.camera);
}
},
// beforeDestroy 废弃，使用 beforeMount
beforeMount() {
// 相关参数置空
this.scene = null;
this.camera = null;
this.renderer = null;
this.stats = null;
this.box = null;
}
}
</script>
<style>
#app {
text-align: center;
height: 100%;
}
</style>
6.その他の指示
1. npm（cnpm）インストールの-Sおよび-Dパラメーターの簡単な説明
2. Vue Cliプロジェクトのディレクトリ構造の簡単な説明（バージョンによって若干異なる場合があります）：
1）プロジェクトディレクトリ構造の簡単な説明
2）ビルドフォルダ内の関連ファイルとディレクトリの簡単な説明：
3）configフォルダー内のディレクトリとファイル：
3. vue-cliプロジェクトのページに関連するメインファイルの簡単な説明（バージョン設定は異なります）
1）index.html：
説明：通常、空のルートノードのみが定義されます。main.jsで定義されたインスタンスは#appノードの下にマウントされ、コンテンツはvueコンポーネントによって埋められます。
2）App.vueファイル：
説明：app.vueはプロジェクトの主要コンポーネントであり、すべてのページがapp.vueの下で切り替えられます。標準のvueファイルは3つの部分に分かれています。
最初のhtmlコードは<template></template>にインストールされます。通常、この下に定義できるルートノードは1つだけです。
2番目の<script></script>タグ。
3番目の<stylescoped></ style>は、スタイルを記述するために使用されます。ここで、scopedは意味します。スタイルは、現在のコンポーネントのノードとその子ノードにのみ作用しますが、子コンポーネントは含まれません。
<router-view> </ router-view>はサブルーティングビューであり、後続のルーティングページがここに表示されます。これは、表示するページをガイドするインジケーターに相当します。
3）main.js：
説明：エントリファイルはここにあります。主な機能は、vueインスタンスを初期化し、必要なプラグインを使用することです。たとえば、以下では4つのプラグインが参照されていますが、使用されるのはアプリのみです（プラグインはコンポーネントで参照されています）。
4）ルーターの下のindex.jsファイル：ルーティング構成ファイル。
説明：3つのルートが定義されています。パスは/、パスは/ msg、パスは/detailです。囧さん、たくさんのことを学んだばかりでわからないので、後で詳しく説明します。
5）package.jsonファイル
{
"name": "{
{ name }}",// 项目名称
"version": "1.0.0",// 版本
"description": "{
{ description }}",// 描述
"author": "{
{ author }}",// 作者
"private": true,//是否私人项目
"scripts": {
"dev": "node build/dev-server.js",// npm run dev 的 dev，使用node执行 build/dev-server.js
"start": "node build/dev-server.js",// npm run start 跑的是同样的命令
"build": "node build/build.js"{
{#unit}},// npm run build 跑的是 node build/build.js
// 以下脚本为单元测试用到的脚本
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"{
{/unit}}{
{#e2e}},
"e2e": "node test/e2e/runner.js"{
{/e2e}}{
{#if_or unit e2e}},
"test": "{
{#unit}}npm run unit{
{/unit}}{
{#unit}}{
{#e2e}} && {
{/e2e}}{
{/unit}}{
{#e2e}}npm run e2e{
{/e2e}}"{
{/if_or}}{
{#lint}},
"lint": "eslint --ext .js,.vue src{
{#unit}} test/unit/specs{
{/unit}}{
{#e2e}} test/e2e/specs{
{/e2e}}"{
{/lint}}
},
// dependencies 设定的是项目里使用的依赖，
//dependencies 项目的依赖,类似于后端的pom.xml,在此处的依赖，选择 "build": "vue-cli-service build --mode prod", 时会打包进去，一般添加插件，选择装入此处即可
"dependencies": {
"vue": "^2.2.6"{
{#router}},// 项目依赖vue.js
"vue-router": "^2.3.1"{
{/router}}// 项目依赖vue-router
},
// devDependencies设定的是开发使用的依赖
//devDependencies项目的依赖，在build 时。不会被打包，类似于pom.xml 中的scope作用域
"devDependencies": {
"autoprefixer": "^6.7.2",// 是用于给css3属性自动加属性前缀的
// babel相关的都是用于处理es6语法的
"babel-core": "^6.22.1",
{
{#lint}}
"babel-eslint": "^7.1.1",
{
{/lint}}
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
//
"chalk": "^1.1.3",// chalk适用于格式化输出命令行信息的，比如run dev以后的start...
"connect-history-api-fallback": "^1.3.0",//
"copy-webpack-plugin": "^4.0.1",//
"css-loader": "^0.28.0",// 所有的*-loader都是 webpack的扩展，webpack是把各种资源理解为一个模块，css-loader就是读取css模块的加载器
{
{#lint}}
// eslint 是代码格式化检查工具，开启以后要严格遵照它规定的格式进行开发
"eslint": "^3.19.0",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^2.0.0",
{
{#if_eq lintConfig "standard"}}
"eslint-config-standard": "^6.2.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
{
{/if_eq}}
{
{#if_eq lintConfig "airbnb"}}
"eslint-config-airbnb-base": "^11.1.3",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-plugin-import": "^2.2.0",
{
{/if_eq}}
{
{/lint}}
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",// express 用于启动 node http server的服务
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",// webpack 里载入和处理html的插件
"http-proxy-middleware": "^0.17.3",// node server 的中间件工具
"webpack-bundle-analyzer": "^2.2.1",
{
{#unit}}
"cross-env": "^4.0.0",// 设定环境变量的工具，NODE_ENV变量跟它有关
// karma相关的都是单元测试工具
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.30",
"karma-webpack": "^2.0.2",
"lolex": "^1.5.2",
"mocha": "^3.2.0",
"chai": "^3.5.0",
"sinon": "^2.1.0",
"sinon-chai": "^2.8.0",
"inject-loader": "^3.0.0",
"babel-plugin-istanbul": "^4.1.1",
"phantomjs-prebuilt": "^2.1.14",
{
{/unit}}
{
{#e2e}}
"chromedriver": "^2.27.2",
"cross-spawn": "^5.0.1",
"nightwatch": "^0.9.12",
"selenium-server": "^3.0.1",
{
{/e2e}}
"semver": "^5.3.0",// 一个版本检查工具
"shelljs": "^0.7.6",// selljs是在node里跑shell命令的工具，比如‘rm -rf’
"opn": "^4.0.2",// 跨平台的开启文件或者网页的工具
"optimize-css-assets-webpack-plugin": "^1.3.0",
"ora": "^1.2.0",// 命令行里自动运行的信息提示
"rimraf": "^2.6.0",// 跑shell命令 rm-rf 的工具
"url-loader": "^0.5.8", // 配合webpack的加载器
"vue-loader": "^11.3.4", // 配合webpack的加载器
"vue-style-loader": "^2.0.5", // 配合webpack的加载器
"vue-template-compiler": "^2.2.6", // vue-template-compiler，可能是配合离线版vue
// webpack相关的用于，把图片，*.vue, *.js, 这些组合成最终的项目，webpack-dev用于跑测试服务器
"webpack": "^2.3.3",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
// 项目依赖的引擎版本
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}