-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathgeometry_line.html
99 lines (86 loc) · 3.37 KB
/
geometry_line.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>geometry_point</title>
<script src="js/three.js"></script>
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
</style>
<script>
var renderer, width = window.innerWidth, height = window.innerHeight;
function initThree() {
//创建一个div可供放置渲染器
var container = document.createElement('div');
//将这个div置入body
document.body.appendChild(container);
//新建渲染器，其中设置antialias为true
renderer = new THREE.WebGLRenderer({
antialias: true //这里是抗锯齿，比如我们看到一条斜线有很多跟锯子形状的齿，这里可以弱化那些锯齿
});
//设置渲染器的尺寸
renderer.setSize(width, height);
//将我们的渲染器嵌入之前创建的div容器
container.appendChild(renderer.domElement);
//设置渲染器的颜色（白色）以及alpha值（这里可以理解为透明度，颜色深浅）
renderer.setClearColor(0xFFFFFF, 1.0);
}
var camera;
function initCamera() {
//这里采用了透视投影相机，看到的东西类似于人眼，越远越小
//参数1: fov 广角，也就是看到的平面的大小到你眼睛的角度，越大看到的越多
//参数2: aspect 平面的宽高比
//参数3: near 近处你可以看见的距离
//参数4: far 远处可以看见的距离
camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
//设置相机的位置
camera.position.x = 0;
camera.position.y = 1000;
camera.position.z = 0;
//设置相机的朝向，z为1跟我们头朝上一样（这里是右手坐标系）
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
//设置相机对焦的点，跟我们眼球盯住的点一样
camera.lookAt({
x: 0,
y: 0,
z: 0
});
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
function initObject() {
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({vertexColors: THREE.VertexColors});
var color1 = new THREE.Color(0x444444), color2 = new THREE.Color(0xFF0000);
// 线的材质可以由2点的颜色决定
var p1 = new THREE.Vector3(-100, 0, 100);
var p2 = new THREE.Vector3(100, 0, -100);
//置入两个点
geometry.vertices.push(p1);
geometry.vertices.push(p2);
//分别区分两个点的颜色
geometry.colors.push(color1, color2);
//创建一个线行物体
var line = new THREE.Line(geometry, material, THREE.LinePieces);
//向场景中添加这条线段
scene.add(line);
}
function threeStart() {
initThree();
initCamera();
initScene();
initObject();
renderer.render(scene, camera);
}
</script>
</head>
<body onload="threeStart();">
</body>
</html>