Three.js: r73: nada funciona!?!

O que não funciona? Que erros você está recebendo? Sempre me certifico de que todos os exemplos ainda funcionem. Se algo quebrou, devemos adicionar um exemplo que teste isso.

O que não funciona?

Nada funciona !!!
Apenas um exemplo (para você):
http://necromanthus.com/Test/html5/dog_r72.html
http://necromanthus.com/Test/html5/dog_r73.html
Erros:

• THREE.MorphAnimMesh é indefinido
• loader.load não é uma função

Por que você lançou algo assim ???

Ah! Eu vejo.

Substituímos completamente o sistema de animação e SEA3D ainda depende do antigo ( @sunag está trabalhando em uma atualização, eu acho).

Enquanto isso, você precisa incluir o antigo sistema de animação em seu projeto:

<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>

Você encontrará os arquivos na pasta examples .

Substituímos completamente o sistema de animação

E, novamente, você bagunçou a compatibilidade com versões anteriores ... OMG

De qualquer forma, aqui está outra coisa (sem animação e carregador):
http://necromanthus.com/Test/html5/koolmoves_r72.html
http://necromanthus.com/Test/html5/koolmoves_r73.html
Erros:

• _typeface_js não está definido
• THREE.TextGeometry não é um construtor

Honestamente, o r73 é uma bagunça completa e deve ser removido.
Felicidades

Tenho confiado no Three.js para ChiliPeppr por cerca de 1,5 anos. Esta manhã, aparece THREE.FontUtils é indefinido, portanto, toda a renderização de fonte está interrompida no ChiliPeppr. Suponho que seja o mesmo problema do r73 ao qual

FontUtils e TextGeometry utils também foram removidos do núcleo.

Agora você deve incluir os arquivos separadamente:

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

Decidi removê-los do núcleo porque o usuário teve que incluir *.typeface.js qualquer maneira.

@RemusMar Não garantimos compatibilidade retroativa entre as versões. Mas adicionamos código de transição que notifica o usuário e mantém o código funcionando quando / onde podemos.

Os utilitários FontUtils e TextGeometry também foram removidos do núcleo.

Por que você não remove tudo do núcleo?
Um núcleo com ZERO bytes não precisa ser baixado.

Não garantimos compatibilidade retroativa entre as versões.

Essa é uma má jogada, Ricardo.
Como disse desde o início:

A compatibilidade com versões anteriores é OBRIGATÓRIA em qualquer projeto sério.
Caso contrário, cada vez menos pessoas estarão interessadas naquele projeto.

Felicidades

Por que você não remove tudo do núcleo?
Um núcleo com ZERO bytes não precisa ser baixado.

Acho que você é um cara emotivo. No entanto, você fica por perto, então eu também acho que no final do dia você acha o projeto útil 😉

A compatibilidade com versões anteriores é OBRIGATÓRIA em qualquer projeto sério.

Talvez este não seja um projeto tão sério quanto você pensa que é? Eu não sou Adobe sabe?

Caso contrário, cada vez menos pessoas estarão interessadas naquele projeto.

Pessoas perdendo o interesse não é algo que me preocupe. Em vez disso, foco na criação de uma bela API que abstraia os aborrecimentos da computação gráfica e, ao mesmo tempo, quero que a biblioteca caiba em 100kb gzip. É impossível incluir para sempre todos os recursos que as pessoas adicionam.

@RemusMar Compatibilidade com versões anteriores, se você usar js libs assim, você deve ser capaz de reparar o problema sozinho se algo não for mais suportado. Se não, pergunte de uma forma mais cooperativa, todos têm prazer em ajudar. Se os exemplos estiverem quebrados, fique à vontade para consertá-los ...

@RemusMar Uma das primeiras coisas que aprendi sobre three.js, quando comecei a programação 3D em JavaScript, foi o fato de que não é compatível com versões anteriores.

Eu acho que, em geral, isso não é absolutamente nenhum problema, porque eu só tenho que ter certeza de que em meu projeto estou vinculado à mesma versão de three.js com que construí meu código.

A política de não levar em conta a compatibilidade com versões anteriores foi certamente a base para a chance de desenvolver o three.js de forma tão dinâmica, com possibilidades tão fantásticas, até agora.

Essa é uma má jogada Ricardo

incrível como as pessoas percebem isso após mais de 70 revisões)

Mas para aumentar o ponto, alguém escreveu recentemente para mim "o último three.js estável é o r72", lol. não há um three.js estável. eles não atualizam as revisões antigas com correções de bugs, em vez disso, vêm uma nova versão com correções de bugs _e_ mudanças significativas ou novos bugs.

Então, novamente, algumas coisas funcionam magicamente por meio de versões, mesmo se o código subjacente for virado de cabeça para baixo. Como skins usando geometria de buffer)

Embora estejamos no assunto de mudanças significativas, o que mais está me irritando são as mudanças de json. Alguém tem um antigo plugin de exportação em seu 3dmax, e eu passo anos editando json à mão para fazer as animações funcionarem.

