-
Notifications
You must be signed in to change notification settings - Fork 60
/
step3.html
174 lines (160 loc) · 6.57 KB
/
step3.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第三步：操控魔方视角</title>
<script type="text/javascript" src="./threejs/three.js"></script>
<script type="text/javascript" src="./threejs/controls/OrbitControls.js"></script>
<link rel="stylesheet" href="./reset.import.css">
<style type="text/css">
div#canvas-frame {
cursor: pointer;
width:100%;
height:100%;
background-color: #EEEEEE;
}
</style>
</head>
<body onload="threeStart();">
<div id="canvas-frame"></div>
<script>
var renderer;//渲染器
var width;//页面宽度
var height;//页面高度
var origPoint = new THREE.Vector3(0, 0, 0);//原点
window.requestAnimFrame = (function() {//如果有变化则可能还需要requestAnimationFrame刷新
return window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.webkitRequestAnimationFrame;
})();
//根据页面宽度和高度创建渲染器，并添加容器中
function initThree() {
width = window.innerWidth;
height = window.innerHeight;
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
renderer.setClearColor(0xFFFFFF, 1.0);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
}
//创建相机，并设置正方向和中心点
var camera;
var controller;//视角控制器
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.set(0, 0, 600);
camera.up.set(0, 1, 0);//正方向
camera.lookAt(origPoint);
//视角控制
controller = new THREE.OrbitControls(camera, renderer.domElement);
controller.target = origPoint;//设置控制点
}
//创建场景，后续元素需要加入到场景中才会显示出来
var scene;
function initScene() {
scene = new THREE.Scene();
}
//创建光线
var light;
function initLight() {
light = new THREE.AmbientLight(0xfefefe);
scene.add(light);
}
var cubeParams = {//魔方参数
x:0,
y:0,
z:0,
num:3,
len:50,
colors:['rgba(255,193,37,1)','rgba(0,191,255,1)',
'rgba(50,205,50,1)','rgba(178,34,34,1)',
'rgba(255,255,0,1)','rgba(255,255,255,1)']
};
/**
* 简易魔方
* x、y、z 魔方中心点坐标
* num 魔方阶数
* len 小方块宽高
* colors 魔方六面体颜色
*/
function SimpleCube(x, y, z, num, len, colors) {
//魔方左上角坐标
var leftUpX = x - num / 2 * len;
var leftUpY = y + num / 2 * len;
var leftUpZ = z + num / 2 * len;
//根据颜色生成材质
var materialArr = [];
for (var i = 0; i < colors.length; i++) {
var texture = new THREE.Texture(faces(colors[i]));
texture.needsUpdate = true;
var material = new THREE.MeshLambertMaterial({ map: texture });
materialArr.push(material);
}
var cubes = [];
for (var i = 0; i < num; i++) {
for (var j = 0; j < num * num; j++) {
var cubegeo = new THREE.BoxGeometry(len, len, len);
var cube = new THREE.Mesh(cubegeo, materialArr);
//依次计算各个小方块中心点坐标
cube.position.x = (leftUpX + len / 2) + (j % num) * len;
cube.position.y = (leftUpY - len / 2) - parseInt(j / num) * len;
cube.position.z = (leftUpZ - len / 2) - i * len;
cubes.push(cube)
}
}
return cubes;
}
//生成canvas素材
function faces(rgbaColor) {
var canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
var context = canvas.getContext('2d');
if (context) {
//画一个宽高都是256的黑色正方形
context.fillStyle = 'rgba(0,0,0,1)';
context.fillRect(0, 0, 256, 256);
//在内部用某颜色的16px宽的线再画一个宽高为224的圆角正方形并用改颜色填充
context.rect(16, 16, 224, 224);
context.lineJoin = 'round';
context.lineWidth = 16;
context.fillStyle = rgbaColor;
context.strokeStyle = rgbaColor;
context.stroke();
context.fill();
} else {
alert('您的浏览器不支持Canvas无法预览.\n');
}
return canvas;
}
//创建展示场景所需的各种元素
var cubes
function initObject() {
//生成魔方小正方体
cubes = SimpleCube(cubeParams.x,cubeParams.y,cubeParams.z,cubeParams.num,cubeParams.len,cubeParams.colors);
for(var i=0;i<cubes.length;i++){
var item = cubes[i];
scene.add(cubes[i]);//并依次加入到场景中
}
}
//渲染
function render(){
renderer.clear();
renderer.render(scene, camera);
window.requestAnimFrame(render);
}
//开始
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
render();
}
</script>
</body>
</html>