Three.js: r73: ¡¿nada funciona?!

¿Qué no funciona? ¿Qué errores está recibiendo? Siempre me aseguro de que todos los ejemplos sigan funcionando. Si algo se rompió, deberíamos agregar un ejemplo que lo pruebe.

¿Qué no funciona?

Nada funciona !!!
Solo un ejemplo (para ti):
http://necromanthus.com/Test/html5/dog_r72.html
http://necromanthus.com/Test/html5/dog_r73.html
Errores:

• TRES.MorphAnimMesh no está definido
• loader.load no es una función

¿Por qué sacaste algo así?

¡Ah! Veo.

Hemos reemplazado por completo el sistema de animación y SEA3D todavía se basa en el anterior ( @sunag está trabajando en una actualización, creo).

Mientras tanto, debe incluir el antiguo sistema de animación en su proyecto:

<script src="js/MorphAnimMesh.js"></script>
<script src="js/loaders/collada/Animation.js"></script>
<script src="js/loaders/collada/AnimationHandler.js"></script>
<script src="js/loaders/collada/KeyFrameAnimation.js"></script>

Encontrarás los archivos en la carpeta examples .

Hemos reemplazado completamente el sistema de animación.

Y de nuevo, arruinaste la compatibilidad con versiones anteriores ... Dios mío

De todos modos, aquí hay algo más (sin animación ni cargador):
http://necromanthus.com/Test/html5/koolmoves_r72.html
http://necromanthus.com/Test/html5/koolmoves_r73.html
Errores:

• _typeface_js no está definido
• THREE.TextGeometry no es un constructor

Honestamente, r73 es un completo desastre y debería eliminarse.
salud

He confiado en Three.js para ChiliPeppr durante aproximadamente 1,5 años. Esta mañana aparece THREE.FontUtils no está definido, por lo que toda la representación de fuentes está rota en ChiliPeppr. Supongo que es el mismo problema de r73 al que se refiere @RemusMar .

FontUtils y TextGeometry utils también se han eliminado del núcleo.

Ahora tiene que incluir los archivos por separado:

<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/helvetiker_regular.typeface.js"></script>

Decidí sacarlos del núcleo porque el usuario tenía que incluir *.typeface.js todos modos.

@RemusMar No garantizamos la compatibilidad retroactiva entre versiones. Pero agregamos código de transición que notifica al usuario y mantiene el código funcionando cuando / donde podemos.

Las utilidades FontUtils y TextGeometry también se han eliminado del núcleo.

¿Por qué no eliminas todo del núcleo?
No es necesario descargar un núcleo con CERO bytes.

No garantizamos la compatibilidad con versiones anteriores entre versiones.

Esa es una mala jugada Ricardo.
Como dije desde el principio:

La compatibilidad con versiones anteriores es imprescindible en cualquier proyecto serio.
De lo contrario, cada vez menos personas estarán interesadas en ese proyecto.

salud

¿Por qué no eliminas todo del núcleo?
No es necesario descargar un núcleo con CERO bytes.

Supongo que eres un tipo emocional. Sin embargo, te quedas por aquí, así que también deduzco que al final del día encuentras útil el proyecto

La compatibilidad con versiones anteriores es imprescindible en cualquier proyecto serio.

¿Quizás este no es un proyecto tan serio como crees? No soy Adobe, ¿sabes?

De lo contrario, cada vez menos personas estarán interesadas en ese proyecto.

La gente que pierde interés no es algo que me preocupe. En cambio, me concentro en crear una hermosa API que abstraiga las molestias de los gráficos por computadora y, al mismo tiempo, quiero que la biblioteca se ajuste a 100kb en gzip. Es imposible incluir para siempre todas las funciones que agregan las personas.

@RemusMar Compatibilidad con versiones anteriores, si usa js libs así, debería poder reparar el problema usted mismo si algo ya no es compatible. Si no es así, pregunte de una manera más cooperativa, todos estarán encantados de ayudar. Si los ejemplos están rotos, no dude en repararlo ...

