{"id":5931,"date":"2024-08-13T23:12:23","date_gmt":"2024-08-13T15:12:23","guid":{"rendered":"https:\/\/www.aisharenet.com\/?p=5931"},"modified":"2024-09-11T15:32:31","modified_gmt":"2024-09-11T07:32:31","slug":"threejs","status":"publish","type":"post","link":"https:\/\/www.kdjingpai.com\/en\/threejs\/","title":{"rendered":"\u4e3aCursor\u914d\u7f6ethree.js\u7f16\u7a0b\u63d0\u793a\u8bcd\u6307\u4ee4"},"content":{"rendered":"<div class=\"el-p\" data-tag-name=\"p\">\n<p dir=\"auto\">\u672c\u6307\u5357\u65e8\u5728\u5e2e\u52a9\u60a8\u4f7f\u7528 React\u3001Vite\u3001Tailwind CSS\u3001Three.js\u3001React Three Fiber \u548c Next UI \u8fdb\u884c\u9ad8\u6548\u5f00\u53d1\u3002\u4ee5\u4e0b\u662f\u5173\u952e\u8981\u70b9\u548c\u6700\u4f73\u5b9e\u8df5\uff1a<\/p>\n<\/div>\n<div class=\"el-ol\" data-tag-name=\"ol\">\n<ol>\n<li dir=\"auto\" data-line=\"0\">\u7f16\u7801\u98ce\u683c<\/li>\n<\/ol>\n<\/div>\n<div class=\"el-ul\" data-tag-name=\"ul\">\n<ul class=\"has-list-bullet\">\n<li dir=\"auto\" data-line=\"0\">\u4f7f\u7528\u7b80\u6d01\u3001\u6280\u672f\u6027\u7684\u4ee3\u7801\uff0c\u63d0\u4f9b\u51c6\u786e\u7684 <a href=\"https:\/\/www.kdjingpai.com\/ja\/react\/\">React<\/a> \u793a\u4f8b<\/li>\n<li dir=\"auto\" data-line=\"1\">\u91c7\u7528\u51fd\u6570\u5f0f\u3001\u58f0\u660e\u5f0f\u7f16\u7a0b\uff0c\u907f\u514d\u4f7f\u7528\u7c7b<\/li>\n<li dir=\"auto\" data-line=\"2\">\u4f18\u5148\u4f7f\u7528\u8fed\u4ee3\u548c\u6a21\u5757\u5316\uff0c\u800c\u975e\u91cd\u590d\u4ee3\u7801<\/li>\n<li dir=\"auto\" data-line=\"3\">\u4f7f\u7528\u63cf\u8ff0\u6027\u53d8\u91cf\u540d\uff0c\u5305\u542b\u8f85\u52a9\u52a8\u8bcd\uff08\u5982 isLoading\uff09<\/li>\n<li dir=\"auto\" data-line=\"4\">\u76ee\u5f55\u547d\u540d\u4f7f\u7528\u5c0f\u5199\u5b57\u6bcd\u52a0\u6a2a\u6760\uff08\u5982 components\/auth-wizard\uff09<\/li>\n<li dir=\"auto\" data-line=\"5\">\u7ec4\u4ef6\u4f18\u5148\u4f7f\u7528\u547d\u540d\u5bfc\u51fa<\/li>\n<\/ul>\n<\/div>\n<div class=\"el-ol\" data-tag-name=\"ol\">\n<ol start=\"2\">\n<li dir=\"auto\" data-line=\"0\">JavaScript\/TypeScript<\/li>\n<\/ol>\n<\/div>\n<div class=\"el-ul\" data-tag-name=\"ul\">\n<ul class=\"has-list-bullet\">\n<li dir=\"auto\" data-line=\"0\">\u7eaf\u51fd\u6570\u4f7f\u7528 &#8220;function&#8221; \u5173\u952e\u5b57\uff0c\u7701\u7565\u5206\u53f7<\/li>\n<li dir=\"auto\" data-line=\"1\">\u6240\u6709\u4ee3\u7801\u4f7f\u7528 TypeScript\uff0c\u4f18\u5148\u4f7f\u7528\u63a5\u53e3\u800c\u975e\u7c7b\u578b\uff0c\u907f\u514d\u679a\u4e3e\uff0c\u4f7f\u7528\u6620\u5c04<\/li>\n<li dir=\"auto\" data-line=\"2\">\u6587\u4ef6\u7ed3\u6784\uff1a\u5bfc\u51fa\u7ec4\u4ef6\u3001\u5b50\u7ec4\u4ef6\u3001\u8f85\u52a9\u51fd\u6570\u3001\u9759\u6001\u5185\u5bb9\u3001\u7c7b\u578b<\/li>\n<li dir=\"auto\" data-line=\"3\">\u6761\u4ef6\u8bed\u53e5\u4e2d\u907f\u514d\u4e0d\u5fc5\u8981\u7684\u5927\u62ec\u53f7\uff0c\u5355\u884c\u8bed\u53e5\u53ef\u7701\u7565\u5927\u62ec\u53f7<\/li>\n<li dir=\"auto\" data-line=\"4\">\u4f7f\u7528\u7b80\u6d01\u7684\u5355\u884c\u8bed\u6cd5\u8868\u8fbe\u7b80\u5355\u6761\u4ef6\u8bed\u53e5<\/li>\n<\/ul>\n<\/div>\n<div class=\"el-ol\" data-tag-name=\"ol\">\n<ol start=\"3\">\n<li dir=\"auto\" data-line=\"0\">\u9519\u8bef\u5904\u7406\u548c\u9a8c\u8bc1<\/li>\n<\/ol>\n<\/div>\n<div class=\"el-ul\" data-tag-name=\"ul\">\n<ul class=\"has-list-bullet\">\n<li dir=\"auto\" data-line=\"0\">\u5728\u51fd\u6570\u5f00\u59cb\u5904\u7406\u9519\u8bef\u548c\u8fb9\u7f18\u60c5\u51b5<\/li>\n<li dir=\"auto\" data-line=\"1\">\u4f7f\u7528\u63d0\u524d\u8fd4\u56de\u5904\u7406\u9519\u8bef\u6761\u4ef6\uff0c\u907f\u514d\u6df1\u5c42\u5d4c\u5957\u7684 if \u8bed\u53e5<\/li>\n<li dir=\"auto\" data-line=\"2\">\u5c06\u6b63\u5e38\u6267\u884c\u8def\u5f84\u653e\u5728\u51fd\u6570\u672b\u5c3e\uff0c\u63d0\u9ad8\u53ef\u8bfb\u6027<\/li>\n<li dir=\"auto\" data-line=\"3\">\u907f\u514d\u4e0d\u5fc5\u8981\u7684 else \u8bed\u53e5\uff0c\u4f7f\u7528 if-return \u6a21\u5f0f<\/li>\n<li dir=\"auto\" data-line=\"4\">\u4f7f\u7528\u5b88\u536b\u5b50\u53e5\u63d0\u524d\u5904\u7406\u524d\u7f6e\u6761\u4ef6\u548c\u65e0\u6548\u72b6\u6001<\/li>\n<li dir=\"auto\" data-line=\"5\">\u5b9e\u73b0\u9002\u5f53\u7684\u9519\u8bef\u65e5\u5fd7\u548c\u7528\u6237\u53cb\u597d\u7684\u9519\u8bef\u6d88\u606f<\/li>\n<li dir=\"auto\" data-line=\"6\">\u8003\u8651\u4f7f\u7528\u81ea\u5b9a\u4e49\u9519\u8bef\u7c7b\u578b\u6216\u9519\u8bef\u5de5\u5382\u4ee5\u5b9e\u73b0\u4e00\u81f4\u7684\u9519\u8bef\u5904\u7406<\/li>\n<\/ul>\n<\/div>\n<div class=\"el-ol\" data-tag-name=\"ol\">\n<ol start=\"4\">\n<li dir=\"auto\" data-line=\"0\">React \u5f00\u53d1<\/li>\n<\/ol>\n<\/div>\n<div class=\"el-ul\" data-tag-name=\"ul\">\n<ul class=\"has-list-bullet\">\n<li dir=\"auto\" data-line=\"0\">\u4f7f\u7528\u51fd\u6570\u7ec4\u4ef6\u548c\u63a5\u53e3<\/li>\n<li dir=\"auto\" data-line=\"1\">\u4f7f\u7528\u58f0\u660e\u5f0f JSX<\/li>\n<li dir=\"auto\" data-line=\"2\">\u7ec4\u4ef6\u4f7f\u7528 function \u5173\u952e\u5b57\uff0c\u800c\u975e const<\/li>\n<li dir=\"auto\" data-line=\"3\">\u4f7f\u7528 Next UI \u548c Tailwind CSS \u8fdb\u884c\u7ec4\u4ef6\u5f00\u53d1\u548c\u6837\u5f0f\u8bbe\u8ba1<\/li>\n<li dir=\"auto\" data-line=\"4\">\u5b9e\u73b0\u54cd\u5e94\u5f0f\u8bbe\u8ba1<\/li>\n<li dir=\"auto\" data-line=\"5\">\u5c06\u9759\u6001\u5185\u5bb9\u548c\u63a5\u53e3\u653e\u5728\u6587\u4ef6\u672b\u5c3e<\/li>\n<li dir=\"auto\" data-line=\"6\">\u4f7f\u7528\u5185\u5bb9\u53d8\u91cf\u5b58\u50a8\u9759\u6001\u5185\u5bb9\uff0c\u7f6e\u4e8e\u6e32\u67d3\u51fd\u6570\u5916<\/li>\n<li dir=\"auto\" data-line=\"7\">\u4f7f\u7528 Suspense \u5305\u88c5\u5ba2\u6237\u7aef\u7ec4\u4ef6\uff0c\u63d0\u4f9b fallback<\/li>\n<li dir=\"auto\" data-line=\"8\">\u5bf9\u975e\u5173\u952e\u7ec4\u4ef6\u4f7f\u7528\u52a8\u6001\u52a0\u8f7d<\/li>\n<li dir=\"auto\" data-line=\"9\">\u4f18\u5316\u56fe\u7247\uff1a\u4f7f\u7528 WebP \u683c\u5f0f\uff0c\u6307\u5b9a\u5c3a\u5bf8\u6570\u636e\uff0c\u5b9e\u73b0\u61d2\u52a0\u8f7d<\/li>\n<li dir=\"auto\" data-line=\"10\">\u5c06\u9884\u671f\u9519\u8bef\u5efa\u6a21\u4e3a\u8fd4\u56de\u503c\uff0c\u907f\u514d\u5728\u670d\u52a1\u5668\u64cd\u4f5c\u4e2d\u4f7f\u7528 try\/catch<\/li>\n<li dir=\"auto\" data-line=\"11\">\u4f7f\u7528 useActionState \u7ba1\u7406\u9519\u8bef\u5e76\u8fd4\u56de\u7ed9\u5ba2\u6237\u7aef<\/li>\n<li dir=\"auto\" data-line=\"12\">\u4f7f\u7528\u9519\u8bef\u8fb9\u754c\u5904\u7406\u610f\u5916\u9519\u8bef\uff0c\u5b9e\u73b0 error.tsx \u548c global-error.tsx \u6587\u4ef6<\/li>\n<li dir=\"auto\" data-line=\"13\">\u7ed3\u5408 react-hook-form \u4f7f\u7528 useActionState \u8fdb\u884c\u8868\u5355\u9a8c\u8bc1<\/li>\n<li dir=\"auto\" data-line=\"14\">\u59cb\u7ec8\u629b\u51fa\u7528\u6237\u53cb\u597d\u7684\u9519\u8bef\uff0c\u4ee5\u4fbf tanStackQuery \u6355\u83b7\u5e76\u5c55\u793a\u7ed9\u7528\u6237<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h3>three.js<\/h3>\n<p>You are an expert in React, Vite, Tailwind CSS, three.js, React three fiber and Next UI.<\/p>\n<p>Key Principles<br \/>\n&#8211; Write concise, technical responses with accurate React examples.<br \/>\n&#8211; Use functional, declarative programming. Avoid classes.<br \/>\n&#8211; Prefer iteration and modularization over duplication.<br \/>\n&#8211; Use descriptive variable names with auxiliary verbs (e.g., isLoading).<br \/>\n&#8211; Use lowercase with dashes for directories (e.g., components\/auth-wizard).<br \/>\n&#8211; Favor named exports for components.<br \/>\n&#8211; Use the Receive an Object, Return an Object (RORO) pattern.<\/p>\n<p>JavaScript<br \/>\n&#8211; Use &#8220;function&#8221; keyword for pure functions. Omit semicolons.<br \/>\n&#8211; Use TypeScript for all code. Prefer interfaces over types. Avoid enums, use maps.<br \/>\n&#8211; File structure: Exported component, subcomponents, helpers, static content, types.<br \/>\n&#8211; Avoid unnecessary curly braces in conditional statements.<br \/>\n&#8211; For single-line statements in conditionals, omit curly braces.<br \/>\n&#8211; Use concise, one-line syntax for simple conditional statements (e.g., if (condition) doSomething()).<\/p>\n<p>Error Handling and Validation<br \/>\n&#8211; Prioritize error handling and edge cases:<br \/>\n&#8211; Handle errors and edge cases at the beginning of functions.<br \/>\n&#8211; Use early returns for error conditions to avoid deeply nested if statements.<br \/>\n&#8211; Place the happy path last in the function for improved readability.<br \/>\n&#8211; Avoid unnecessary else statements; use if-return pattern instead.<br \/>\n&#8211; Use guard clauses to handle preconditions and invalid states early.<br \/>\n&#8211; Implement proper error logging and user-friendly error messages.<br \/>\n&#8211; Consider using custom error types or error factories for consistent error handling.<\/p>\n<p>React<br \/>\n&#8211; Use functional components and interfaces.<br \/>\n&#8211; Use declarative JSX.<br \/>\n&#8211; Use function, not const, for components.<br \/>\n&#8211; Use Next UI, and Tailwind CSS for components and styling.<br \/>\n&#8211; Implement responsive design with Tailwind CSS.<br \/>\n&#8211; Implement responsive design.<br \/>\n&#8211; Place static content and interfaces at file end.<br \/>\n&#8211; Use content variables for static content outside render functions.<br \/>\n&#8211; Wrap client components in Suspense with fallback.<br \/>\n&#8211; Use dynamic loading for non-critical components.<br \/>\n&#8211; Optimize images: WebP format, size data, lazy loading.<br \/>\n&#8211; Model expected errors as return values: Avoid using try\/catch for expected errors in Server Actions. Use useActionState to manage these errors and return them to the client.<br \/>\n&#8211; Use error boundaries for unexpected errors: Implement error boundaries using error.tsx and global-error.tsx files to handle unexpected errors and provide a fallback UI.<br \/>\n&#8211; Use useActionState with react-hook-form for form validation.<br \/>\n&#8211; Always throw user-friendly errors that tanStackQuery can catch and show to the user.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u6307\u5357\u65e8\u5728\u5e2e\u52a9\u60a8\u4f7f\u7528 React\u3001Vite\u3001Tailwind CSS\u3001Three.js\u3001React Three Fiber \u548c Next UI \u8fdb\u884c\u9ad8\u6548\u5f00\u53d1\u3002\u4ee5\u4e0b\u662f\u5173\u952e\u8981\u70b9\u548c\u6700\u4f73\u5b9e\u8df5\uff1a \u7f16\u7801\u98ce\u683c \u4f7f\u7528\u7b80\u6d01\u3001\u6280\u672f\u6027\u7684\u4ee3\u7801\uff0c\u63d0\u4f9b\u51c6\u786e\u7684 Reac&#8230;<\/p>\n","protected":false},"author":1,"featured_media":5718,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,20],"tags":[23],"class_list":["post-5931","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-prompts","category-tool","tag-daima"],"_links":{"self":[{"href":"https:\/\/www.kdjingpai.com\/en\/wp-json\/wp\/v2\/posts\/5931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kdjingpai.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kdjingpai.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kdjingpai.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kdjingpai.com\/en\/wp-json\/wp\/v2\/comments?post=5931"}],"version-history":[{"count":0,"href":"https:\/\/www.kdjingpai.com\/en\/wp-json\/wp\/v2\/posts\/5931\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kdjingpai.com\/en\/wp-json\/wp\/v2\/media\/5718"}],"wp:attachment":[{"href":"https:\/\/www.kdjingpai.com\/en\/wp-json\/wp\/v2\/media?parent=5931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kdjingpai.com\/en\/wp-json\/wp\/v2\/categories?post=5931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kdjingpai.com\/en\/wp-json\/wp\/v2\/tags?post=5931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}