我正在尝试开始学习 ThreeJs(我也是 Javascript Web 开发的新手)。看了一些教程后,我从vite和react开始,然后从基本的旋转立方体开始。该部分有效。
但是根据我所读到的有关 vite 的内容,保存我正在处理的文件应该足以将其重新加载到页面上。事实并非如此。我检查了页面内容,每次保存文件时,都会将 2x 相同的画布元素附加到页面正文(而不是替换现有的),这意味着我必须向下滚动到页面底部才能看到新内容(或者重新加载页面,这违背了Vite快速刷新功能的目的)。
我做错了什么?我搭建了一个基本的vite项目,在App中添加了一个组件,然后按照教程做了一个基本的立方体渲染,一路上我就绕过了Vite的快速刷新。帮忙?
Github: https://github.com/amdreallyfast/ThreeJsTutorials/tree/main/npmfrontend
重现:
clone cd <directory>/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
您每次在
render
函数中都会调用renderScene
。在React中,每次重新渲染/更新时都会调用render
函数。因此,每次更新(在您的情况下为热重载)都会触发
render
函数,从而创建一个新的 DOM 元素。使用 React 时手动创建 DOM 元素通常是一种反模式(除非您完全确定自己在做什么)。我建议使用 Three.js React 渲染器,如下所示: https://github.com/ pmndrs/react-三纤维
如果出于某种原因你确实想这样做,你可以考虑在 React 应用程序的
componentDidMount
生命周期期间调用它,并确保在componentWillUnmount
生命周期期间清理它。您可以在这里阅读有关它们的更多信息: https://react.dev/reference/react/Component#组件已挂载