-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlineDashed.html
114 lines (107 loc) · 3.94 KB
/
lineDashed.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<title>webgl demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script type="text/javascript" src="./js/three.min.js"></script>
<style>
*{margin:0;padding: 0;}
html,body{
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript">
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColor(0x333333);
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
var scene = new THREE.Scene();
var mouseX = 0, mouseY = 0;
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(0,0,1000);
camera.lookAt(scene.position);
function DrawDashLine(){
var geometry = new THREE.Geometry();
/**
* vertexColors: false 关闭使用点颜色来生成线的颜色，这个值默认是false，如果设置为true，那么后面设置的color将不起作用
* dashSize:30 点长度30个单位
* gapSize:20 点与点之间间隔长度20个单位
* @type {THREE.LineDashedMaterial}
*/
var material = new THREE.LineDashedMaterial({ vertexColors: false,dashSize:150,gapSize:200,color:0x839848});
var p1 = new THREE.Vector3(0,0,0);
var p2 = new THREE.Vector3(500,300,0);
geometry.vertices.push(p1);
geometry.vertices.push(p2);
/**
* 虚线记得加上这句，用于计算上面设置的点和间隔长度，不设置则线表现为实线
*/
geometry.computeLineDistances();
var line = new THREE.Line(geometry,material,THREE.LineSegments );
scene.add(line);
}
// DrawDashLine();
function initObject(){
var geometry = new THREE.Geometry();
/**
* vertexColors: true 这个设置为true，表示使用端点颜色
* @type {THREE.LineBasicMaterial}
*/
var material = new THREE.LineBasicMaterial({ vertexColors: true });
var p1 = new THREE.Vector3(0, 0,0);
var p2 = new THREE.Vector3(500,300,0);
geometry.vertices.push(p1);
geometry.vertices.push(p2);
/**
* 将端点颜色加到geometry.colors中，这是一个数组，对应线的端点
*/
var color1 = new THREE.Color(0x3966FF);
var color2 = new THREE.Color(0x629729 );
geometry.colors.push(color1,color2);
var line = new THREE.Line(geometry,material,THREE.LineSegments );
scene.add(line);
}
// initObject();
var vertices = [
new THREE.Vector3(1, 3, 1),
new THREE.Vector3(1, 3, -1),
new THREE.Vector3(1, -1, 1),
new THREE.Vector3(1, -1, -1),
new THREE.Vector3(-1, 3, -1),
new THREE.Vector3(-1, 3, 1),
new THREE.Vector3(-1, -1, -1),
new THREE.Vector3(-1, -1, 1)
];
var faces = [
new THREE.Face3(0, 2, 1),
new THREE.Face3(2, 3, 1),
new THREE.Face3(4, 6, 5),
new THREE.Face3(6, 7, 5),
new THREE.Face3(4, 5, 1),
new THREE.Face3(5, 0, 1),
new THREE.Face3(7, 6, 2),
new THREE.Face3(6, 3, 2),
new THREE.Face3(5, 7, 0),
new THREE.Face3(7, 2, 0),
new THREE.Face3(1, 3, 4),
new THREE.Face3(3, 6, 4),
];
var geom = new THREE.Geometry();
geom.vertices = vertices;
geom.faces = faces;
geom.computeFaceNormals();
var material = new THREE.MeshBasicMaterial({color:0xCCCCCC,transparent:false});
var mesh = new THREE.Mesh(geom,material);
mesh.scale.set(50,50,50);
scene.add(mesh);
function render() {
requestAnimationFrame(render);
webGLRenderer.render(scene,camera);
}
render();
document.body.appendChild(webGLRenderer.domElement);
</script>
</body>
</html>