Vue Cli de Vue crea un arreglo simple de proyectos Three js (página web 3D) (algunas precauciones)
contenido
Vue Cli de Vue crea un arreglo simple de proyectos Three js (página web 3D) (algunas precauciones)
En segundo lugar, el principio de realización.
3. Asuntos que requieren atención
Instale tres relacionados en el proyecto Vue y obtenga una vista previa de escena 3D simple
1. Una breve descripción de los parámetros -S y -D en la instalación de npm (cnpm)
1. Breve introducción
Algunos conocimientos desarrollados por Vue están organizados para facilitar el encuentro posterior con problemas similares, que pueden ser revisados y utilizados a tiempo.
Esta sección presenta el uso de Vue cli + tres para desarrollar escenas web 3D en el desarrollo front-end de Vue. Si hay alguna deficiencia, indíquelo o si tiene un método mejor, deje un mensaje.
Entorno operativo:
- ganar 10
- versión del nodo 16.14.2
- npm versión 8.5.0
- @vue/cli 5.0.4
- tres 0.139.1
En segundo lugar, el principio de realización.
1. vue crea el nombre del proyecto, usa vue para crear un proyecto
2. vue install tres paquetes relacionados
3. Abra el proyecto y agregue tres códigos relacionados a App.vue según sea necesario
4. npm run serve ejecuta el proyecto, la implementación es exitosa, ingrese la URL y el navegador puede navegar
3. Asuntos que requieren atención
1. La premisa de la operación aquí es que se ha construido el entorno básico de npm (nodejs) y vue
( --- El entorno básico no está construido, consulte la publicación del blog:
2. Es posible que deba prestar atención al orden de instalación de algunos complementos, especialmente otros paquetes que deben depender de tres, debe instalar tres, luego
3. Al representar la página en el entorno vue, obviamente es mejor que introducir directamente la tarjeta de modo three.js, así que preste atención (vea el código detrás)
No coloque la escena y la cámara en los datos, deben inicializarse cuando se montan, y el temporizador se borrará antes del montaje.
4. En general, el proyecto vue cli enviado a Git no cargará el código relevante, como node_module, por lo que es posible que el proyecto vue descargado o clonado de Internet por primera vez deba cambiar el directorio de destino, ingrese npm install en cmd (ventana ) para cargar packgae. Los paquetes de dependencia en json, npm run serve pueden ejecutar el proyecto normalmente
5. Después de que la instalación de tres sea exitosa, en el proyecto import three from 'three';, luego ejecute el programa.
error de consola encontradodefault export is not declared in imported module
Explique que three.js no tiene un objeto de exportación predeterminado
- debe escribirse como
import * as THREE from 'three'; - O puede ser así:
import { Scene, WebGLRenderer, PerspectiveCamera, BoxGeometry, MeshBasicMaterial, Mesh} from 'three'; - O importar en forma de CommonJS
var three = require ('three'); (作说明使用，暂未尝试该法)
4. Pasos de implementación
Vue Cli Crear proyecto Vue
1. Para crear un nuevo proyecto, debe crear una carpeta de proyecto Vue Cli (solo para administración de proyectos)
2. Abra cmd y cambie a la carpeta creada anteriormente, y luego use el nombre del proyecto vue create para crear el proyecto. Puede crear el proyecto de forma predeterminada o manualmente. Aquí, la prueba elige crear el proyecto vue 3 de forma predeterminada.
Pedido:
- mi: alternar
- cd xx\xx cambiar a la carpeta de destino
- vue create xx_xx-xx para crear un proyecto vue
3. Después de eso, el sistema descargará automáticamente los archivos y paquetes del proyecto, generalmente solo espere.
4. Después de crear el proyecto, puede cambiar a la carpeta del proyecto creado de acuerdo con la solicitud de nombre y ejecutar el servicio (el propósito general es verificar si la creación del proyecto está bien)
Pedido:
- cd xx_xxx-xx cambia a la carpeta del proyecto creado
- npm ejecutar servir para ejecutar el servicio
5. Ingrese la URL correspondiente, no hay problema, puede ver el efecto a continuación
Instale tres relacionados en el proyecto Vue y obtenga una vista previa de escena 3D simple
1. En cmd, use el comando para instalar tres
Comando: cnpm install three -S (el propósito de -S es agregar la dependencia three a la carpeta packgae.json)
2. Instale el complemento de control de pista three-orbit-controls (不需要好似也可以不安装，待确认)
(Nota: asegúrese de que se haya introducido la biblioteca three.js antes de introducir este complemento OrbitControls = require('three-orbit-controls')(THREE). Utilice:controls = new OrbitControls(camera);）
Comando: cnpm install -S controles de tres órbitas
3. Instale el paquete de descarga de obj
(Nota: antes de introducir el complemento, se debe confirmar que se ha introducido la biblioteca three.js. Este complemento incluye un cargador para cargar archivos .obj y .mtl.
import {MTLLoader,OBJLoader} from 'three-obj-mtl-loader';
Instrucciones:mtlLoader = new MTLLoader(); objLoader = new OBJLoader();
En particular, tenga en cuenta que pueden ocurrir errores cuando los complementos ythree-mtl-loader se usan solos . three-obj-loader)
命令：npm i -S tres-bj-mtl-loader
4. InstalaciónCSS2DRenderer 包
(Nota: antes de introducir el complemento, debe confirmar que la biblioteca htree.js se ha introducido y import {CSS2DRenderer,CSS2DObject} from 'three-css2drenderer';utilizado labelRenderer = new CSS2DRenderer(); label = new CSS2DObject( text );:)
Comando: npm install -S tres-css2drenderer
5. Después de instalar los tres paquetes relacionados, puede verificar que las tres dependencias se hayan agregado en el archivo package.json de la carpeta del proyecto
6. Abra el proyecto, aquí está el proyecto abierto con WebStorm, y luego agregue los TRES códigos relacionados de la prueba a la aplicación
7. La función principal del código relevante probado aquí es mostrar un cuadro en la escena, y luego el mouse puede operar y observar el cuadro.
8. Regrese a cmd y ejecute el servidor (si el anterior no está cerrado, puede obtener una vista previa directamente en el navegador)
Comando: npm ejecutar servir
9. El efecto de vista previa del navegador es el siguiente
5. Código relevante
1. Modificación relacionada con App.vue y código agregado
<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. Otras instrucciones
1. Una breve descripción de los parámetros -S y -D en la instalación de npm (cnpm)
2. Una breve descripción de la estructura de directorios del proyecto Vue Cli (diferentes versiones pueden variar ligeramente):
1) Una breve descripción de la estructura del directorio del proyecto.
2) Breve descripción de los archivos y directorios relacionados en la carpeta de compilación:
3) Directorios y archivos en la carpeta de configuración:
3. Una breve descripción de los archivos principales relacionados con la página en el proyecto vue-cli (la configuración de la versión será diferente)
1）index.html:
Descripción: por lo general, solo se define un nodo raíz vacío. La instancia definida en main.js se montará en el nodo #app y el componente vue llenará el contenido.
2) Archivo App.vue:
Descripción: app.vue es el componente principal del proyecto y todas las páginas se cambian en app.vue. Un archivo vue estándar se divide en tres partes.
El primer código html se instala en <template></template>, generalmente solo se puede definir un nodo raíz debajo de este;
La segunda etiqueta <script></script>;
El tercer <style scoped></style> se usa para escribir estilos, donde scoped significa. El estilo actúa solo en el nodo del componente actual y sus nodos secundarios, pero no contiene componentes secundarios.
<router-view></router-view> es una vista de subenrutamiento, y las páginas de enrutamiento subsiguientes se muestran aquí, lo que equivale a un indicador que guía qué página mostrar.
3）principal.js:
Descripción: el archivo de entrada está aquí, la función principal es inicializar la instancia de vue y usar los complementos necesarios. Por ejemplo, a continuación se hace referencia a cuatro complementos, pero solo se usa la aplicación (los complementos se mencionan en los componentes).
4) El archivo index.js debajo del enrutador: archivo de configuración de enrutamiento.
Descripción: se definen tres rutas, la ruta es /, la ruta es /msg y la ruta es /detail. Lo explicaré en detalle más adelante, porque acabo de aprender muchas cosas y no entiendo, 囧.
5) archivo paquete.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"
]
}