-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcar.html
99 lines (83 loc) · 2.89 KB
/
car.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 lang="en">
<meta charset="UTF-8">
<title>annimation</title>
<script src="three.js"></script>
<style>
body{
margin: 0;
overflow:hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
<!--
该节点用于放置统计动画的对象
-->
</div>
<div id="WebGL-output"></div>
<script>
function init() {
var scene=new THREE.Scene();
var camera= new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.x=-30;
camera.position.y=40;
camera.position.z=30;
camera.lookAt(scene.position);
var renderer=new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE,1.0));
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.shadowMapEnabled=true;
//plane添加
var planeGeometry=new THREE.PlaneBufferGeometry(60,20,1,1);
var planeMaterial=new THREE.MeshLambertMaterial({color:0xffffff});
var plane=new THREE.Mesh(planeGeometry,planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
//cube添加
var cubeGeometry = new THREE.BoxGeometry(4, 4, 8);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 0;
cube.position.y = 6;
cube.position.z = 0;
cube.castShadow = true;
scene.add(cube);
//添加轮子
var torusGeometry=new THREE.TorusGeometry(1,0.25,100,100);//前两个参数分别是圆环半径和管子的半径
/* torusGeometry.parameters.radius=2;
torusGeometry.parameters.tube=0.5;*/
var torusMaterial=new THREE.MeshLambertMaterial({color:0xff0000});
var torus=new THREE.Mesh(torusGeometry,torusMaterial);
torus.position.x = -2;
torus.position.y = 3.5;
torus.position.z = 2;
torus.rotation.y=Math.PI / 2;
torus.castShadow = true;
scene.add(torus);
var torusMaterial2=new THREE.MeshLambertMaterial({color:0xff0000});
var torus2=new THREE.Mesh(torusGeometry,torusMaterial);
torus2.position.x = -2;
torus2.position.y = 3.5;
torus2.position.z = -3;
torus2.rotation.y=Math.PI / 2;
torus2.castShadow = true;
scene.add(torus2);
// add spotlight for the shadows
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene,camera);
}
window.onload=init;
</script>
</body>
</html>