J'essaie de commencer à apprendre ThreeJs (je suis également nouveau dans le développement Web Javascript). Après avoir regardé quelques tutoriels, j'ai commencé avec Vite et React, puis avec un cube rotatif de base. Cette partie fonctionne.
Mais d'après ce que j'ai lu sur vite, enregistrer le fichier sur lequel je travaille devrait suffire à le recharger sur la page. Mais en fait, ce n'est pas le cas. J'ai vérifié le contenu de la page et chaque fois que j'enregistre le fichier, 2 fois le même élément de canevas est ajouté au corps de la page (au lieu de remplacer celui existant), ce qui signifie que je dois faire défiler vers le bas de la page pour voir le nouveau. contenu (ou recharger la page, ce qui va à l'encontre de l'objectif de la fonction d'actualisation rapide de Vite).
Qu'est-ce que j'ai fait de mal ? J'ai construit un projet Vite de base, ajouté un composant à l'application et suivi le didacticiel pour effectuer un rendu de cube de base, en contournant l'actualisation rapide de Vite en cours de route. aide?
Github : https://github.com/amdreallyfast/ThreeJsTutorials/tree/main/npmfrontend
Réapparition :
clone cd/npmfrontend npm install npm run dev Open page in browser Inspect page -> Elements Open SceneRenderer.jsx Make change and save (ex: rotation speed; repeat multiple times) Notice how the body element on the loaded page keeps appending new canvases
Chaque fois que vous êtes dans la fonction
render
函数中都会调用renderScene
。在React中,每次重新渲染/更新时都会调用render
.Donc, chaque mise à jour (rechargement à chaud dans votre cas) déclenche la fonction
render
, créant un nouvel élément DOM.La création manuelle d'éléments DOM lors de l'utilisation de React est généralement un anti-modèle (sauf si vous êtes absolument sûr de ce que vous faites). Je recommande d'utiliser le moteur de rendu Three.js React comme indiqué ci-dessous :https://github.com/pmndrs/react-two-fiber
Si pour une raison quelconque vous souhaitez vraiment faire cela, vous pourriez envisager de le nettoyer pendant le
componentDidMount
生命周期期间调用它,并确保在componentWillUnmount
cycle de vie de votre application React. Vous pouvez en savoir plus à leur sujet ici :https://react.dev/reference/react/Component#Component est monté