Então, novamente, algumas coisas funcionam magicamente por meio de versões, mesmo se o código subjacente for virado de cabeça para baixo. Como skins usando geometria de buffer)

Isso exigiu algum esforço! 😅

Embora estejamos no assunto de mudanças significativas, o que mais está me irritando são as mudanças de json. Alguém tem um antigo plugin de exportação em seu 3dmax, e eu passo anos editando json à mão para fazer as animações funcionarem.

Sim. A animação precisa ficar estável o mais rápido possível. Acho que o novo sistema de animação é um grande passo na direção certa.

Parece que este exemplo está quebrado devido às alterações do r73. http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry

Oh! Sempre se esqueça das amostras nos documentos ...

@mrdoob
O que devo usar para substituir a "velha" classe TRÊS.Animação?
Existem exemplos que usam o novo sistema de animação? Não está tão claro o que há de novo na página de exemplos.

Embora estejamos no assunto de mudanças significativas, o que mais está me irritando são as mudanças de json. Alguém tem um antigo plugin de exportação em seu 3dmax, e eu passo anos editando json à mão para fazer as animações funcionarem.

Esta tem sido uma preocupação minha também. Eu realmente não quero ter que reexportar centenas de modelos.

@jostschmithals
A política de não levar em conta a compatibilidade com versões anteriores foi certamente a base para a chance de desenvolver o three.js de forma tão dinâmica, com possibilidades tão fantásticas, até agora.

Essa é uma declaração falsa.
Na verdade, quebrar a compatibilidade com versões anteriores o tempo todo faz com que os desenvolvedores terceirizados desistam do THREE.js
Por outro lado, novos recursos e correções de bugs não significam quebrar a compatibilidade com os projetos mais antigos.
Se o Ricardo continuar nesse caminho, o tempo dirá se estou certo ou não.
Felicidades

Esta tem sido uma preocupação minha também. Eu realmente não quero ter que reexportar centenas de modelos.

Acordado! O formato json é algo em que a compatibilidade com versões anteriores é super importante. Não é difícil de fazer de qualquer maneira.

Acordado! O formato json é algo em que a compatibilidade com versões anteriores é super importante. Não é difícil de fazer de qualquer maneira.

Grande suspiro de alívio =]

Parece um pouco prematuro lançar uma compilação sem atualizar o guia de migração quando há alterações significativas. Felizmente para mim, já que sigo essas placas, eu estava ciente da Mudança na Animação. Eu não apostaria que todos os usuários estivessem igualmente preparados.

Eu concordo com Remus sobre remover coisas do núcleo apenas para manter o limite de tamanho de 100 KB. Pessoalmente, me preocupo 10000 vezes mais com a funcionalidade do que com a redução de alguns bytes. Eu sei que posso pegar os arquivos necessários de exemplos, mas parece um tipo de dor de cabeça desnecessária (especialmente ter que atualizá-los a cada versão).

De qualquer forma, chega de reclamar de mim. Deixando essas poucas críticas de lado, pessoal incrível do trabalho!

Parece um pouco prematuro lançar uma compilação sem atualizar o guia de migração quando há alterações significativas.

Fazer um lançamento envolve algumas etapas. Às vezes minha paciência / dedicação acaba ... 😕
Qualquer pessoa pode atualizar a página de migração. Eu adoraria obter ajuda lá.

Parece que este exemplo está quebrado devido às alterações do r73. http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry

Fixo!

Onde posso encontrar FontUtils no r74? Parece ser removido em r74 ...

@pjanik

Sim, desculpe por isso, a API TextGeometry mudou novamente. Mas está de volta ao núcleo!

Use http://threejs.org/examples/webgl_shadowmap.html como referência.

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 );

} );

Se alguém estiver interessado, carreguei a fonte sem solicitação assíncrona, usando o módulo NPM [email protected] e o webpack: https://gist.github.com/pjanik/49c03c02c66341a26904
Se você estiver usando qualquer outra ferramenta de construção, o principal é carregar o arquivo de fonte como uma string. Talvez essa análise engraçada pudesse ser extraída para algum método auxiliar no futuro?

Em uma nota lateral, é legal que r74 inclua /examples dir (r73 não incluía), por favor, continue fazendo isso. : wink: Finalmente, posso usar apenas o pacote three , sem mais arquivos de script externos (também estou usando examples/js/controls/OrbitControls ). Seria ainda mais legal se os exemplos fossem publicados usando o formato UMD, então eu poderia exigir OrbitControls diretamente sem shimear a dependência TRÊS global (não é grande coisa, pois a maioria das ferramentas de construção pode lidar com isso, mas ainda assim).

Obrigado!

ou você poderia apenas definir _typeface_js.loadFace localmente e avaliá-lo?

Sim, desculpe por isso, a API TextGeometry mudou novamente. Mas está de volta ao núcleo!

Essa foi uma decisão acertada Ricardo.
Uma pequena mudança de sintaxe para o carregador é necessária, mas é compatível com versões anteriores.
r71: http://necromanthus.com/Test/html5/koolmoves.html
r74: http://necromanthus.com/Test/html5/koolmoves_r74.html
Felicidades

