视口视图
This commit is contained in:
YHH
243
packages/editor-app/src/components/Viewport.tsx
Normal file
243
packages/editor-app/src/components/Viewport.tsx
Normal file
@@ -0,0 +1,243 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Play, Pause, RotateCcw, Maximize2, Grid3x3, Eye, EyeOff, Activity } from 'lucide-react';
|
||||
import '../styles/Viewport.css';
|
||||
|
||||
interface ViewportProps {
|
||||
locale?: string;
|
||||
}
|
||||
|
||||
export function Viewport({ locale = 'en' }: ViewportProps) {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [showGrid, setShowGrid] = useState(true);
|
||||
const [showGizmos, setShowGizmos] = useState(true);
|
||||
const [showStats, setShowStats] = useState(false);
|
||||
const animationFrameRef = useRef<number>();
|
||||
const glRef = useRef<WebGLRenderingContext | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
|
||||
if (!gl) {
|
||||
console.error('WebGL not supported');
|
||||
return;
|
||||
}
|
||||
|
||||
glRef.current = gl;
|
||||
|
||||
const resizeCanvas = () => {
|
||||
if (!canvas || !containerRef.current) return;
|
||||
const container = containerRef.current;
|
||||
const rect = container.getBoundingClientRect();
|
||||
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
canvas.width = rect.width * dpr;
|
||||
canvas.height = rect.height * dpr;
|
||||
canvas.style.width = `${rect.width}px`;
|
||||
canvas.style.height = `${rect.height}px`;
|
||||
|
||||
gl.viewport(0, 0, canvas.width, canvas.height);
|
||||
};
|
||||
|
||||
resizeCanvas();
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
|
||||
initWebGL(gl);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', resizeCanvas);
|
||||
if (animationFrameRef.current) {
|
||||
cancelAnimationFrame(animationFrameRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isPlaying) {
|
||||
startRenderLoop();
|
||||
} else {
|
||||
if (animationFrameRef.current) {
|
||||
cancelAnimationFrame(animationFrameRef.current);
|
||||
}
|
||||
}
|
||||
}, [isPlaying]);
|
||||
|
||||
const initWebGL = (gl: WebGLRenderingContext) => {
|
||||
gl.clearColor(0.1, 0.1, 0.12, 1.0);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
gl.enable(gl.DEPTH_TEST);
|
||||
|
||||
renderFrame(gl, 0);
|
||||
};
|
||||
|
||||
const startRenderLoop = () => {
|
||||
let startTime = performance.now();
|
||||
|
||||
const render = (currentTime: number) => {
|
||||
const elapsed = (currentTime - startTime) / 1000;
|
||||
|
||||
if (glRef.current) {
|
||||
renderFrame(glRef.current, elapsed);
|
||||
}
|
||||
|
||||
animationFrameRef.current = requestAnimationFrame(render);
|
||||
};
|
||||
|
||||
animationFrameRef.current = requestAnimationFrame(render);
|
||||
};
|
||||
|
||||
const renderFrame = (gl: WebGLRenderingContext, time: number) => {
|
||||
gl.clearColor(0.1, 0.1, 0.12, 1.0);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
|
||||
if (showGrid) {
|
||||
drawGrid(gl);
|
||||
}
|
||||
};
|
||||
|
||||
const drawGrid = (gl: WebGLRenderingContext) => {
|
||||
const vertexShaderSource = `
|
||||
attribute vec3 position;
|
||||
uniform mat4 projection;
|
||||
uniform mat4 view;
|
||||
void main() {
|
||||
gl_Position = projection * view * vec4(position, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const fragmentShaderSource = `
|
||||
precision mediump float;
|
||||
uniform vec4 color;
|
||||
void main() {
|
||||
gl_FragColor = color;
|
||||
}
|
||||
`;
|
||||
|
||||
const vertexShader = gl.createShader(gl.VERTEX_SHADER)!;
|
||||
gl.shaderSource(vertexShader, vertexShaderSource);
|
||||
gl.compileShader(vertexShader);
|
||||
|
||||
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)!;
|
||||
gl.shaderSource(fragmentShader, fragmentShaderSource);
|
||||
gl.compileShader(fragmentShader);
|
||||
|
||||
const program = gl.createProgram()!;
|
||||
gl.attachShader(program, vertexShader);
|
||||
gl.attachShader(program, fragmentShader);
|
||||
gl.linkProgram(program);
|
||||
gl.useProgram(program);
|
||||
|
||||
const gridSize = 10;
|
||||
const gridStep = 1;
|
||||
const vertices: number[] = [];
|
||||
|
||||
for (let i = -gridSize; i <= gridSize; i += gridStep) {
|
||||
vertices.push(i, 0, -gridSize, i, 0, gridSize);
|
||||
vertices.push(-gridSize, 0, i, gridSize, 0, i);
|
||||
}
|
||||
|
||||
const buffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
|
||||
|
||||
const positionLocation = gl.getAttribLocation(program, 'position');
|
||||
gl.enableVertexAttribArray(positionLocation);
|
||||
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
|
||||
|
||||
const colorLocation = gl.getUniformLocation(program, 'color');
|
||||
gl.uniform4f(colorLocation, 0.3, 0.3, 0.35, 1.0);
|
||||
|
||||
gl.drawArrays(gl.LINES, 0, vertices.length / 3);
|
||||
};
|
||||
|
||||
const handlePlayPause = () => {
|
||||
setIsPlaying(!isPlaying);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setIsPlaying(false);
|
||||
if (glRef.current) {
|
||||
renderFrame(glRef.current, 0);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFullscreen = () => {
|
||||
if (containerRef.current) {
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen();
|
||||
} else {
|
||||
containerRef.current.requestFullscreen();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="viewport" ref={containerRef}>
|
||||
<div className="viewport-toolbar">
|
||||
<div className="viewport-toolbar-left">
|
||||
<button
|
||||
className={`viewport-btn ${isPlaying ? 'active' : ''}`}
|
||||
onClick={handlePlayPause}
|
||||
title={isPlaying ? (locale === 'zh' ? '暂停' : 'Pause') : (locale === 'zh' ? '播放' : 'Play')}
|
||||
>
|
||||
{isPlaying ? <Pause size={16} /> : <Play size={16} />}
|
||||
</button>
|
||||
<button
|
||||
className="viewport-btn"
|
||||
onClick={handleReset}
|
||||
title={locale === 'zh' ? '重置' : 'Reset'}
|
||||
>
|
||||
<RotateCcw size={16} />
|
||||
</button>
|
||||
<div className="viewport-divider" />
|
||||
<button
|
||||
className={`viewport-btn ${showGrid ? 'active' : ''}`}
|
||||
onClick={() => setShowGrid(!showGrid)}
|
||||
title={locale === 'zh' ? '显示网格' : 'Show Grid'}
|
||||
>
|
||||
<Grid3x3 size={16} />
|
||||
</button>
|
||||
<button
|
||||
className={`viewport-btn ${showGizmos ? 'active' : ''}`}
|
||||
onClick={() => setShowGizmos(!showGizmos)}
|
||||
title={locale === 'zh' ? '显示辅助工具' : 'Show Gizmos'}
|
||||
>
|
||||
{showGizmos ? <Eye size={16} /> : <EyeOff size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
<div className="viewport-toolbar-right">
|
||||
<button
|
||||
className={`viewport-btn ${showStats ? 'active' : ''}`}
|
||||
onClick={() => setShowStats(!showStats)}
|
||||
title={locale === 'zh' ? '显示统计信息' : 'Show Stats'}
|
||||
>
|
||||
<Activity size={16} />
|
||||
</button>
|
||||
<button
|
||||
className="viewport-btn"
|
||||
onClick={handleFullscreen}
|
||||
title={locale === 'zh' ? '全屏' : 'Fullscreen'}
|
||||
>
|
||||
<Maximize2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<canvas ref={canvasRef} className="viewport-canvas" />
|
||||
{showStats && (
|
||||
<div className="viewport-stats">
|
||||
<div className="viewport-stat">
|
||||
<span className="viewport-stat-label">FPS:</span>
|
||||
<span className="viewport-stat-value">60</span>
|
||||
</div>
|
||||
<div className="viewport-stat">
|
||||
<span className="viewport-stat-label">Draw Calls:</span>
|
||||
<span className="viewport-stat-value">0</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user