add base canvas scene

This commit is contained in:
DefectingCat
2023-05-16 10:42:11 +08:00
parent 8af5ccf7f7
commit 3eeff2efd9
4 changed files with 131 additions and 21 deletions

14
app/home-modle.tsx Normal file
View File

@ -0,0 +1,14 @@
'use client';
import { Canvas } from '@react-three/fiber';
const HomeModle = () => {
return (
<Canvas>
<spotLight color={0xffffff} intensity={2} distance={100} angle={15} />
<ambientLight color={0xffffff} intensity={1} />
</Canvas>
);
};
export default HomeModle;

View File

@ -5,9 +5,9 @@ import dynamic from 'next/dynamic';
import Head from 'next/head';
import Image from 'next/image';
import { Suspense, useCallback } from 'react';
import { InitFn, THREE, useThree } from 'rua-three';
import styles from 'styles/index/index.module.css';
import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
import HomeModle from './home-modle';
export const metadata = {
title: 'RUA - Home',
@ -30,6 +30,10 @@ export default function Page() {
/>
</span>
</h1>
<div>
<HomeModle />
</div>
</div>
</main>
);

View File

@ -19,6 +19,7 @@
"@docsearch/react": "3",
"@giscus/react": "^2.2.8",
"@mapbox/rehype-prism": "^0.8.0",
"@react-three/fiber": "^8.13.0",
"@tweenjs/tween.js": "^20.0.3",
"algoliasearch": "^4.17.0",
"dayjs": "^1.11.7",
@ -35,7 +36,6 @@
"remark-gfm": "^3.0.1",
"remark-parse": "^10.0.1",
"remark-rehype": "^10.1.0",
"rua-three": "^1.1.1",
"sharp": "^0.32.1",
"stats.js": "^0.17.0",
"three": "^0.152.2",

130
pnpm-lock.yaml generated
View File

@ -16,6 +16,9 @@ dependencies:
'@mapbox/rehype-prism':
specifier: ^0.8.0
version: 0.8.0
'@react-three/fiber':
specifier: ^8.13.0
version: 8.13.0(react-dom@18.2.0)(react@18.2.0)(three@0.152.2)
'@tweenjs/tween.js':
specifier: ^20.0.3
version: 20.0.3
@ -64,9 +67,6 @@ dependencies:
remark-rehype:
specifier: ^10.1.0
version: 10.1.0
rua-three:
specifier: ^1.1.1
version: 1.1.1(react-dom@18.2.0)(react@18.2.0)(stats.js@0.17.0)(three@0.152.2)
sharp:
specifier: ^0.32.1
version: 0.32.1
@ -550,7 +550,6 @@ packages:
engines: {node: '>=6.9.0'}
dependencies:
regenerator-runtime: 0.13.11
dev: true
/@babel/template@7.20.7:
resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==}
@ -1595,6 +1594,41 @@ packages:
react: 18.2.0
dev: false
/@react-three/fiber@8.13.0(react-dom@18.2.0)(react@18.2.0)(three@0.152.2):
resolution: {integrity: sha512-hPFzFNgikEMyEbL+NpSA7q+UWZxInrrkJldWaCR2w34Fwf20x9p68bsyN0/yn9oM2VlWoJcJjR8hw1tN9AxHuA==}
peerDependencies:
expo: '>=43.0'
expo-asset: '>=8.4'
expo-gl: '>=11.0'
react: '>=18.0'
react-dom: '>=18.0'
react-native: '>=0.64'
three: '>=0.133'
peerDependenciesMeta:
expo:
optional: true
expo-asset:
optional: true
expo-gl:
optional: true
react-dom:
optional: true
react-native:
optional: true
dependencies:
'@babel/runtime': 7.20.13
'@types/react-reconciler': 0.26.7
its-fine: 1.1.1(react@18.2.0)
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
react-reconciler: 0.27.0(react@18.2.0)
react-use-measure: 2.1.1(react-dom@18.2.0)(react@18.2.0)
scheduler: 0.21.0
suspend-react: 0.0.8(react@18.2.0)
three: 0.152.2
zustand: 3.7.2(react@18.2.0)
dev: false
/@rushstack/eslint-patch@1.2.0:
resolution: {integrity: sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==}
dev: true
@ -1853,6 +1887,18 @@ packages:
'@types/react': 18.2.6
dev: true
/@types/react-reconciler@0.26.7:
resolution: {integrity: sha512-mBDYl8x+oyPX/VBb3E638N0B7xG+SPk/EAMcVPeexqus/5aTpTphQi0curhhshOqRrc9t6OPoJfEUkbymse/lQ==}
dependencies:
'@types/react': 18.2.6
dev: false
/@types/react-reconciler@0.28.2:
resolution: {integrity: sha512-8tu6lHzEgYPlfDf/J6GOQdIc+gs+S2yAqlby3zTsB3SP2svlqTYe5fwZNtZyfactP74ShooP2vvi1BOp9ZemWw==}
dependencies:
'@types/react': 18.2.6
dev: false
/@types/react@18.2.6:
resolution: {integrity: sha512-wRZClXn//zxCFW+ye/D2qY65UsYP1Fpex2YXorHc8awoNamkMZSvBxwxdYVInsHOZZd2Ppq8isnSzJL5Mpf8OA==}
dependencies:
@ -2884,6 +2930,10 @@ packages:
resolution: {integrity: sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==}
dev: false
/debounce@1.2.1:
resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
dev: false
/debug@3.2.7:
resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
peerDependencies:
@ -4811,6 +4861,15 @@ packages:
istanbul-lib-report: 3.0.0
dev: true
/its-fine@1.1.1(react@18.2.0):
resolution: {integrity: sha512-v1Ia1xl20KbuSGlwoaGsW0oxsw8Be+TrXweidxD9oT/1lAh6O3K3/GIM95Tt6WCiv6W+h2M7RB1TwdoAjQyyKw==}
peerDependencies:
react: '>=18.0'
dependencies:
'@types/react-reconciler': 0.28.2
react: 18.2.0
dev: false
/jest-changed-files@29.5.0:
resolution: {integrity: sha512-IFG34IUMUaNBIxjQXF/iu7g6EcdMrGRRxaUSw92I/2g2YC6vCdTltl4nHvt7Ci5nSJwXIkCu8Ka1DKF+X7Z1Ag==}
engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@ -7060,6 +7119,28 @@ packages:
resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
dev: true
/react-reconciler@0.27.0(react@18.2.0):
resolution: {integrity: sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==}
engines: {node: '>=0.10.0'}
peerDependencies:
react: ^18.0.0
dependencies:
loose-envify: 1.4.0
react: 18.2.0
scheduler: 0.21.0
dev: false
/react-use-measure@2.1.1(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==}
peerDependencies:
react: '>=16.13'
react-dom: '>=16.13'
dependencies:
debounce: 1.2.1
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
/react@18.2.0:
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
engines: {node: '>=0.10.0'}
@ -7112,7 +7193,6 @@ packages:
/regenerator-runtime@0.13.11:
resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
dev: true
/regexp.prototype.flags@1.4.3:
resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}
@ -7321,20 +7401,6 @@ packages:
glob: 7.2.3
dev: true
/rua-three@1.1.1(react-dom@18.2.0)(react@18.2.0)(stats.js@0.17.0)(three@0.152.2):
resolution: {integrity: sha512-eESIlFHebKIQjWKlDGoRHmeXTniCu32o8U5DhKCYXtDXC9kyXcOa5mqJBAR7nRD1QCrSd7LFKg+wdkSIKdVIYQ==}
peerDependencies:
react: ^18.2.0
react-dom: ^18.2.0
stats.js: ^0.17.0
three: ^0.144.0
dependencies:
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
stats.js: 0.17.0
three: 0.152.2
dev: false
/run-async@2.4.1:
resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
engines: {node: '>=0.12.0'}
@ -7382,6 +7448,12 @@ packages:
xmlchars: 2.2.0
dev: true
/scheduler@0.21.0:
resolution: {integrity: sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==}
dependencies:
loose-envify: 1.4.0
dev: false
/scheduler@0.23.0:
resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
dependencies:
@ -7822,6 +7894,14 @@ packages:
engines: {node: '>= 0.4'}
dev: true
/suspend-react@0.0.8(react@18.2.0):
resolution: {integrity: sha512-ZC3r8Hu1y0dIThzsGw0RLZplnX9yXwfItcvaIzJc2VQVi8TGyGDlu92syMB5ulybfvGLHAI5Ghzlk23UBPF8xg==}
peerDependencies:
react: '>=17.0'
dependencies:
react: 18.2.0
dev: false
/symbol-tree@3.2.4:
resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
dev: true
@ -8696,6 +8776,18 @@ packages:
resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
dev: false
/zustand@3.7.2(react@18.2.0):
resolution: {integrity: sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==}
engines: {node: '>=12.7.0'}
peerDependencies:
react: '>=16.8'
peerDependenciesMeta:
react:
optional: true
dependencies:
react: 18.2.0
dev: false
/zwitch@2.0.4:
resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
dev: false