Explicación detallada de cómo ejecutar localmente al aprender la documentación china de three.js

Prefacio

Este artículo pertenece a una serie de preguntas. Los amigos que lo necesiten pueden consultar los siguientes dos artículos antes de comenzar:

1. Aprendizaje de documentos chinos Crear una escena

2. Aprendizaje de documentos chinos Three.js mediante la importación de módulos

Si solo usa geometría programada y no necesita cargar ningún material, la página web debería cargarse directamente desde el sistema de archivos, simplemente haga doble clic en el archivo HTML en el administrador de archivos y debería ejecutarse en su navegador (la barra de direcciones se ve así: file:///yourFile.html)

Cargando contenido desde archivos externos

Si descarga módulos y materiales desde archivos externos, debido a las restricciones de seguridad de la política del mismo origen del navegador, se producirá una excepción de seguridad y la carga fallará.

Hay dos soluciones:

Modificar la seguridad de los archivos locales en el navegador. Puede ingresar a la página web de esta manera:

file:///yourFile.html

Ejecutando el archivo desde el servidor web local, puede ingresar a la página web de esta manera:

http: //localhost/yourFile.html

Si utiliza el primer método, tenga en cuenta que será vulnerable al utilizar el mismo navegador (después de modificar la seguridad) para Internet normal. acceso. Puede crear una configuración de navegador independiente y accesos directos para el desarrollo local solo para garantizar la seguridad. Veamos cada método por separado.

Ejecutar un servidor local

Muchos lenguajes de programación tienen servidores HTTP integrados. No tienen la funcionalidad completa de Apache o NGINX, pero son suficientes para probar aplicaciones three.js.

Servidor Node.js

Hay un paquete de instalación de servidor HTTP simple, instale:

npm install http-server -g

Ejecute:

http-server -p 8000

Servidor Python

Si tiene Python instalado, ejecute la siguiente línea de comando en su directorio de trabajo:

p>

//Python 2.x

python -m SimpleHTTPServer

//Python 3.x

python -m http .server

Irá desde el directorio actual al puerto 80 de localhost para iniciar el servicio. La barra de direcciones es la siguiente:

http://localhost:8000/

. p>

Servidor PHP

PHP también tiene un servidor web integrado, php 5.4.0 y posterior:

php -S localhost:8000

Servidor Ruby

Si instala Para hacer esto, puede ejecutar el siguiente código:

ruby -r webrick -e "s = WEBrick: :HTTPServer.new(:Port= gt; 8000, :DocumentRoot =gt; Dir.pwd); trap ('INT') { s.shutdown }; Servidor web de propósito general. Tomemos como ejemplo un sistema OSX con HomeBrew instalado. A diferencia de los servidores anteriores, lighttpd es un producto de servidor maduro.

Instalar mediante homebrew

brew install loghttpd

Cree un archivo de configuración llamado lighttpd.conf donde desee ejecutar el servidor web. Ejemplo:

server.document-root = "/var/www/servers/www.example.org/pages/"

server.port = 3000

mimetype.assign = (

".html" =gt; "texto/html",

".txt" =gt; "texto/plain",

".jpg" =gt; "imagen/jpeg",

".png" =gt; "imagen/png"

)

En el archivo de configuración, cambie server.document-root al directorio que necesita servir.

Habilitar:

lighttpd -f lighttpd.conf

Ingrese http://localhost:3000/ para servir archivos estáticos desde el directorio que elija.

Cambiar la política de seguridad para archivos locales

Safari

Usa el panel de preferencias para activar las opciones de desarrollador: Advanced-gt "Mostrar menú de desarrollo en la barra de menús; " .

Luego en development-gt; deshabilite las restricciones de archivos locales. Si usa Safari para editar y depurar, vale la pena señalar que Safari siempre se comporta de manera extraña con el almacenamiento en caché, por lo que hacer clic en Desactivar caché en el mismo menú es una buena elección.

chrome

Primero cierre todas las instancias de Chrome en ejecución, recuérdelo todo.

En Windows, debes utilizar el administrador de procesos para comprobar si están cerrados. O, si ve el icono de Chrome en la bandeja del sistema, abra el menú contextual y haga clic en Salir. Esto debería cerrar todas las instancias.

Luego inicia el programa Chrome a través de la etiqueta de línea de comando:

chrome --allow-file-access-from-files

En Ventana, la forma más sencilla Simplemente cree un ícono de acceso directo especial y agregue el logotipo de arriba al final. (Haga clic con el botón derecho en el acceso directo de chrome-gt; Propiedades-gt; Destino)

Firefox

En la barra de direcciones, ingrese about:config

Buscar seguridad .fileuri. El parámetro estricto_origin_policy

Establecer en falso

También se analizan otros métodos simples en Stack Overflow.

Resumen