Como programador que ha estado profundamente involucrado en el desarrollo front-end durante muchos años, el "editor de código" y la "codificación" con los que trato más todos los días. Un buen editor de código puede mejorar la eficiencia del trabajo de desarrollo con el doble de resultados con la mitad de esfuerzo. Los editores de desarrollo front-end más utilizados para los proyectos de desarrollo actuales de los bloggers son:

(1) vscode: un editor desarrollado por Microsoft que admite múltiples idiomas de front-end y back-end, como Vue, JavaScript, Python, React, C/C++, etc.; proporciona un terminal integrado para depurar código; integra Git herramientas de control de versiones. Desventajas: necesita instalar un entorno de desarrollo para ejecutar algunos complementos y funciones; no admite el desarrollo de programas pequeños; algunos proyectos consumen mucha memoria cuando se ejecutan.

(2) HBuilderX: un editor doméstico, es compatible con uni-app, Vue.js y otros marcos, y puede desarrollar rápidamente aplicaciones móviles multiplataforma y pequeños programas, favorecidos por muchos desarrolladores front-end. Desventajas: otros lenguajes y marcos no son amigables, como React y Python; las herramientas de control de versiones como Git no son compatibles, lo que es un inconveniente para la colaboración en equipo.

(3) WebStorm: una herramienta de desarrollo de front-end desarrollada por JetBrains, que se enfoca en JavaScript y desarrollo de front-end, proporciona potentes funciones de análisis de código y depuración, y también es compatible con otros lenguajes y marcos, como TypeScript, React, etc. . La desventaja es que ocupa mucha memoria y el costo de las copias genuinas es alto.

Recientemente, he estado haciendo algunas investigaciones técnicas y reservas de conocimientos en 3D en mi tiempo libre. Mientras veo documentos oficiales, también escribiré algunos guiones para comprobar el efecto real. Por lo tanto, habrá algunas demostraciones de guiones desarrolladas por mí en casa. entorno informático y el entorno de la empresa. , Usar herramientas de control de versiones + cambiar de un lado a otro siempre se sentirá un poco incómodo. Entonces, al desarrollar aplicaciones esta vez, los bloggers dejaron de usar los editores tradicionales y trataron de usar [ Editor en la nube de Tencent Cloud Studio ] para el desarrollo . Al abrir el navegador se puede escribir código, y la experiencia de desarrollo en la nube es la misma que la del IDE nativo. Permite a los bloggers para desarrollar a través de espacios, y la eficiencia del trabajo naturalmente mejora mucho. Aquí también hay un vistazo a los resultados de los trabajos de los bloggers desarrollados usando el editor en la nube:

Entonces, después de esta experiencia personal de desarrollo de aplicaciones, ¿ cuáles son las ventajas y conveniencias de Tencent Cloud Editor Cloud Studio en comparación con los editores tradicionales , y cómo uso Cloud Studio para desarrollar aplicaciones de personalización personalizadas de muebles 3D? Bueno , escuchemos lo que el blogger te dirá. siguiente~~~

1. Introducción a Tencent Cloud Cloud Studio:

Cloud Studio es un entorno de desarrollo basado en la nube, dirección de la experiencia del proyecto: sitio web oficial de Cloud Studio . Permite a los programadores escribir y ejecutar programas en la nube. En comparación con los IDE locales tradicionales, Cloud Studio tiene las siguientes ventajas. En primer lugar, debido a que Cloud Studio está basado en la nube, siempre que la conexión a la red sea normal, puede escribir y ejecutar varios programas que consuman memoria incluso con una computadora con una configuración baja, ya que usa recursos de la nube y no tiene nada que hacer. con el rendimiento de la computadora local. En segundo lugar, Cloud Studio proporciona una función de vista previa en línea, que le permite ver fácilmente el efecto y los resultados de la ejecución del código sin tener que cambiar de ventana con frecuencia ni iniciar el servidor local; el asistente de IA integrado puede invocar directamente al asistente de código de IA en Cloud Studio , lo que le permite tener socios profesionales de I + D, junto con usted para completar el trabajo de codificación con mayor calidad, obtener el doble de resultados con la mitad del esfuerzo. Cloud Studio proporciona un entorno de desarrollo en la nube conveniente, que puede resolver los puntos débiles que enfrentan algunos IDE tradicionales y tiene algunas ventajas únicas:

