mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-15 16:51:37 +00:00
Fix image
* update post
This commit is contained in:
15
components/mdx/Image.module.css
Normal file
15
components/mdx/Image.module.css
Normal file
@ -0,0 +1,15 @@
|
||||
.imageContainer {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.imageContainer > span {
|
||||
position: unset !important;
|
||||
}
|
||||
|
||||
.imageContainer .image {
|
||||
object-fit: contain;
|
||||
width: 100% !important;
|
||||
position: relative !important;
|
||||
height: unset !important;
|
||||
}
|
@ -1,5 +1,6 @@
|
||||
import NextImage from 'next/image';
|
||||
import { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
|
||||
import styles from './Image.module.css';
|
||||
|
||||
interface Props
|
||||
extends DetailedHTMLProps<
|
||||
@ -10,14 +11,15 @@ interface Props
|
||||
const Image = ({ src, alt }: Props) => {
|
||||
return (
|
||||
<>
|
||||
<NextImage
|
||||
src={src ?? ''}
|
||||
alt={alt}
|
||||
layout="responsive"
|
||||
width="100%"
|
||||
height="100%"
|
||||
/>
|
||||
<span className="block text-center text-gray-400">{alt}</span>
|
||||
<p className={styles.imageContainer}>
|
||||
<NextImage
|
||||
src={src ?? ''}
|
||||
alt={alt}
|
||||
layout="fill"
|
||||
className={styles.image}
|
||||
/>
|
||||
<span className="block text-center text-gray-400">{alt}</span>
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -1,15 +1,16 @@
|
||||
---
|
||||
title: Hello world
|
||||
date: '2022-04-06'
|
||||
tags: ['hello world']
|
||||
tags: ['Hello world']
|
||||
---
|
||||
|
||||
import Layout from 'layouts/MDXLayout.tsx';
|
||||
import RUASandpack from 'components/RUA/RUASandpack.tsx';
|
||||
|
||||
export const meta = {
|
||||
title: 'Hello world',
|
||||
date: '2022-04-06',
|
||||
tags: ['hello world'],
|
||||
tags: ['Hello world'],
|
||||
};
|
||||
|
||||
export default ({ children }) => (
|
||||
@ -25,3 +26,16 @@ This is my first post!
|
||||
```ts
|
||||
console.log('Hello world');
|
||||
```
|
||||
|
||||
## Say hello to world
|
||||
|
||||
export const main = `export default function App() {
|
||||
return <h1>Hello world</h1>
|
||||
}`;
|
||||
|
||||
<RUASandpack
|
||||
template="react"
|
||||
files={{
|
||||
'/App.js': main,
|
||||
}}
|
||||
/>
|
||||
|
@ -15,14 +15,6 @@ export const meta = {
|
||||
|
||||
export default ({ children }) => <Layout {...meta}>{children}</Layout>;
|
||||
|
||||
Image a camera inside a cube box. The cube box is our scene. just like `const scene = new THREE.Scene();`. The camera is our perspect camera.
|
||||
|
||||
```ts
|
||||
new THREE.PerspectiveCamera();
|
||||
```
|
||||
|
||||
Now, we can see the inside of the cube box. The inside texture of the box is our sky. Our camera can see all six texture surround ours give ours the illusion the we are within a larger environment.
|
||||
|
||||
## Three.js setup
|
||||
|
||||
First, we need a little bit of setup. Let's create a sence and a camera.
|
||||
@ -64,12 +56,76 @@ renderer.render(scene, camera);
|
||||
|
||||
Now, we can get a black canvas in our document.
|
||||
|
||||
export const main = `console.log('Hello World');
|
||||
`;
|
||||
export const main = `import { useEffect, useRef } from 'react';
|
||||
import * as THREE from 'three';
|
||||
|
||||
export default function App() {
|
||||
const ref = useRef<HTMLCanvasElement>(null);
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(
|
||||
75,
|
||||
window.innerWidth / window.innerHeight,
|
||||
0.1,
|
||||
1000
|
||||
);
|
||||
useEffect(() => {
|
||||
const renderer = new THREE.WebGLRenderer({
|
||||
canvas: ref.current!,
|
||||
});
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
const render = (time) => {
|
||||
renderer.render(scene, camera);
|
||||
requestAnimationFrame(render);
|
||||
};
|
||||
requestAnimationFrame(render);
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
render(0);
|
||||
}
|
||||
window.addEventListener('resize', onWindowResize);
|
||||
return () => {
|
||||
window.removeEventListener('resize', onWindowResize);
|
||||
};
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<canvas ref={ref}></canvas>
|
||||
</>
|
||||
)
|
||||
}`;
|
||||
|
||||
<RUASandpack
|
||||
template="vanilla-ts"
|
||||
template="react"
|
||||
files={{
|
||||
'src/index.ts': main,
|
||||
'/App.js': main,
|
||||
}}
|
||||
options={{
|
||||
autorun: false,
|
||||
}}
|
||||
customSetup={{
|
||||
dependencies: {
|
||||
'stats.js': '^0.17.0',
|
||||
three: '^0.139.2',
|
||||
'lil-gui': '^0.16.1',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
## Load a Skybox
|
||||
|
||||
Image a camera inside a cube box. The cube box is our scene. just like `const scene = new THREE.Scene();`. The camera is our perspect camera.
|
||||
|
||||
```ts
|
||||
new THREE.PerspectiveCamera();
|
||||
```
|
||||
|
||||
Now, we are inside of the cube box. The inside texture of the box is our sky. Our camera can see all six texture surround ours give ours the illusion the we are within a larger environment.
|
||||
|
||||
We know how skybox works. But what is a skybox?
|
||||
|
||||
### Texture
|
||||
|
||||

|
||||
|
Binary file not shown.
After Width: | Height: | Size: 218 KiB |
@ -323,3 +323,12 @@ h6:hover::before {
|
||||
#article dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#article .sp-layout > .sp-stack {
|
||||
height: 400px;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#article .sp-layout > .sp-stack {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user