@RemusMar Una de las primeras cosas que aprendí sobre three.js, cuando comencé a programar en 3D en JavaScript, fue el hecho de que no es compatible con versiones anteriores.

Creo que, en general, eso no es ningún problema, porque solo tengo que asegurarme de que en mi proyecto me vinculo a la misma versión de three.js con la que he creado mi código.

La política de no tener en cuenta la compatibilidad hacia atrás fue sin duda la base para la oportunidad de desarrollar three.js de una manera tan dinámica, con posibilidades tan fantásticas, hasta ahora.

Eso es un mal movimiento Ricardo

asombroso cómo la gente nota esto después de más de 70 revisiones)

Pero para agregar al punto, alguien me estaba escribiendo recientemente "el último three.js estable es r72", lol. no hay three.js estable. no actualizan revisiones antiguas con correcciones de errores, sino que viene una nueva versión con correcciones de errores _y_ cambios importantes o errores nuevos.

Por otra parte, algunas cosas funcionan mágicamente a través de las versiones incluso si el código subyacente se invirtió. Como máscaras que usan geometría de búfer)

Mientras hablamos de cambios importantes, lo que más me molesta son los cambios de json. Alguien tiene un antiguo plugin de exportación en su 3dmax, y paso años editando json a mano para que las animaciones funcionen.

Por otra parte, algunas cosas funcionan mágicamente a través de las versiones incluso si el código subyacente se invirtió. Como máscaras que usan geometría de búfer)

¡Eso requirió un poco de esfuerzo! 😅

Mientras hablamos de cambios importantes, lo que más me molesta son los cambios de json. Alguien tiene un antiguo plugin de exportación en su 3dmax, y paso años editando json a mano para que las animaciones funcionen.

Si. La animación debe estabilizarse lo antes posible. Creo que el nuevo sistema de animación es un gran paso en la dirección correcta.

Parece que esta muestra está rota dados los cambios de r73. http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry

Oh! Olvídese siempre de las muestras en los documentos ...

@mrdoob
¿Qué debo usar para reemplazar la "vieja" clase THREE.Animation?
¿Hay ejemplos que usen el nuevo sistema de animación? No está tan claro qué hay de nuevo en la página de ejemplos.

Mientras hablamos de cambios importantes, lo que más me molesta son los cambios de json. Alguien tiene un antiguo plugin de exportación en su 3dmax, y paso años editando json a mano para que las animaciones funcionen.

Esto también ha sido una preocupación mía. Realmente no quiero tener que volver a exportar cientos de modelos.

@jostschmithals
La política de no tener en cuenta la compatibilidad hacia atrás fue sin duda la base para la oportunidad de desarrollar three.js de una manera tan dinámica, con posibilidades tan fantásticas, hasta ahora.

Esa es una declaración falsa.
De hecho, romper la compatibilidad con versiones anteriores todo el tiempo hace que los desarrolladores externos renuncien a THREE.js
Por otro lado, las nuevas funciones y las correcciones de errores no significan romper la compatibilidad con los proyectos más antiguos.
Si Ricardo continúa por este camino, el tiempo dirá si tengo razón o no.
salud

Esto también ha sido una preocupación mía. Realmente no quiero tener que volver a exportar cientos de modelos.

¡Convenido! El formato json es algo en lo que creo que la compatibilidad con versiones anteriores es muy importante. De todos modos, no es difícil de hacer.

¡Convenido! El formato json es algo en lo que creo que la compatibilidad con versiones anteriores es muy importante. De todos modos, no es difícil de hacer.

Gran suspiro de alivio =]

Parece un poco prematuro lanzar una compilación sin actualizar la guía de migración cuando se trata de cambios importantes. Afortunadamente para mí, desde que sigo estos foros, estaba al tanto del Cambio de animación. No apostaría a que todos los usuarios estuvieran igualmente preparados.

