# 快速开始
# 1.引入Tx3d Engine
首先引入Tx3d Engine核心包，本文通过script标签方式引入。
<body>
<script src='../dist/tx3d.core.js'></script>
</body>
1
2
3
2
3
# 2.设置渲染视口
在HTML中插入一个div标签，并指定一个id：
<div id="viewport" style="width:100%; height:100%"></div>
1
注意
开发者需要确保div的宽高都要大于0，否则会导致渲染不出来。
# 3.创建引擎对象
接下来我们需要使用上文的div标签创建引擎（Engine）对象
// 创建引擎
const engine = new Tx3d.Engine( {
// 场景渲染器初始化参数
sceneRenderer: {
viewport: document.getElementById( 'viewport' ), // 渲染视口
antialias: true, // 开启反走样
clearColor: '#002233' // 背景颜色
}
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 4.设置场景
场景可以理解为舞台，舞台是演员进行表演的地方，场景则是物体进行渲染的地方。
首先，我们需要先创建一个场景：
// 创建一个场景实体
const scene = engine.createScene();
1
2
2
舞台需要灯光，同理场景也需要灯光，接下来我们需要为场景添加灯光：
// 为场景添加一个环境光
scene.addComponent( Tx3d.AmbientLight, { color: '#ffffff', intensity: 0.25 } );
// 为场景添加一个方向光
scene.addComponent( Tx3d.DirectionalLight, { position: [ 100, 100, 100 ], color: '#ffffff', intensity: 1.0 } );
1
2
3
4
5
2
3
4
5
最后，我们需要激活场景，只有这样场景才可以参与渲染：
// 激活场景
engine.setActiveScene( scene );
1
2
2
注意
Tx3d Engine允许创建多个场景，但同一时刻只允一个场景被激活。
# 5.设置相机
为了确保场景中的物体可以被人眼看到，我们需要创建一个相机：
// 创建一个相机实体
const camera = engine.createCamera( {
name: '主相机',
camera: {
position: [ 0.0, 500.0, 0.0 ],
lookAt: [ 0.0, 0.0, 0.0 ]
}
} );
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
目前相机只能“看”，还不能“动”，为了让相机能够“动起来”，我们需要为相机添加一个控制器：
// 为相机添加一个"Orbit"控制器
camera.addComponent( Tx3d.OrbitControl, { eanbleDamping: true } );
1
2
2
同场景一样，相机也需要先激活，然后才能使用：
// 激活相机
engine.setActiveCamera( camera );
1
2
2
注意
同场景一样，Tx3d Engine允许创建多个相机，但同一时刻只允一个相机被激活。
# 6.添加渲染对象
经过以上的操作，现在场景可以渲染出来，但是我们现在看到还只是一个纯色的背景。这是因为场景中还没有添加渲染对象。
首先，我们先为场景添加一个辅助网格：
// 创建一个空实体
const entity = engine.createEntity();
// 添加一个辅助网格渲染组件
entity.addComponent( Tx3d.GridHelper, { color: '#ffffff' } );
1
2
3
4
5
2
3
4
5
接下来我们再为场景中添加一个汽车模型：
// 加载一个汽车模型
engine.loadGLTF( 'assets/models/pagani/scene.gltf' );
1
2
2
至此，一个完整的渲染场景就搭建完成，完整代码，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>tx3d.js Hello World</title>
<style>
html {
height: 100%;
}
body {
font-family: Monospace;
font-weight: bold;
margin: 0px;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="viewport" style="width:100%; height:100%"></div>
<script src='../dist/tx3d.core.js'></script>
<script>
// 创建引擎
const engine = new Tx3d.Engine( {
// 场景渲染器初始化参数
sceneRenderer: {
viewport: document.getElementById( 'viewport' ), // 渲染视口
antialias: true, // 开启反走样
clearColor: '#002233' // 背景颜色
}
} );
// 创建一个场景实体
const scene = engine.createScene();
// 为场景添加一个环境光
scene.addComponent( Tx3d.AmbientLight, { color: '#ffffff', intensity: 0.25 } );
// 为场景添加一个方向光
scene.addComponent( Tx3d.DirectionalLight, { position: [ 100, 100, 100 ], color: '#ffffff', intensity: 1.0 } );
// 激活场景
engine.setActiveScene( scene );
// 创建一个相机实体
const camera = engine.createCamera( {
name: '主相机',
camera: {
position: [ 0.0, 500.0, 0.0 ],
lookAt: [ 0.0, 0.0, 0.0 ]
}
} );
// 为相机添加一个"Orbit"控制器
camera.addComponent( Tx3d.OrbitControl, { eanbleDamping: true } );
// 激活相机
engine.setActiveCamera( camera );
// 创建一个空实体
const entity = engine.createEntity();
// 添加一个辅助网格渲染组件
entity.addComponent( Tx3d.GridHelper, { color: '#ffffff' } );
// 加载一个汽车模型
engine.loadGLTF( 'assets/models/pagani/scene.gltf' );
</script>
</body>
</html>
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
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