<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js 3D立方体与人物模型</title>
<style>
/* 保持之前的样式不变 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
header {
text-align: center;
padding: 2rem 1rem;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.subtitle {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto;
opacity: 0.9;
}
.container {
display: flex;
flex-wrap: wrap;
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
gap: 2rem;
}
#three-container {
flex: 1;
min-width: 300px;
height: 500px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
overflow: hidden;
background: rgba(0, 0, 0, 0.2);
}
.controls {
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
gap: 1.5rem;
background: rgba(0, 0, 0, 0.3);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.control-group {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 1.2rem;
}
.control-group h3 {
margin-bottom: 1rem;
font-size: 1.3rem;
color: #ff7eb9;
}
.slider-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1rem;
}
label {
display: flex;
justify-content: space-between;
font-size: 1rem;
}
input[type="range"] {
width: 100%;
height: 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.2);
outline: none;
opacity: 0.7;
transition: opacity 0.2s;
}
input[type="range"]:hover {
opacity: 1;
}
button {
background: linear-gradient(45deg, #ff7eb9, #ff758c);
color: white;
border: none;
padding: 0.8rem 1.5rem;
font-size: 1rem;
border-radius: 50px;
cursor: pointer;
margin-right: 1rem;
margin-bottom: 0.5rem;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 15px rgba(255, 126, 185, 0.3);
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(255, 126, 185, 0.5);
}
button:active {
transform: translateY(0);
}
.button-group {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.description {
background: rgba(255, 255, 255, 0.08);
border-radius: 15px;
padding: 1.5rem;
margin: 2rem auto;
max-width: 1200px;
line-height: 1.6;
}
.description h2 {
color: #65ffcf;
margin-bottom: 1rem;
font-size: 1.8rem;
}
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.step {
background: rgba(255, 255, 255, 0.05);
padding: 1.2rem;
border-radius: 10px;
border-left: 4px solid #65ffcf;
}
.step h3 {
color: #65ffcf;
margin-bottom: 0.5rem;
font-size: 1.2rem;
}
.character-info {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
}
footer {
text-align: center;
padding: 1.5rem;
background: rgba(0, 0, 0, 0.4);
margin-top: auto;
backdrop-filter: blur(5px);
}
.value-display {
font-family: monospace;
background: rgba(0, 0, 0, 0.4);
padding: 0.2rem 0.5rem;
border-radius: 4px;
margin-left: 5px;
}
.model-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 1.2rem;
background: rgba(0, 0, 0, 0.7);
padding: 1rem 2rem;
border-radius: 10px;
z-index: 10;
}
.tabs {
display: flex;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 1rem;
}
.tab {
padding: 0.5rem 1rem;
cursor: pointer;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px 5px 0 0;
margin-right: 0.25rem;
}
.tab.active {
background: rgba(255, 126, 185, 0.5);
font-weight: bold;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
</style>
</head>
<body>
<header>
<h1>Three.js 3D场景教学</h1>
<p class="subtitle">包含旋转立方体和3D人物模型 - 使用控件交互体验</p>
</header>
<div class="container">
<div id="three-container">
<div class="model-loading" id="model-loading">正在加载人物模型...</div>
</div>
<div class="controls">
<div class="tabs">
<div class="tab active" data-tab="cube">立方体控制</div>
<div class="tab" data-tab="character">人物控制</div>
<div class="tab" data-tab="lights">光源设置</div>
</div>
<div class="tab-content active" data-tab="cube">
<div class="control-group">
<h3>立方体控制</h3>
<div class="slider-container">
<label>
<span>旋转速度:</span>
<span class="value-display" id="speed-value">0.01</span>
</label>
<input type="range" id="rotation-speed" min="0" max="0.05" step="0.001" value="0.01">
</div>
<div class="slider-container">
<label>
<span>尺寸:</span>
<span class="value-display" id="size-value">1.0</span>
</label>
<input type="range" id="cube-size" min="0.5" max="2" step="0.1" value="1">
</div>
<div class="slider-container">
<label>
<span>X轴旋转:</span>
<span class="value-display" id="x-value">0</span>
</label>
<input type="range" id="rotate-x" min="0" max="6.28" step="0.01" value="0">
</div>
<div class="slider-container">
<label>
<span>Y轴旋转:</span>
<span class="value-display" id="y-value">0</span>
</label>
<input type="range" id="rotate-y" min="0" max="6.28" step="0.01" value="0">
</div>
<div class="button-group">
<button id="wireframe-btn">线框/实心切换</button>
<button id="material-btn">材质切换</button>
<button id="reset-cube-btn">重置立方体</button>
</div>
</div>
</div>
<div class="tab-content" data-tab="character">
<div class="control-group">
<h3>人物模型设置</h3>
<div class="slider-container">
<label>
<span>人物高度:</span>
<span class="value-display" id="character-height-value">1.7</span>
</label>
<input type="range" id="character-height" min="1" max="3" step="0.1" value="1.7">
</div>
<div class="slider-container">
<label>
<span>旋转:</span>
<span class="value-display" id="character-rotation-value">0</span>
</label>
<input type="range" id="character-rotation" min="0" max="6.28" step="0.01" value="0">
</div>
<div class="slider-container">
<label>
<span>位置X:</span>
<span class="value-display" id="character-x-value">0</span>
</label>
<input type="range" id="character-x" min="-5" max="5" step="0.1" value="0">
</div>
<div class="slider-container">
<label>
<span>位置Z:</span>
<span class="value-display" id="character-z-value">-2</span>
</label>
<input type="range" id="character-z" min="-5" max="5" step="0.1" value="-2">
</div>
<div class="button-group">
<button id="animate-character-btn">播放动画</button>
<button id="change-pose-btn">切换姿势</button>
<button id="reset-character-btn">重置人物</button>
</div>
</div>
<div class="control-group character-info">
<div>
<h3>人物信息</h3>
<p>模型（来源）: 科幻宇航员</p>
<p>多边形: ≈4,200</p>
<p>材质: 4</p>
</div>
</div>
</div>
<div class="tab-content" data-tab="lights">
<div class="control-group">
<h3>光源控制</h3>
<div class="slider-container">
<label>
<span>环境光强度:</span>
<span class="value-display" id="ambient-value">0.3</span>
</label>
<input type="range" id="ambient-light" min="0" max="1" step="0.01" value="0.3">
</div>
<div class="slider-container">
<label>
<span>点光源强度:</span>
<span class="value-display" id="pointlight-value">1.0</span>
</label>
<input type="range" id="point-light" min="0" max="2" step="0.1" value="1.0">
</div>
<div class="slider-container">
<label>
<span>点光源X:</span>
<span class="value-display" id="light-x-value">5</span>
</label>
<input type="range" id="light-x" min="-10" max="10" step="1" value="5">
</div>
<div class="slider-container">
<label>
<span>点光源Y:</span>
<span class="value-display" id="light-y-value">5</span>
</label>
<input type="range" id="light-y" min="-10" max="10" step="1" value="5">
</div>
<div class="button-group">
<button id="reset-lights-btn">重置光源</button>
</div>
</div>
</div>
</div>
</div>
<div class="description">
<h2>Three.js 3D模型集成</h2>
<p>这个场景演示了如何在Three.js中集成3D人物模型。人物模型使用glTF格式加载，支持骨骼动画和材质定制。</p>
<div class="steps">
<div class="step">
<h3>glTF模型格式</h3>
<p>glTF是用于WebGL和其他应用的3D模型标准格式，支持几何、材质、动画和场景层级结构。</p>
</div>
<div class="step">
<h3>模型加载流程</h3>
<p>1. 创建GLTFLoader实例<br>2. 加载模型文件<br>3. 处理加载完成回调<br>4. 将模型添加到场景</p>
</div>
<div class="step">
<h3>角色动画控制</h3>
<p>使用Three.js动画系统播放人物动画，通过AnimationMixer和AnimationAction控制播放速度和循环方式。</p>
</div>
<div class="step">
<h3>模型交互</h3>
<p>可调整人物位置、大小和旋转，切换姿势和播放动画，完整控制3D人物的状态。</p>
</div>
</div>
</div>
<footer>
<p>Three.js 3D人物模型示例 © 2025 | 使用WebGL和Three.js构建</p>
</footer>
<script type="module" src="main.js"></script>
</body>
</html>
index.html
main.js
package.json