Skip to content

Commit fe88791

Browse files
CatsugarCatsugar
committed
11
1 parent d7d282f commit fe88791

File tree

12 files changed

+41937
-27
lines changed

12 files changed

+41937
-27
lines changed

‎Task31/Task31.html

+31-27
Original file line numberDiff line numberDiff line change
@@ -7,32 +7,35 @@
77
<body>
88
<h1 style="text-align: center;">动态数据绑定（二）</h1>
99
<h3 style="text-align: center;">按 F12 打开工作台</h3>
10-
<script>
11-
//实现一个事件
12-
function Event(){
13-
this.events = {};
14-
}
15-
Event.prototype.on = function(attr, callback){
16-
if(this.events[attr]){
17-
this.events[attr].push(callback);
18-
}else{
19-
this.events[attr] = [callback];
20-
}
21-
}
22-
Event.prototype.off = function(attr){
23-
for(var key in this.events){
24-
if(this.events.hasOwnProperty(key) && key === attr){
25-
delete this.events[key];
26-
}
27-
}
28-
}
29-
Event.prototype.emit = function(attr, ...arg){
30-
this.events[attr] && this.events[attr].forEach(function(item){
31-
item(...arg);
32-
})
33-
}
34-
35-
// Observer 的构造函数
10+
 <script src="browser.min.js"></script>