Estoy de acuerdo con Remus en eliminar cosas del núcleo solo para mantener el límite de tamaño de 100 KB. Personalmente, me preocupo 10000 veces más por la funcionalidad que por reducir unos pocos bytes. Sé que puedo tomar los archivos necesarios de los ejemplos, pero parece una especie de dolor innecesario en el trasero (especialmente tener que actualizarlos en cada versión).

De todos modos basta de quejarse de mí. Dejando de lado estas pocas críticas, ¡trabajo increíble, muchachos!

Parece un poco prematuro lanzar una compilación sin actualizar la guía de migración cuando se trata de cambios importantes.

Hacer una publicación implica varios pasos. A veces mi paciencia / dedicación se acaba ... 😕
Cualquiera puede actualizar la página de migración. Me encantaría recibir ayuda allí.

Parece que esta muestra está rota dados los cambios de r73. http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry

¡Fijo!

¿Dónde puedo encontrar FontUtils en r74? Parece ser eliminado en r74 ...

@pjanik

Sí, lo siento, la API TextGeometry cambió nuevamente. ¡Sin embargo, está de vuelta en el núcleo!

Utilice http://threejs.org/examples/webgl_shadowmap.html como referencia.

var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_bold.typeface.js', function ( font ) {

    var textGeo = new THREE.TextGeometry( "THREE.JS", {

        font: font,

        size: 200,
        height: 50,
        curveSegments: 12,

        bevelThickness: 2,
        bevelSize: 5,
        bevelEnabled: true

    });

    textGeo.computeBoundingBox();
    var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );

    var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );

    var mesh = new THREE.Mesh( textGeo, textMaterial );
    mesh.position.x = centerOffset;
    mesh.position.y = FLOOR + 67;

    mesh.castShadow = true;
    mesh.receiveShadow = true;

    scene.add( mesh );

} );

Si alguien está interesado, así es como cargué la fuente sin una solicitud asíncrona, usando el módulo NPM [email protected] y el paquete web: https://gist.github.com/pjanik/49c03c02c66341a26904
Si está utilizando cualquier otra herramienta de compilación, la clave es cargar el archivo de fuente como una cadena. ¿Quizás este análisis divertido podría extraerse a algún método auxiliar en el futuro?

En una nota al margen, es genial que r74 incluya /examples dir (r73 no lo hizo), continúe haciéndolo. : wink: Finalmente, solo puedo usar el paquete three , no más archivos de script externos (también estoy usando examples/js/controls/OrbitControls ). Sería aún más genial si los ejemplos se publicaran usando el formato UMD, por lo que podría requerir directamente OrbitControls sin eliminar la dependencia THREE global (no es gran cosa, ya que la mayoría de las herramientas de compilación pueden manejarlo, pero aún así).

¡Gracias!

o simplemente podría definir _typeface_js.loadFace localmente y evaluarlo?

Sí, lo siento, la API de TextGeometry cambió nuevamente. ¡Sin embargo, está de vuelta en el núcleo!

Ricardo fue una sabia decisión.
Se necesita un cambio de sintaxis menor para el cargador, pero es compatible con versiones anteriores.
r71: http://necromanthus.com/Test/html5/koolmoves.html
r74: http://necromanthus.com/Test/html5/koolmoves_r74.html
salud

¿Deberíamos volver a agregar la carga de geometría de texto en ObjectLoader?

@fraguada bueno, no es tan fácil, también debemos manejar el archivo de fuentes ...

FontUtil no está definido en la versión de r74 que he estado obteniendo: https://github.com/mrdoob/three.js/blob/master/build/three.js

Eso parece ser el mismo que está siendo utilizado por http://threejs.org/examples/webgl_shadowmap.html (excepto minificado) pero tampoco lo veo explícitamente incluyendo FontUtils o tipo de letra ... sin embargo, esa página de ejemplo funciona . (Mientras que todavía obtengo "_typeface_js no está definido") ¿Está haciendo algo además de lo que se muestra en su comentario (el ejemplo de código 6 comentarios arriba de este)?

