Fix image

* update post
This commit is contained in:
Defectink
2022-04-13 14:41:10 +08:00
parent c9b0cbb96f
commit 1011f065b5
6 changed files with 118 additions and 22 deletions

View 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;
}

View File

@ -1,5 +1,6 @@
import NextImage from 'next/image'; import NextImage from 'next/image';
import { DetailedHTMLProps, ImgHTMLAttributes } from 'react'; import { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
import styles from './Image.module.css';
interface Props interface Props
extends DetailedHTMLProps< extends DetailedHTMLProps<
@ -10,14 +11,15 @@ interface Props
const Image = ({ src, alt }: Props) => { const Image = ({ src, alt }: Props) => {
return ( return (
<> <>
<NextImage <p className={styles.imageContainer}>
src={src ?? ''} <NextImage
alt={alt} src={src ?? ''}
layout="responsive" alt={alt}
width="100%" layout="fill"
height="100%" className={styles.image}
/> />
<span className="block text-center text-gray-400">{alt}</span> <span className="block text-center text-gray-400">{alt}</span>
</p>
</> </>
); );
}; };

View File

@ -1,15 +1,16 @@
--- ---
title: Hello world title: Hello world
date: '2022-04-06' date: '2022-04-06'
tags: ['hello world'] tags: ['Hello world']
--- ---
import Layout from 'layouts/MDXLayout.tsx'; import Layout from 'layouts/MDXLayout.tsx';
import RUASandpack from 'components/RUA/RUASandpack.tsx';
export const meta = { export const meta = {
title: 'Hello world', title: 'Hello world',
date: '2022-04-06', date: '2022-04-06',
tags: ['hello world'], tags: ['Hello world'],
}; };
export default ({ children }) => ( export default ({ children }) => (
@ -25,3 +26,16 @@ This is my first post!
```ts ```ts
console.log('Hello world'); 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,
}}
/>

View File

@ -15,14 +15,6 @@ export const meta = {
export default ({ children }) => <Layout {...meta}>{children}</Layout>; 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 ## Three.js setup
First, we need a little bit of setup. Let's create a sence and a camera. 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. 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 <RUASandpack
template="vanilla-ts" template="react"
files={{ 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
![Skybox_example.png](/images/p/how-to-load-a-background-with-threejs/Skybox_example.png)

Binary file not shown.

After

Width:  |  Height:  |  Size: 218 KiB

View File

@ -323,3 +323,12 @@ h6:hover::before {
#article dd { #article dd {
margin-left: 0; margin-left: 0;
} }
#article .sp-layout > .sp-stack {
height: 400px;
}
@media screen and (max-width: 768px) {
#article .sp-layout > .sp-stack {
height: auto;
}
}