1. Cercano a la experiencia de desarrollo del IDE local

Puede escribir códigos abriendo un navegador, sin descargar ni instalar, y puede escribir códigos en cualquier momento y en cualquier lugar abriendo un navegador. Admite resaltado de código, autocompletado, terminales con funciones completas, guardado en tiempo real y otras funciones. Tenga la misma experiencia de edición fluida que un IDE local.

2. Múltiples entornos son opcionales o se conectan al host de la nube

Los entornos comunes como Node.js, Java y Python están integrados, lo que le ahorra un trabajo de configuración complicado y entra directamente en el estado de desarrollo. O también puede conectarlo a su propio servidor en la nube para administrar los recursos en el servidor en la nube.

3. Comparte el efecto de vista previa en cualquier momento

Es muy conveniente generar rápidamente un enlace de vista previa en Cloud Studio, ya sea para compartir con otros para mostrar el proyecto o para usarlo como una interfaz de depuración.

4. Compatible con complementos VSCode

¿La configuración predeterminada no puede satisfacer la demanda? También puede instalar complementos de VSCode en línea para mejorar su experiencia. Actualmente, Cloud Studio es compatible con la mayoría de los complementos de VSCode.

5. Asistente de código AI

Despierte el asistente de código de IA directamente en Cloud Studio, de modo que tenga un socio profesional de I + D para completar el trabajo de codificación con usted con mayor calidad y obtenga el doble de resultados con la mitad del esfuerzo.

Cloud Studio es tan poderoso que no necesita instalar varios entornos, es fácil de usar y puede comenzar de inmediato, entonces, ¿cómo lo usamos de 0 a 1 para experimentar las ventajas que nos brinda? el IDE de la nube, y luego el blogger usará una [personalidad de muebles 3D] El caso de desarrollo real de la aplicación personalizada] para brindarle una experiencia común ~~

2. Práctica del proyecto Tencent Cloud Cloud Studio (aplicación de personalización personalizada de muebles 3D)

1. Regístrese e inicie sesión en Cloud Studio

Los pasos de registro e inicio de sesión son relativamente simples. La plataforma de programación en línea Cloud Studio admite tres métodos de inicio de sesión: cuenta de codificación, cuenta de GitHub y autorización de WeChat. Aquí, el blogger usa el código de escaneo de WeChat para autorizar el inicio de sesión, y el inicio de sesión es exitoso, lo que significa que el registro es exitoso;

2. Ingrese al entorno de desarrollo preestablecido de Vue

2.1 Inicie sesión correctamente e ingrese a la página principal de Cloud Studio

Las siguientes plantillas de espacio están listas para usar, lo que puede crear rápidamente un entorno para el desarrollo de código. Al mismo tiempo, Cloud Studio también proporciona 3000 minutos de espacio de trabajo gratuito por mes a todos los usuarios nuevos y antiguos.

2.2 Haga clic en la tarjeta de plantilla Vue.js para generar rápida y automáticamente un proyecto vue3.0

2.3 Después de esperar menos de 30 s (a diferencia de la diferencia en el ancho de banda y la velocidad de la red), el entorno de desarrollo se inicializará y configurará

2.4 Cloud Studio nos ayuda a inicializar el entorno de desarrollo Vue, y hay una pequeña demostración por defecto

2.5 En este punto, se ha construido el proyecto básico de Vue

Además, la interfaz de operación del editor en la nube de Cloud Studio es básicamente muy similar al VS Code que usamos habitualmente, y luego comenzamos a prepararnos para el desarrollo de la aplicación.

3. Desarrollo de proyectos

3.1 Introducción a los puntos de función del proyecto

Three.js es un motor 3D que se ejecuta en el navegador.Después de la integración, podemos usar las potentes funciones de gráficos webgl que proporciona para crear una 【aplicación de personalización de muebles en 3D】. Incluye las siguientes funciones: creación de escena 3D, importación de modelo de sofá, visualización 3D de modelo de sofá, construcción de efectos de luz y sombra en la escena, cambio de color de material de las partes del sofá, animación de cambio de ángulo de visión, etc.