La documentación debe actualizarse a medida que cambia la API, esto ya no se aplica: http://threejs.org/docs/index.html#Reference/Extras.Geometries/TextGeometry

Hubiera sido muy útil tener un ejemplo muy básico sin todas las pulsaciones de tecla grabando el cambio de fuentes, pesos y biseles. No es que no sea bueno tenerlos, pero uno simple y básico en tus ejemplos me habría ahorrado un montón de tiempo.

Este ejemplo podría haber ayudado mucho: http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry , pero cuando miras la fuente, solo termina dibujando un toro ya que atrae recursos externos para realmente hacer el trabajo.

Reuní este ejemplo simple en JSFiddle para cualquiera que encuentre este hilo.
https://jsfiddle.net/287rumst/1/

Hubiera sido muy útil tener un ejemplo muy básico

r75 y r76dev:
http://necromanthus.com/Test/html5/koolmoves.html

Solo dos mis centavos porque también soy fanático de la compatibilidad con versiones anteriores:

Si no se puede garantizar la compatibilidad, sería bueno tener una carpeta upgrade (o fixes ) en github que muestre la versión anterior y el nuevo manejo. Una referencia.

De esta manera, sería fácil para los programadores ponerse al día con los cambios.

Sigo usando r65 debido a problemas tan "desconocidos" que no tengo tiempo adicional para dedicarlo a averiguar cómo solucionar estos problemas.

Hola a todos, acabo de pasar de r71 a r76 y descubrí el nuevo animation.mixer. Entonces, para mantener funcionando mis antiguas bibliotecas de objetos json 3D, copié MorphAnimMesh.js Animation.js AnimationHandler.js y KeyFrameAnimation.js en mi biblioteca de JavaScript. Pero ahora aparece el error "jerarquía de datos indefinida". ¿Significa esto que tengo que volver a exportar todos mis objetos json 3D anteriores de Blender o hay alguna manera de que sigan funcionando?

Hola, ¿Nadie para ayudar con la "jerarquía de datos indefinidos"?

Por favor, use StackOverflow para obtener ayuda.

Hacer una publicación implica varios pasos. A veces se me acaba la paciencia / dedicación ...: confuso:
Cualquiera puede actualizar la página de migración. Me encantaría recibir ayuda allí.

Recientemente me encontré con este problema usando una versión anterior de three.js.

Pero después de leer los comentarios e insultos que recibió, en lugar de pedir ayuda, solo quería agradecerle por mantener three.js.

¡Eres un chico súper dedicado y paciente! : +1:

La actualización de r72 a r84 fue un montón de trabajo (~ 3 horas para un proyecto).

Servicial:

• Para el problema de la fuente: vea el código fuente de http://necromanthus.com/Test/html5/koolmoves.html (ya no carga la fuente en HTML, sino en JS, asigna una var y esto entra en los parámetros. Tenga cuidado de asignar la fuente solo DESPUÉS de que se haya cargado)
• ver los mensajes de error en la consola de desarrollo, ayudan mucho, porque incluso te dicen qué hacer (buen trabajo @mrdoob )
• también eche un vistazo a https://github.com/mrdoob/three.js/wiki/Migration-Guide

Mi feliz resultado: https://www.matheretter.de/geoservant/en/

En detalle, lo que necesitaba hacer de v72 a v84:

1. Eliminar de su archivo html:

   <!-- OLD <script src="../../threejs/geometries/TextGeometry.js"></script>  -->
   <!-- <script src="../../threejs/helvetiker_regular.typeface.js"></script>  -->
   

2. Ejecute su escena de threejs, probablemente obtenga:

   Uncaught TypeError: c.generateShapes is not a function
   

