-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy paththreejs-sphere.html
109 lines (92 loc) · 4.17 KB
/
threejs-sphere.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
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Sphere</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/Three.js"></script>
<script src="js/requestAnimationFrame.js"></script>
<script>
var render = null,
scene = null,
camera = null,
cube = null,
animating = false;
function onLoad() {
//Grab our container div
var container = document.getElementById('container');
//Create the Three.js renderer add it to our div
renderer = new THREE.WebGLRenderer ({antialias: true});
renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild(renderer.domElement);
//Create Three.js scene
scene = new THREE.Scene();
//Put in a camera
camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 4000);
camera.position.z = 1000;
// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x777777);
scene.add(ambientLight);
// directional lighting
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
// Create a shaded, texture-mapped cube and add it to the scene
// First, create the texture map
var mapUrl = "images/football.jpg";
var texture = THREE.ImageUtils.loadTexture(mapUrl);
var material = new THREE.MeshLambertMaterial({
map: texture
});
var sphere = new THREE.Mesh( new THREE.SphereGeometry( 100, 100, 100 ), material );
sphere.position.set(-200, 0 , 1)
// sphere.rotation.x = Math.PI * 0.1;
var moonMap = "images/moon.jpg";
var texture1 = THREE.ImageUtils.loadTexture(moonMap);
var material1 = new THREE.MeshLambertMaterial({
map: texture1
});
var sphere1 = new THREE.Mesh( new THREE.SphereGeometry( 200, 100, 100 ), material1 );
sphere1.position.set(200, 0, 1);
// Add the cube to our scene
scene.add( sphere );
scene.add( sphere1 );
// Add a mouse up handler to toggle the animation
addMouseHandler();
// Run our render loop
run();
function run() {
// Render the scene
renderer.render( scene, camera );
// Spin the cube for next frame
if (animating) {
sphere1.rotation.y -= 0.01;
}
// Ask for another frame
requestAnimationFrame(run);
}
function addMouseHandler() {
var dom = renderer.domElement;
dom.addEventListener( 'mouseup', onMouseUp, false);
}
function onMouseUp (event) {
event.preventDefault();
animating = !animating;
}
}
</script>
</head>
<body onLoad="onLoad();" style="">
<center><h1>Welcome to WebGL!</h1></center>
<div id="container" style="width:95%; height:80%; position:absolute;">
</div>
<div id="prompt" style="width:95%; height:6%; bottom:0; position:absolute;">
Click to animate the cube
</div>
</body>
</html>