3.2 Dependencias de instalación

A menudo usamos three.js para desarrollar web3d, aquí usamos npm para integrarlo en el proyecto y ejecutamos el siguiente comando en la consola:

npm i three -S

Una vez completada la instalación, veamos si hay tres en package.json, lo que significa que está instalado

3.3 Creación de escenas 3D

Primero cree un elemento de lienzo en html, y toda la experiencia 3D se representará en este elemento

     <!-- 三维场景 -->
<canvas id="canvasDom" class="canvas-container" ref="canvasDom"> </canvas>

Cree una escena con un color de fondo y agregue un poco de niebla del mismo color en la distancia, esto ayudará a ocultar los bordes del piso después de agregar


const BACKGROUND_COLOR = 0xf1f1f1;
 
// Init the scene
const scene = new THREE.Scene();
 // Set background
scene.background = new THREE.Color(BACKGROUND_COLOR );
scene.fog = new THREE.Fog(BACKGROUND_COLOR, 20, 100);

Cree un renderizador y pase nuestro elemento de lienzo, configure el suavizado, lo que creará bordes más suaves alrededor del modelo 3D.

  // 初始化 renderer
  const canvas = document.querySelector("#canvasDom");
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
  renderer.shadowMap.enabled = true;
  renderer.setPixelRatio(window.devicePixelRatio);

Lo siguiente que tenemos que hacer es un bucle de actualización. Esta función se ejecuta 60 veces por segundo por defecto, para que podamos ver nuestra escena 3D y actualizar en tiempo real. La función de actualización es animate( )


function animate() {
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
 
animate();

Necesitamos agregar una cámara al espacio para que podamos ver la escena.

// Add a camera
var camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 1000);

3.4 Cargando el modelo

Aquí usamos el modelo en formato glft. GLB es la representación en formato de archivo binario del modelo GLTF. La ventaja del modelo en este formato es que ya contiene toda la información sobre la estructura del modelo, malla, material, animación, etc.

  var theModel; //定义模型
  const MODEL_PATH = "./model/sofa_chair.glb";        //沙发模型地址

Use GLTFLoader para importar el modelo y convertirlo a un formato de datos que el navegador pueda mostrar

El primer parámetro del método es la ruta del archivo del modelo, el segundo parámetro es una función para ejecutar después de cargar el recurso, el tercer parámetro no está definido actualmente, pero se puede usar para que la segunda función se ejecute cuando se carga el recurso , y el último parámetro para el manejo de errores

 // 初始化GLTF模型loader
var loader = new THREE.GLTFLoader();;
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("./draco/gltf/");
loader.setDRACOLoader(dracoLoader);
 
loader.load(MODEL_PATH, function(gltf) {
  theModel = gltf.scene;
 
// 设置模型缩放大小  
  theModel.scale.set(2,2,2);
 
  // 把模型加到场景中
  scene.add(theModel);
 
}, undefined, function(error) {
  console.error(error)
});

En este punto, debería ver que se ha agregado un sofá negro a la escena.

3.5 Configuración de efectos de luces y sombras

Aquí, agregue luces hemisféricas y luces direccionales a la escena. Y establece la posición espacial y la intensidad.

  // 设置场景灯光
  var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.61);
  hemiLight.position.set(0, 50, 0);
  scene.add(hemiLight);
  var dirLight = new THREE.DirectionalLight(0xffffff, 0.54);
  dirLight.position.set(-8, 12, 8);
  dirLight.castShadow = true;
  dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
  scene.add(dirLight);

Aquí la escena es mucho más luminosa y se puede ver el color y material original del sofá.

3.6 Agregar pisos

Para mejorar el efecto en la escena, se agrega un piso a la escena

  // 给场景加个地板
  var floorGeometry = new THREE.PlaneGeometry(5000, 5000, 1, 1);
  var floorMaterial = new THREE.MeshPhongMaterial({
    color: 0xeeeeee,
    shininess: 0,
  });
  var floor = new THREE.Mesh(floorGeometry, floorMaterial);
  floor.rotation.x = -0.5 * Math.PI;
  floor.receiveShadow = true;
  floor.position.y = -1;
  scene.add(floor);

