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 { 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>
</>
);
};

View File

@ -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,
}}
/>

View File

@ -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
![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 {
margin-left: 0;
}
#article .sp-layout > .sp-stack {
height: 400px;
}
@media screen and (max-width: 768px) {
#article .sp-layout > .sp-stack {
height: auto;
}
}