iThreeJS/index.html at master · yyhsong/iThreeJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<title>iThreeJS - 3D数据可视化</title>
		<style type="text/css">
			* {margin:0;padding:0;}
			html, body {height:100%;}
			.flex-container {display:-webkit-flex;display:-ms-flexbox;display:flex;}
			.flex-item {flex:1;margin:25px;}
			h3 {font-size:16px;}
			ul {margin:15px;}
			ol {margin:0 15px;}
			li {line-height:2em;font-size:14px;}
			li.title {font-weight:bold;}
			a {text-decoration:none;color:#0366d6;}
			a:hover {text-decoration:underline;}
		</style>
	</head>

	<body>
		<div class="flex-container">
			<div class="flex-item">
				<h3>Quick Start</h3>
				<ul>
					<li><a href="./hello-webgl.html" target="_blank">Hello WebGL</a></li>
					<li><a href="./hello-threejs.html" target="_blank">Hello ThreeJS</a></li>
					<li><a href="./hello-thingjs.html" target="_blank">Hello ThingJS</a></li>
				</ul>
			</div>
			<div class="flex-item">
				<h3>基本概念</h3>
				<ul>
					<li><a href="./docs/camera.html" target="_blank">相机 Camera</a></li>
					<li><a href="./docs/geometry.html" target="_blank">几何体 Geometry</a></li>
					<li><a href="./docs/material.html" target="_blank">材质 Material</a></li>
					<li><a href="./docs/mesh.html" target="_blank">网格 Mesh</a></li>
					<li><a href="./docs/animation.html" target="_blank">动画 Animation</a></li>
					<li><a href="./docs/model.html" target="_blank">模型 Model</a></li>
					<li><a href="./docs/loader.html" target="_blank">加载器 Loader</a></li>
					<li><a href="./docs/light.html" target="_blank">光照 Light</a></li>
					<li><a href="./docs/shader.html" target="_blank">着色器 Shader</a></li>
				</ul>
			</div>
			<div class="flex-item">
				<h3>开发指南</h3>
				<ul>
					<li class="title">Chapter01 入门</li>
					<ol>
						<li><a href="./courses/chapter01/first_3d.html" target="_blank">创建第一个3D场景</a></li>
						<li><a href="./courses/chapter01/mesh_wireframe.html" target="_blank">查看几何体的线框模式</a></li>
						<li><a href="./courses/chapter01/animation_frame.html" target="_blank">实现简单的动画效果</a></li>
						<li><a href="./courses/chapter01/orbit_ctrl.html" target="_blank">鼠标控制场景旋转和缩放</a></li>
						<li><a href="./courses/chapter01/basic_geometry.html" target="_blank">常用基础几何体</a></li>
						<li><a href="./courses/chapter01/axes_helper.html" target="_blank">物体组合及辅助坐标系</a></li>
						<li><a href="./courses/chapter01/camera_perspective.html" target="_blank">透视投影与相机位置</a></li>
					</ol>
				</ul>
				<ul>
					<li class="title">Chapter02 基本组件</li>
					<ol>
						<li><a href="./courses/chapter02/sence.html" target="_blank">场景 Scene</a></li>
						<li><a href="./courses/chapter02/mesh.html" target="_blank">物体 Mesh</a></li>
						<li><a href="./courses/chapter02/grid.html" target="_blank">网格辅助 GridHelper</a></li>
					</ol>
				</ul>
				<ul>
					<li class="title">Chapter03 加载模型</li>
					<ol>
						<li><a href="./courses/chapter03/loader_3mf.html" target="_blank">加载不带材质的3mf模型</a></li>
						<li><a href="./courses/chapter03/loader_3mf_material.html" target="_blank">加载带材质的3mf模型</a></li>
						<li><a href="./courses/chapter03/loader_obj.html" target="_blank">加载不带材质的obj模型</a></li>
						<li><a href="./courses/chapter03/loader_obj_material.html" target="_blank">加载带材质的obj模型</a></li>
						<li><a href="./courses/chapter03/loader_obj_mtl_pics.html" target="_blank">加载带纹理和贴图的obj模型</a></li>
						<li><a href="./courses/chapter03/loader_gltf.html" target="_blank">加载glTF模型</a></li>
						<li><a href="./courses/chapter03/loader_gltf_animation.html" target="_blank">加载带动画的glTF模型</a></li>
					</ol>
				</ul>
			</div>
			<div class="flex-item">
				<h3>ThreeJS 案例</h3>
				<ul>
					<li><a href="https://demos.littleworkshop.fr/infinitown" target="_blank">Infinitown</a></li>
					<li><a href="https://www.kodeclubs.com/" target="_blank">Kodeclubs</a></li>
					<li><a href="http://vr.ff.com/us/" target="_blank">FF 91 VR</a></li>
					<li><a href="http://www.hewebgl.com/code/show/9.html" target="_blank">怪兽换装</a></li>
					<li><a href="http://www.hewebgl.com/code/show/4.html" target="_blank">元素周期表</a></li>
					<li><a href="https://akirodic.com/p/jellyfish/" target="_blank">水母</a></li>
					<li><a href="http://www.yanhuangxueyuan.com/3D/liangcang/index.html" target="_blank">3D粮仓模型</a></li>
					<li><a href="http://www.yanhuangxueyuan.com/3D/wopen/index.html" target="_blank">3D涡轮模型</a></li>
				</ul>
			</div>
			<div class="flex-item">
				<h3>ThingJS 案例</h3>
				<ul>
					<li><a href="https://www.thingjs.com/guide/sampleindex.html?name=/uploads/wechat/oLX7p01p-lBQeR49wRF5j_ox3X3U/ShenzhenCityBuilder.js" target="_blank">智慧城市</a></li>
					<li><a href="https://www.thingjs.com/demos/menu.html?name=uBuilding" target="_blank">建筑监控</a></li>
					<li><a href="https://www.thingjs.com/static/demos/%E8%BD%A6%E9%97%B4demo/index.html" target="_blank">生产车间</a></li>
					<li><a href="https://www.thingjs.com/demos/menu.html?name=silohouse" target="_blank">3D粮仓模型</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>