3.7 Obtener partes del modelo de sofá

Después de usar el cargador para cargar el modelo, use la función transversal para atravesar cada nodo secundario del modelo. Aquí podemos obtener el nombre de cada nodo secundario del modelo y usarlo como un identificador único.

    theModel.traverse((o) => { //此函数可以遍历出模型包含的各个子节点
        console.log(o.name,'节点名称');
        if (o.isMesh) {
          o.castShadow = true;
          o.receiveShadow = true;
        }
      });

  //  给模型各部位赋材质
  const initColor=(parent, type, mtl)=> {
    parent.traverse((o) => {
      if (o.isMesh) {
        if (o.name.includes(type)) {
          o.material = mtl;
          o.nameID = type; // 设置一个属性来标识此对象
        }
      }
    });
  }

3.8 Reemplace el material o cambie el color del modelo

De qué color es el modelo, si es de metal o madera, si es nuevo o viejo, la apariencia de estos modelos está determinada por la textura y el color.

A través del paso anterior, podemos definir los subnodos del modelo y sus logotipos, allanando el camino para cambiar de color en este paso. Aquí primero definimos los objetos del subnodo del modelo y definimos el método de cambio de color:

  const INITIAL_MAP = [   // 沙发模型各个模块及视角
    { childID: "Object_6", mtl: INITIAL_MTL ,position:{x:0,y:1.2,z:4},imgurl:'/img/modeltype/front.png'},
    { childID: "Object_4", mtl: INITIAL_MTL ,position:{x:-4.16,y:0.17,z:0.167},imgurl:'/img/modeltype/back.png'},
    { childID: "Object_8", mtl: INITIAL_MTL ,position:{x:-0.06,y:1.88,z:3.26},imgurl:'/img/modeltype/down.png'},
    { childID: "Object_10", mtl: INITIAL_MTL,position:{x:-2.78,y:2.83,z:3.70},imgurl:'/img/modeltype/leg.png'},
    { childID: "Object_12", mtl: INITIAL_MTL,position:{x:0.6,y:0.6,z:1.52},imgurl:'/img/modeltype/pillow.png'},
  ];

  // 点击色卡给选中的子模型切换贴图或颜色
const selectColor=(item)=>{
    let color = item
    let new_mtl;

    if (color.texture) {
      let txt = new THREE.TextureLoader().load(color.texture);

      txt.repeat.set(color.size[0], color.size[1], color.size[2]);
      txt.wrapS = THREE.RepeatWrapping;
      txt.wrapT = THREE.RepeatWrapping;

      new_mtl = new THREE.MeshPhongMaterial({
        map: txt,
        shininess: color.shininess ? color.shininess : 10,
      });
    } else {
      new_mtl = new THREE.MeshPhongMaterial({
        color: parseInt("0x" + color.color),
        shininess: color.shininess ? color.shininess : 10,
      });
    }

    theModel.traverse((o) => {
      if (o.isMesh && o.nameID != null) {
        if (o.nameID == activeOption.value) {
          o.material = new_mtl;
        }
      }
    });
}

3.9 Menú Generar carta de colores

        <div class="menuAside">
            <div class="title">选择颜色</div>
            <div class="colorList">
              <div class="item" v-for="(item,index) in colors" 
              @click="selectColor(item)"
              :key="index" :style="{'background':item.color?'#'+item.color:'',
                'backgroundImage':item.texture?'url(' + item.texture + ')':''
              }">
              </div>
            </div>
        </div>

3.10 Animación de cambio de ángulo

Para hacerlo más flexible al cambiar diferentes partes del sofá, aquí se usa la biblioteca Tween.js para realizar la animación del cambio de ángulo de visión.

  //设置相机视角+动画
const setCameraPosition=(newPosition,cameraPosition)=> {
    return new TWEEN.Tween(cameraPosition)
      .to(newPosition, 1000)
      .easing(TWEEN.Easing.Cubic.Out)
      .start();
  }

