-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbackgroundImageAndMaths.html
95 lines (78 loc) · 2.56 KB
/
backgroundImageAndMaths.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Wrapping: Cube</title>
</head>
<body>
<script src="js/three.min.js"></script>
<script>
var camera, scene, renderer, cube,
lat = 0, lon = 90,
cubeCam, camScene,
camTarget = new THREE.Vector3();
var texture = THREE.ImageUtils.loadTexture('textures/cityscape.jpg', new THREE.UVMapping(), function(){
init();
animate();
});
function init() {
scene = new THREE.Scene();
camScene = new THREE.Scene();
cube = new THREE.Mesh(new THREE.BoxGeometry(2,2,2), new THREE.MeshLambertMaterial(0xffff55));
scene.add(cube);
camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.5, 3000000 );
camera.position.z = 10;
camera.lookAt(cube.position);
//
cubeCam = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.5, 3000000);
cubeCam.position.z = -10;
cubeCam.lookAt(cube);
camScene.add(cubeCam);
var light = new THREE.AmbientLight(0xA689CC);
scene.add(light);
directionalLight = new THREE.DirectionalLight(0xffffff, .7);
directionalLight.position.set( 2, 5, 15 );
scene.add( directionalLight );
//creating mesh for image
var mesh = new THREE.Mesh(new THREE.SphereGeometry(100, 10, 10), new THREE.MeshBasicMaterial({map: texture}));
//scales image on mesh
mesh.scale.x = -1;
mesh.scale.y = 1;
camScene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
//rotation speed of camera
var rotSpeed = .05;
var bgSpeed = 0.05;
lon += .1;
//old camera coordinates
var x = camera.position.x,
z = camera.position.z;
lat = Math.max(-85, Math.min(85, lat));
var theta = THREE.Math.degToRad(lon);
var phi = THREE.Math.degToRad(90 - lat);
var radius = 2;
//move camera around cube
camera.position.x = x * Math.cos(rotSpeed) + z * Math.sin(rotSpeed);
camera.position.z = z * Math.cos(rotSpeed) - x * Math.sin(rotSpeed);
//move target for camera to give bg moving illusion
camTarget.x = 100 * Math.sin(phi) * Math.cos(theta);
camTarget.y = 100 * Math.cos(phi);
camTarget.z = 100 * Math.sin( phi ) * Math.sin( theta );
camera.lookAt(cube.position);
cubeCam.lookAt(camTarget);
render();
}
function render() {
renderer.autoClear = false;
renderer.clear();
renderer.render(camScene, cubeCam);
renderer.render( scene, camera );
}
</script>
</body>
</html>