lzy
/
threepipe

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正交相机示例 - 防止透视效果</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background: #f0f0f0;
        }
        
        .container {
            display: flex;
            height: 100vh;
        }
        
        .viewer-container {
            flex: 1;
            position: relative;
        }
        
        .controls-panel {
            width: 300px;
            background: white;
            padding: 20px;
            box-shadow: -2px 0 5px rgba(0,0,0,0.1);
            overflow-y: auto;
        }
        
        .control-group {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        
        .control-group h3 {
            margin: 0 0 10px 0;
            color: #333;
        }
        
        .control-item {
            margin-bottom: 10px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        
        input, select, button {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-sizing: border-box;
        }
        
        button {
            background: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            margin-top: 5px;
        }
        
        button:hover {
            background: #0056b3;
        }
        
        .info {
            background: #e7f3ff;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
            font-size: 14px;
            line-height: 1.4;
        }
        
        .comparison {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .comparison-item {
            text-align: center;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 5px;
        }
        
        .comparison-item.active {
            background: #007bff;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="viewer-container" id="viewer-container"></div>
        <div class="controls-panel">
            <div class="info">
                <strong>正交相机 vs 透视相机</strong><br>
                正交相机可以消除透视效果，使远近物体保持相同的大小比例，常用于建筑设计、工程图纸等需要精确比例的场景。
            </div>
            
            <div class="comparison">
                <div class="comparison-item active" id="ortho-btn">
                    正交相机<br>
                    <small>无透视效果</small>
                </div>
                <div class="comparison-item" id="perspective-btn">
                    透视相机<br>
                    <small>有透视效果</small>
                </div>
            </div>
            
            <div class="control-group">
                <h3>相机控制</h3>
                <div class="control-item">
                    <label>相机类型:</label>
                    <select id="camera-type">
                        <option value="orthographic">正交相机 (Orthographic)</option>
                        <option value="perspective">透视相机 (Perspective)</option>
                    </select>
                </div>
                <div class="control-item">
                    <label>控制模式:</label>
                    <select id="controls-mode">
                        <option value="orbit">轨道控制 (Orbit)</option>
                        <option value="">无控制</option>
                    </select>
                </div>
            </div>
            
            <div class="control-group" id="ortho-controls">
                <h3>正交相机设置</h3>
                <div class="control-item">
                    <label>视锥大小 (Frustum Size): <span id="frustum-value">10</span></label>
                    <input type="range" id="frustum-size" min="1" max="50" value="10" step="0.5">
                </div>
                <div class="control-item">
                    <label>缩放 (Zoom): <span id="zoom-value">1</span></label>
                    <input type="range" id="zoom" min="0.1" max="5" value="1" step="0.1">
                </div>
            </div>
            
            <div class="control-group" id="perspective-controls" style="display: none;">
                <h3>透视相机设置</h3>
                <div class="control-item">
                    <label>视野角度 (FOV): <span id="fov-value">75</span>°</label>
                    <input type="range" id="fov" min="10" max="120" value="75" step="1">
                </div>
            </div>
            
            <div class="control-group">
                <h3>相机位置</h3>
                <div class="control-item">
                    <label>X: <span id="pos-x-value">0</span></label>
                    <input type="range" id="pos-x" min="-20" max="20" value="0" step="0.5">
                </div>
                <div class="control-item">
                    <label>Y: <span id="pos-y-value">0</span></label>
                    <input type="range" id="pos-y" min="-20" max="20" value="0" step="0.5">
                </div>
                <div class="control-item">
                    <label>Z: <span id="pos-z-value">10</span></label>
                    <input type="range" id="pos-z" min="1" max="50" value="10" step="0.5">
                </div>
            </div>
            
            <div class="control-group">
                <h3>预设视角</h3>
                <button onclick="setPresetView('front')">正视图</button>
                <button onclick="setPresetView('side')">侧视图</button>
                <button onclick="setPresetView('top')">俯视图</button>
                <button onclick="setPresetView('isometric')">等轴测图</button>
            </div>
            
            <div class="control-group">
                <h3>场景操作</h3>
                <button onclick="addTestObjects()">添加测试物体</button>
                <button onclick="clearScene()">清空场景</button>
                <button onclick="resetCamera()">重置相机</button>
            </div>
        </div>
    </div>
    
    <script type="module" src="./script.js"></script>
</body>
</html>