Devemos adicionar o carregamento de volta da geometria do texto no ObjectLoader?

@fraguada bem, não é assim tão fácil, devemos também manusear o arquivo de fonte ...

FontUtil não está definido na versão de r74 que tenho obtido: https://github.com/mrdoob/three.js/blob/master/build/three.js

Parece ser o mesmo que está sendo usado por http://threejs.org/examples/webgl_shadowmap.html (exceto minimizado), mas também não vejo explicitamente incluindo FontUtils ou fonte ... mas essa página de exemplo funciona . (Enquanto eu ainda recebo "_typeface_js is not defined") Você está fazendo algo além do que é mostrado em seu comentário (o exemplo de código 6 comentários acima deste)?

A documentação precisa ser atualizada conforme a API muda, isso não se aplica mais: http://threejs.org/docs/index.html#Reference/Extras.Geometries/TextGeometry

Teria sido muito útil ter um exemplo muito básico sem todas as teclas digitadas trocando fontes, pesos e chanfros. Não que eles também não sejam ótimos, mas um simples e básico em seus exemplos teria me economizado muito tempo.

Este exemplo pode ter ajudado muito: http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry , mas quando você olha para a fonte, ele acaba desenhando um toro conforme puxa recursos externos para realmente fazer o trabalho.

Eu montei este exemplo simples no JSFiddle para qualquer pessoa que encontrar este tópico.
https://jsfiddle.net/287rumst/1/

Teria sido muito útil ter um exemplo básico

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

Só dois centavos porque também sou um fã de compatibilidade com versões anteriores:

Se a compatibilidade não puder ser garantida, seria bom ter uma pasta upgrade (ou fixes ) no github que mostra a versão antiga e o novo tratamento. Uma referência.

Dessa forma, seria fácil para os programadores acompanhar as mudanças.

Ainda estou usando o r65 por causa de tais problemas "desconhecidos" que não tenho tempo extra para gastar tentando descobrir como corrigi-los.

Olá a todos, Acabei de mudar de r71 para r76 e descobri o novo animation.mixer. Portanto, para manter minhas bibliotecas de objetos 3D json mais antigas funcionando, copiei o MorphAnimMesh.js Animation.js AnimationHandler.js e KeyFrameAnimation.js na minha biblioteca de javascript. Mas agora recebo o erro "hierarquia de dados indefinida". Isso significa que eu tenho que exportar novamente todos os meus antigos objetos json 3D do Blender ou existe uma maneira de mantê-los funcionando?

Olá, Ninguém para ajudar com "undefined data.hierarchy"?

Por favor, use StackOverflow para obter ajuda.

Fazer um lançamento envolve algumas etapas. Às vezes minha paciência / dedicação se esgota ...: confused:
Qualquer pessoa pode atualizar a página de migração. Eu adoraria obter ajuda lá.

Recentemente, encontrei esse problema usando uma versão mais antiga do three.js.

Mas depois de ler os comentários e insultos que você recebeu, em vez de pedir ajuda, eu só queria agradecer por manter o three.js.

Você é um cara super dedicado e paciente! : +1:

A atualização de r72 para r84 foi um monte de trabalho (~ 3 horas para um projeto).

Útil:

• Para o problema da fonte: veja o código-fonte de http://necromanthus.com/Test/html5/koolmoves.html (você não carrega mais a fonte em HTML, mas em JS, atribua uma var e isso vai para os parâmetros. Cuidado para atribuir a fonte APÓS ela ter sido carregada)
• veja as mensagens de erro no console dev, elas ajudam muito, porque até te dizem o que fazer (bom trabalho @mrdoob )
• também dê uma olhada em https://github.com/mrdoob/three.js/wiki/Migration-Guide

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

Em detalhes o que eu precisava fazer da v72 à v84:

1. Remova do seu arquivo html:

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

2. Execute sua cena de três anos, você provavelmente obterá:

   Uncaught TypeError: c.generateShapes is not a function
   

3. Isso acontece porque o renderizador inicia sem ter a fonte carregada. Então, vamos primeiro carregar a fonte e depois chamar o renderizador na inicialização:

   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. Conforme eu defino o texto novo durante o tempo de execução, preciso definir os objetos do palco no cenário global, por exemplo:

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

5. Exemplo da função inicial:

   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. Também recebi o erro THREE.GridHelper: setColors() has been deprecated, pass them in the constructor instead. Para resolver isso, removi:

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

e adicionado (o gridstep era 1 antes, então precisava definir o valor para 20 para obter a mesma grade):

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

1. Em seguida, preciso cuidar das alterações de três js (mostradas como aviso no console do Chrome):

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

6.2 Mudanças de luzes, basta substituir conforme indicado nos avisos:

    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. - remova-o.

1. Eu também mudei a configuração do 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. Eu também precisava adicionar uma cor de fundo branca à configuração da cena:

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

Agora meu aplicativo funciona como na versão anterior do threejs. Boa sorte para o seu projeto também!