-
Notifications
You must be signed in to change notification settings - Fork 0
/
video.html
141 lines (140 loc) · 5.55 KB
/
video.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基于单例模式的基础three.js模板——画了一个正方形</title>
<style>
#root {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #eee;
}
</style>
</head>
<body>
<p>红色正方体在绕自身旋转,绿色正方体在绕x轴旋转,蓝色正方体在绕(400,0,-100)这个点旋转</p>
<p>物体本身是不能绕轴,绕某点旋转,所以需要用group做个容器包裹其物体,然后让group去绕轴,绕某点旋转</p>
<div id="root"></div>
<script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>
<script>
const obj = {
renderer: null,
camera: null,
width: null,
height: null,
scene: null,
light: null,
mesh1: null, // 网格对象1，绕自身旋转
group2: null, // 网格对象2:，绕轴转
group3: null, // 网格对象3， 绕某点转
isExpand: true, // true表示放大,false表示缩小;
init() {
this.initThree(); // 初始化three
this.initScene(); // 初始化场景
this.initCamera(); // 初始化相机
this.initLight(); // 初始化灯光
this.initObject(); // 初始化物体
this.initGrid(); //初始化网格
this.initVideo(); // 初始化音频
this.render(); // 渲染
},
initThree() {
let width = this.width = document.getElementById('root').clientWidth;
let height = this.height = document.getElementById('root').clientHeight;
let renderer = this.renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
document.getElementById('root').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1);
},
// 初始化场景
initScene() {
this.scene = new THREE.Scene();
},
// 初始化照相机
initCamera() {
// 初始化照相机
let camera = this.camera = new THREE.PerspectiveCamera(45, this.width/this.height, 1, 10000);
// 照相机的位置
camera.position.x = 100;
camera.position.y = 300;
camera.position.z = 600;
// 相机的头部在坐标轴的方向(相机以哪个方向为上方，默认y轴为上方)
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
// 照相机的朝向,照相机默认朝向是z轴负半轴,当照相机的位置改变后,继续朝向z轴负半轴的话很有可能看不到物体，这时候需要改变照相机的朝向。
camera.lookAt({
x: 0,
y: 0,
z: 0,
})
},
// 初始化灯光
initLight() {
// 灯光类型: 平行光
let light = this.light = new THREE.AmbientLight(0xFFFFFF, 1, 0);
// 灯光的位置
light.position.set(100,100,200);
// 把灯光添加到场景上;
this.scene.add(light);
},
// 标尺
initGrid() {
let helper = new THREE.GridHelper( 1000, 50,0x0000FF, 0x808080 );
this.scene.add(helper);
},
// 初始化物体
initObject() {
let geometry = new THREE.BoxGeometry(100,100,100);
// 正方体1红色,绕自身旋转
let mesh1 = this.mesh1 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color:0xFF0000}));
mesh1.position.set(-200, 0, 200);
this.scene.add(mesh1);
// 正方体2绿色,绕x轴转(注意设置的mesh的位置，而不是group的,group的位置一旦被设置了就确定,再也无法移动了)
let group2 = this.group2 = new THREE.Group();
let mesh2 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color:0x00FF00}));
mesh2.position.set( -200, 0, -300);
group2.add(mesh2);
this.scene.add(group2)
// 正方体3蓝色,绕(5,4,3)这个点旋转
let group3 = this.group3 = new THREE.Group();
let mesh3 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color:0x0000FF}));
mesh3.position.set( 200, 0, -300);
group3.add(mesh3);
group3.position.set(400,0,-100);
this.scene.add(group3)
},
initVideo() {
let listener = new THREE.AudioListener();
this.camera.add( listener );
let sound = new THREE.Audio( listener );
let audioLoader = new THREE.AudioLoader();
audioLoader.load('/static/464446.m4a', function(buffer) {
sound.setBuffer( buffer );
sound.setLoop( true );
sound.setVolume( 0.5 );
sound.play();
})
},
// 渲染器渲染
render() {
this.mesh1.rotation.z += .01;
this.group2.rotation.x += .01;
this.group3.rotation.z += .01;
this.renderer.clear();
this.renderer.render(this.scene, this.camera);
// requestAnimationFrame允许不停的调用传入的参数方法，一般用来渲染动画;
// requestAnimationFrame,它告诉浏览器在合适的时候调用指定函数，通常可能达到60FPS
requestAnimationFrame(this.render.bind(this));
}
}
obj.init();
</script>
</body>
</html>