3.11 Aumentar el efecto de carga de la carga del modelo

Aquí se desarrolla un pequeño componente de carga. Debido a que la carga del modelo se ve afectada por el entorno de red, puede ser lento. Aquí, esperando los datos para brindarle al usuario una buena experiencia al cargar la animación.

3.12 Después de guardar el código, puede ver el efecto modificado en tiempo real en el navegador incorporado:

En este punto, nuestra aplicación de personalización de muebles en 3D está básicamente completa

4. Inicializar el almacén

4.1 Busque "Administración de código fuente" en el área del menú de funciones a la izquierda.

4.2 Ingrese la información del mensaje que debe enviarse y luego haga clic en "Confirmar" para enviar el almacén.

4.3 Puede elegir que el código ahora esté alojado en Coding. Aquí hay una demostración de cómo publicarlo en el almacén de Coding. Haga clic en "Publicar sucursal" -> seleccione "Publicar en CODING".

4.4 Ingrese el prefijo del nombre de dominio del equipo de codificación, y el código publicado más tarde se publicará en este proyecto de equipo

4.5 Seleccione la cuenta correspondiente y seleccione el proyecto a empujar, de lo contrario, se creará un nuevo proyecto.

4.7 Después de que el envío sea exitoso, puede iniciar sesión en la plataforma de Codificación para ver el código de almacén.

Plataforma integral de gestión de I+D de codificación

5. Espacio de desarrollo

5.1 Ver el espacio de desarrollo en uso

Puede ver que la plantilla que usamos se basa en la plantilla creada por vue-js, y también se puede revertir en el espacio "recientemente eliminado".

5.2 Actualización de la configuración

Si cree que la "versión estándar" no cumple con los requisitos, aún puede continuar, pero la modificación tendrá efecto después del próximo reinicio.

5.3 Detener el proyecto

5.4 Eliminar el proyecto para destruir el espacio de trabajo

3. Preguntas frecuentes

1. ¿A veces no se puede abrir el espacio de trabajo?

Compruebe si hay otros espacios de trabajo abiertos, ya que solo se puede abrir y ejecutar un espacio de trabajo al mismo tiempo.

2. ¿A veces no sé cómo abrir el navegador integrado después de cerrarlo?

Use el siguiente comando para habilitar

cd ./ && set port=5173 && export PORT=5173 && yarn && yarn run dev --host 0.0.0.0 --port=5173

Cuatro Resumen

Mediante el uso de Tencent Cloud Cloud Studio para el desarrollo de aplicaciones de personalización de muebles en 3D esta vez, sentí profundamente la eficiencia y la comodidad que aporta el entorno de desarrollo en la nube de Cloud Studio al trabajo de desarrollo. En resumen, hay los siguientes puntos:

1. Puede desarrollar código o ver el código del proyecto en el navegador sin descargar un editor, lo cual es tan conveniente y conveniente como escribir un artículo, y tiene una experiencia de codificación fluida comparable a un IDE local.

2. No es necesario instalar varios entornos de desarrollo en la computadora. Como todos sabemos, el desarrollo de JAVA requiere el establecimiento de un entorno java, el desarrollo de python requiere la instalación del entorno python correspondiente y el desarrollo del front-end requiere la instalación de un entorno de nodo. Además, Cloud Studio tiene entornos comunes integrados como Node.js, Java y Python, lo que elimina directamente el problema de instalar el entorno.

3. Admite la vista previa en línea para generar rápidamente un enlace de vista previa, lo cual es conveniente para compartir los proyectos de visualización de otras personas o la depuración en línea

4. En el futuro, se integrará un asistente de desarrollo de IA Con la ayuda de las funciones de IA, el desarrollo despegará aún más rápido.

En general, Tencent Cloud Cloud Studio me brindó una muy buena experiencia de desarrollo esta vez, ¡y consideraré explorar más funciones de Cloud Studio en el futuro para potenciar mi trabajo!

[Campamento de entrenamiento práctico de Tencent Cloud Studio] Use Cloud Studio para desarrollar rápidamente una aplicación de personalización de muebles en 3D

Prefacio: