Merge pull request #115 from torin-asakura/feat/3d-elements

feat/3d-elements

.yarn/patches/three-stdlib-npm-2.28.9-598c595c00.patch

@@ -0,0 +1,39 @@
+diff --git a/animation/MMDPhysics.d.ts b/animation/MMDPhysics.d.ts
+index eb3f20e27e4d6dd990fd1557bb9a5a828665b4f9..f73aa23dd11153f3872f9a78e9e73a9938f717f7 100644
+--- a/animation/MMDPhysics.d.ts
++++ b/animation/MMDPhysics.d.ts
+@@ -1,4 +1,4 @@
+-import { Bone, Euler, Matrix4, Object3D, Quaternion, SkinnedMesh, Vector3 } from 'three'
++import { Bone, Euler, Matrix4, Object3D, Quaternion, SkinnedMesh, Vector3, MeshBasicMaterial } from 'three'
+
+ export interface MMDPhysicsParameter {
+   unitStep?: number | undefined
+@@ -110,10 +110,10 @@ export class Constraint {
+ }
+
+ export class MMDPhysicsHelper extends Object3D {
+-  mesh: THREE.SkinnedMesh
++  mesh: SkinnedMesh
+   physics: MMDPhysics
+-  materials: [THREE.MeshBasicMaterial, THREE.MeshBasicMaterial, THREE.MeshBasicMaterial]
++  materials: [MeshBasicMaterial, MeshBasicMaterial, MeshBasicMaterial]
+
+-  constructor(mesh: THREE.SkinnedMesh, physics: MMDPhysics)
++  constructor(mesh: SkinnedMesh, physics: MMDPhysics)
+   dispose(): void
+ }
+diff --git a/utils/RoughnessMipmapper.d.ts b/utils/RoughnessMipmapper.d.ts
+index 80c0f29226f2816f0de9333682821780817fefec..8d724dee5f0967807b781b4d202db3194836906d 100644
+--- a/utils/RoughnessMipmapper.d.ts
++++ b/utils/RoughnessMipmapper.d.ts
+@@ -1,8 +1,8 @@
+-import { WebGLRenderer } from 'three'
++import { WebGLRenderer, Material } from 'three'
+
+ export class RoughnessMipmapper {
+   constructor(renderer: WebGLRenderer)
+
+-  generateMipmaps(material: THREE.Material): void
++  generateMipmaps(material: Material): void
+   dispose(): void
+ }

.yarnrc.yml

@@ -30,6 +30,9 @@ packageExtensions:
   '@emotion/styled@*':
     dependencies:
       '@emotion/react': '*'
+  '@react-three/drei@*':
+    dependencies:
+      three-stdlib: 'patch:three-stdlib@npm%3A2.28.9#~/.yarn/patches/three-stdlib-npm-2.28.9-598c595c00.patch'
   framer-motion@*:
     dependencies:
       csstype: '*'

landing/app/src/@types/models.d.ts

@@ -0,0 +1,11 @@
+declare module '*.gltf' {
+  const content: string
+  export default content
+}
+
+declare module '*.bin' {}
+
+declare module '*.glb' {
+  const content: string
+  export default content
+}

landing/app/src/next.config.js

@@ -10,4 +10,24 @@ module.exports = {
     ignoreBuildErrors: true,
   },
   staticPageGenerationTimeout: 1000,
+  webpack: (config) => {
+    config.module.rules.push(
+      {
+        test: /\.(gltf)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'static/media/[name][ext]',
+        },
+      },
+      {
+        test: /\.(bin)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'static/media/[name][ext]',
+        },
+      }
+    )
+
+    return config
+  },
 }

landing/fragments/landing-services/src/services.component.tsx

@@ -49,11 +49,11 @@ const Services = forwardRef(({ data }: any, ref: any) => {
           <Row flexWrap={['wrap', 'wrap', 'nowrap']}>
             <Box height='min-content' width='100%'>
               <Column fill>
-                {leftSide?.map(({ title, content }) => (
-                  <Column fill>
+                {leftSide?.map(({ title: leftSideTitle, content }) => (
+                  <Column key={leftSideTitle} fill>
                     <Divider />
                     <Layout flexBasis={[28, 28, 40]} />
-                    <Accordeon title={title} content={content} />
+                    <Accordeon title={leftSideTitle} content={content} />
                     <Layout flexBasis={[28, 28, 40]} />
                   </Column>
                 ))}
@@ -63,11 +63,11 @@ const Services = forwardRef(({ data }: any, ref: any) => {
             <Layout flexBasis={40} flexShrink={0} />
             <Box height='min-content' width='100%'>
               <Column fill>
-                {rightSide?.map(({ title, content }) => (
-                  <Column fill>
+                {rightSide?.map(({ title: rightSideTitle, content }) => (
+                  <Column key={rightSideTitle} fill>
                     <Divider />
                     <Layout flexBasis={[28, 28, 40]} />
-                    <Accordeon title={title} content={content} />
+                    <Accordeon title={rightSideTitle} content={content} />
                     <Layout flexBasis={[28, 28, 40]} />
                   </Column>
                 ))}

landing/fragments/landing-work-directions/package.json

@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "main": "src/index.ts",
   "dependencies": {
+    "@ui/3d-elements": "workspace:0.0.1",
     "@ui/carousel": "workspace:0.0.1",
     "@ui/divider": "workspace:0.0.1",
     "@ui/image": "workspace:0.0.1",

landing/fragments/landing-work-directions/src/work-directions.component.tsx

@@ -2,7 +2,6 @@ import React                 from 'react'
 import { FC }                from 'react'
 
 import { Divider }           from '@ui/divider'
-import { Image }             from '@ui/image'
 import { Box }               from '@ui/layout'
 import { Column }            from '@ui/layout'
 import { Layout }            from '@ui/layout'
@@ -11,6 +10,7 @@ import { useLanguage }       from '@globals/language'
 
 import { Carousel }          from './carousel'
 import { useWorkDirections } from './data'
+import { elements }          from './work-directions.contants'
 
 const WorkDirections: FC = () => {
   const workDirections = useWorkDirections()
@@ -22,15 +22,11 @@ const WorkDirections: FC = () => {
         <Layout flexBasis={[40, 40, 80]} />
         <Box width='100%' overflow='hidden' justifyContent='center'>
           <Carousel>
-            {workDirections[language].map(({ title, featuredImage }) => (
-              <Layout maxWidth={200} maxHeight={220}>
+            {workDirections[language].map(({ title }) => (
+              <Layout key={title} maxWidth={200} maxHeight={220}>
                 <Column alignItems='center' itemScope itemType='https://schema.org/Thing'>
                   <Box width={200} height={140}>
-                    <Image
-                      contain
-                      src={featuredImage?.node?.sourceUrl}
-                      alt={featuredImage?.node?.altText}
-                    />
+                    {elements[language][title]}
                   </Box>
                   <Layout flexBasis={24} flexShrink={0} />
                   <Layout height={49}>

landing/fragments/landing-work-directions/src/work-directions.contants.tsx

@@ -0,0 +1,35 @@
+import React         from 'react'
+
+import { Cube }      from '@ui/3d-elements'
+import { Cylinder }  from '@ui/3d-elements'
+import { Diamond }   from '@ui/3d-elements'
+import { Isosphere } from '@ui/3d-elements'
+import { Pyramid }   from '@ui/3d-elements'
+import { Ring }      from '@ui/3d-elements'
+import { Sphere }    from '@ui/3d-elements'
+import { Pill }      from '@ui/3d-elements'
+
+const elementStyle = { width: 200, height: 140 }
+
+export const elements = {
+  RU: {
+    'Медиа контент': <Cylinder style={elementStyle} />,
+    'Digital сервисы': <Ring style={elementStyle} />,
+    'Мобильные приложения': <Isosphere style={elementStyle} />,
+    'ICO и блокчейн проекты': <Diamond style={elementStyle} />,
+    'Рекламные агенства': <Sphere style={elementStyle} />,
+    'Интернет магазины': <Cube style={elementStyle} />,
+    Стартапы: <Pill style={elementStyle} />,
+    'IT-компании': <Pyramid style={elementStyle} />,
+  },
+  EN: {
+    'Media content': <Cylinder style={elementStyle} />,
+    'Digital services': <Ring style={elementStyle} />,
+    'Mobile apps': <Isosphere style={elementStyle} />,
+    'ICO&Blockchain projects': <Diamond style={elementStyle} />,
+    'Advertising agencies': <Sphere style={elementStyle} />,
+    'Online shops': <Cube style={elementStyle} />,
+    Startups: <Pill style={elementStyle} />,
+    'IT companies': <Pyramid style={elementStyle} />,
+  },
+}

package.json

@@ -14,7 +14,8 @@
     "@types/react-dom": "17",
     "next": "12.1.0",
     "react": "17",
-    "react-dom": "17"
+    "react-dom": "17",
+    "three-stdlib@npm:^2.8.9": "patch:three-stdlib@npm%3A2.28.9#~/.yarn/patches/three-stdlib-npm-2.28.9-598c595c00.patch"
   },
   "devDependencies": {
     "@atls/code-service": "0.0.16",