11+
<script type="text/babel">
12+
//实现一个事件
13+
function Event(){
14+
this.events = {};
15+
}
16+
17+
Event.prototype.on = function(attr, callback){
18+
if(this.events[attr]){
19+
this.events[attr].push(callback);
20+
}else{
21+
this.events[attr] = [callback];
22+
}
23+
}
24+
25+
Event.prototype.off = function(attr){
26+
for(let key in this.events){
27+
if(this.events.hasOwnProperty(key) && key === attr){
28+
delete this.events[key];
29+
}
30+
}
31+
}
32+
33+
Event.prototype.emit = function(attr, ...arg){
34+
this.events[attr] && this.events[attr].forEach(function(item){
35+
item(...arg);
36+
})
37+
}
38+
// Observer 的构造函数
3639
function Observer(data) {
3740
this.data = data;
3841
this.walk(data);
@@ -94,7 +97,8 @@ <h3 style="text-align: center;">按 F12 打开工作台</h3>
9497
9598
app.data.basicInfo.age = 20;*/
9699
app.$watch('age', function(age){
97-
console.log('我的年龄变了，现在是：${age}岁了')
100+
console.log('我的年龄变了，现在是：${age}岁了');
101+
98102
})
99103
/******************以下为测试部分*****************************/
100104
app.data.name.lastName;// 你访问了 lastName

‎Task31/browser.min.js

+30
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Task48/Task48.html

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!DOCTYPE>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>WebGL No.1 - Three.js 入门</title>
6+
<style type="text/css">
7+
body{
8+
padding:0;
9+
margin:0;
10+
background-color:#CCC;}
11+
#mainCanvas{
12+
padding:0;
13+
margin:0 auto;}
14+
</style>
15+
<script type="text/javascript" src="three.js"></script>
16+
<script type="text/javascript">
17+
function init(){
18+
//绑定渲染器和canvas
19+
var renderer = new THREE.WebGLRenderer({
20+
canvas: document.getElementById('mainCanvas'),
21+
antialias: true,
22+
precision: "highp" });
23+
renderer.shadowMapEnabled = true;//设置可以渲染阴影
24+
renderer.shadowMapSoft = true; //软阴影
25+
renderer.setSize(1400, 700);
26+
renderer.setClearColor(0xcccccc);
27+
//场景
28+
var scene = new THREE.Scene();
29+
//透视照相机
30+
camera = new THREE.PerspectiveCamera(45, 2 / 1, 1, 1000);
31+
// 创建
32+
camera.position.set(3,4,5);
33+
camera.lookAt(new THREE.Vector3(0, 0, 0));
34+
scene.add(camera);
35+
//平面
36+
//平面的材质
37+
var texture = THREE.ImageUtils.loadTexture('../image/bg.jpg', {}, function() {
38+
renderer.render(scene, camera);});
39+
var plane_bg = new THREE.MeshLambertMaterial({map: texture});
40+
var plane = new THREE.Mesh(new THREE.PlaneGeometry(15, 15, 16, 16),plane_bg);
41+
plane.rotation.x = -Math.PI / 2;
42+
plane.position.set(-4,-2,-4);
43+
plane.receiveShadow = true;
44+
scene.add(plane);
45+
//车声
46+
//车子的颜色
47+
var materials = [];
48+
for (var i = 0; i < 6; ++i) {
49+
materials.push(new THREE.MeshBasicMaterial({
50+
map: THREE.ImageUtils.loadTexture('../image/cat' + i + '.jpg',
51+
{}, function() {
52+
renderer.render(scene, camera);
53+
}),
54+
overdraw: true
55+
}));
56+
}
57+
var car = new THREE.Mesh(new THREE.CubeGeometry(4, 2, 2), materials);
58+
//car.position.set(0, 0,0);
59+
car.castShadow = true;
60+
scene.add(car);
61+
//轮子的颜色
62+
var texture = THREE.ImageUtils.loadTexture('../image/wheel.jpg', {}, function() {
63+
renderer.render(scene, camera);});
64+
var plane_bg = new THREE.MeshLambertMaterial({map: texture});
65+
var wheel1_bg = new THREE.Mesh(new THREE.PlaneGeometry(15, 15, 16, 16),wheel1_bg);
66+
//轮子
67+
var wheel1=new THREE.Mesh( new THREE.TorusGeometry(0.45,0.25,48,72),wheel1_bg);
68+
wheel1.position.set(1.5,-1,1);
69+
wheel1.castShadow = true;
70+
scene.add(wheel1);
71+
//轮子
72+
var wheel2=new THREE.Mesh( new THREE.TorusGeometry(0.45,0.25,48,72),wheel1_bg);
73+
wheel2.position.set(1.5,-1,-1);
74+
wheel2.castShadow = true;
75+
scene.add(wheel2);
76+
//轮子
77+
var wheel3=new THREE.Mesh( new THREE.TorusGeometry(0.45,0.25,48,72),wheel1_bg);
78+
wheel3.position.set(-1.5,-1,1);
79+
wheel3.castShadow = true;
80+
scene.add(wheel3);
81+
//轮子
82+
var wheel3=new THREE.Mesh( new THREE.TorusGeometry(0.45,0.25,48,72),wheel1_bg);
83+
wheel4.position.set(-1.5,-1,-1);
84+
wheel4.castShadow = true;
85+
scene.add(wheel4);
86+
// 光
87+
// var light = new THREE.AmbientLight(0xffffff, 2, 100); //环境光
88+
//var light = new THREE.PointLight(0xffffff, 1, 100);//点光源
89+
//var light = new THREE.DirectionalLight(); //平行光
90+
//聚光灯
91+
var light = new THREE.SpotLight(0xffffff, 1, 100, Math.PI / 6, 25);
92+
light.position.set(3, 5, 2);
93+
light.target = car;
94+
light.castShadow = true;
95+
light.shadowCameraNear = 2;
96+
light.shadowCameraFar = 10;
97+
light.shadowCameraFov = 30;
98+
light.shadowCameraVisible = true;
99+
light.shadowMapWidth = 1024;
100+
light.shadowMapHeight = 1024;
101+
light.shadowDarkness = 0.3; scene.add(light);
102+
// 环境光
103+
var ambient = new THREE.AmbientLight(0x666666);
104+
scene.add(ambient);
105+
//渲染
106+
renderer.render(scene, camera);
107+
}
108+
</script>
109+
</head>
110+
<body onLoad="init()">
111+
<canvas id="mainCanvas" width="0px" height="0px" >
112+
</canvas>
113+
</body>
114+
115+
</html>

‎Task48/image/bg.jpg

164 KB
Loading

‎Task48/image/cat1.jpg

86.4 KB
Loading

‎Task48/image/cat2.jpg

75.9 KB
Loading

‎Task48/image/cat3.jpg

102 KB
Loading

‎Task48/image/cat4.jpg

67.6 KB
Loading

‎Task48/image/cat5.jpg

68.3 KB
Loading

‎Task48/image/cat6.jpg

74.7 KB
Loading

‎Task48/image/wheel.jpg

217 KB
Loading

0 commit comments

Comments
 (0)