3. Esto sucede porque el renderizador se inicia sin tener la fuente cargada. Primero carguemos la fuente y luego llamemos al renderizador al inicio:

   var text3dparams;
   var font_helvetiker;
   var fontload = new THREE.FontLoader();
   fontload.load( '/threejs/fonts/helvetiker_regular.typeface.json', function ( font ) {
       font_helvetiker = font;
       initStageText();
   
       // startup
       render(); 
   });
   

4. Cuando configuro el texto como nuevo durante el tiempo de ejecución, necesito definir los objetos del escenario en el paisaje global, por ejemplo:

   var text3d_r;
   var text3d_s;
   var text3d_h;
   var material1;
   var material_s;
   var material2;
   

5. Ejemplo de la función de inicio:

   function initStageText()
   {
       // 3D TEXT LABELS
       text3dparams = {
           font:           font_helvetiker, // font, important to change, before was "helvetiker", now the font directly!
           size:           0.3,    // size of the text
           height:         0.05,   // thickness to extrude text
           curveSegments:  2,      // number of points on the curves
           weight:         'normal',       // font weight (normal, bold)
           style:          'normal',       // font style  (normal, italics)
       }
   
       // label radius
       material1 = new THREE.MeshBasicMaterial({color: 0x009900});
       var text3dgeom_r = new THREE.TextGeometry('r = '+cone_radius, text3dparams);
       text3d_r = new THREE.Mesh(text3dgeom_r, material1);
       text3d_r.position.y = cone_height+0.1;
       text3d_r.position.z = cone_radius/2-0.35;
       text3d_r.rotation.y = -Math.PI/2;
       scene.add(text3d_r);
   }
   

6. También recibí el error THREE.GridHelper: setColors() has been deprecated, pass them in the constructor instead. Para resolver esto, eliminé:

   gridHelper.setColors( new THREE.Color(gridcolor), new THREE.Color(gridcolor) );
   

y agregado (gridstep era 1 antes, luego necesitaba establecer el valor en 20 para obtener la misma cuadrícula):

    var gridHelper = new THREE.GridHelper(gridplaneSize/2, gridstep, gridcolor, gridcolor);

1. Luego debo encargarme de los cambios de threejs (que se muestran como advertencia en la consola de Chrome):

6.1 THREE.MeshBasicMaterial: 'ambient' is not a property of this material. Resuelto eliminando ambient:color, de new THREE.MeshBasicMaterial();

6.2 Cambios de luces, simplemente reemplácelos como se indica en las advertencias:

    THREE.Light: .shadowMapWidth is now .shadow.mapSize.width.
    THREE.Light: .shadowMapHeight is now .shadow.mapSize.height.
    THREE.Light: .shadowCameraNear is now .shadow.camera.near.
    THREE.Light: .shadowCameraFar is now .shadow.camera.far.
    THREE.Light: .shadowCameraFov is now .shadow.camera.fov.
    THREE.Light: .shadowCameraVisible has been removed. Use new THREE.CameraHelper( 
    THREE.WebGLRenderer: .shadowMapEnabled is now .shadowMap.enabled.

6.3 THREE.Light: .shadowDarkness has been removed. - eliminarlo.

1. También cambié la configuración del renderizador:

   // OLD 
   var renderer = Detector.webgl ? new THREE.WebGLRenderer({ antialias: true }) : new THREE.CanvasRenderer({ antialias: true });
   
   // NEW
   var renderer;
   if(Detector.webgl)
   {
       renderer = new THREE.WebGLRenderer({ antialias: true });
   }
   else
   {
       renderer = new THREE.CanvasRenderer({ antialias: true });
   }
   

2. También necesitaba agregar un color de fondo blanco a la configuración de la escena:

   var scene = new THREE.Scene();          
   scene.background = new THREE.Color( 0xffffff );
   

Ahora mi aplicación se ejecuta como con la versión anterior de threejs. ¡Buena suerte también para tu proyecto!