-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
124 lines (98 loc) · 3.27 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Environment Map</title>
<style>
html, body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<script src="three.min.js"></script>
<script>
// create and set up the scene, etc
var width = window.innerWidth;
var height = window.innerHeight;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(35, width / height, 1, 1500);
var renderer = new THREE.WebGLRenderer({antialias:true});
var time = 0;
var ORIGIN = new THREE.Vector3()
// urls of the images,
// one per half axis
var urls = [
'skybox/px.jpg',
'skybox/nx.jpg',
'skybox/py.jpg',
'skybox/ny.jpg',
'skybox/pz.jpg',
'skybox/nz.jpg'
];
// wrap it up into the object that we need
var textureCube = new THREE.CubeTextureLoader().load( urls );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
// following code from https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_cubemap.html
var shader = THREE.ShaderLib [ "cube" ];
var material = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide
} );
var skybox = new THREE.Mesh( new THREE.BoxGeometry( 1000, 1000, 1000 ), material );
var ambient = new THREE.AmbientLight( 0xffffff );
scene.add(ambient);
var pointLight = new THREE.PointLight( 0xffffff, 2 );
scene.add( pointLight );
var reflectionMaterial = new THREE.MeshBasicMaterial({
color: 0xcccccc,
envMap: textureCube
});
var torus = new THREE.Mesh(
new THREE.TorusKnotGeometry(60,20,100),
reflectionMaterial
);
scene.add(torus);
scene.add(camera);
scene.add(skybox);
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
document.addEventListener( 'mousemove', onMouseMove );
camera.position.x = 0;
camera.position.z = 600;
camera.lookAt(ORIGIN);
function onMouseMove( event ) {
// the mouse current position
var mouseX = event.clientX;
var mouseY = event.clientY;
// the middle of the screen
var midpointX = window.innerWidth / 2;
var midpointY = window.innerHeight / 2;
// offset from center
var movementX = mouseX - midpointX;
var movementY = mouseY - midpointY;
camera.rotation.y = (movementX*-0.001);
camera.rotation.x = (movementY*-0.001);
// do something to pan around
}
function animate() {
time += 0.005;
torus.rotation.x += 0.005;
torus.rotation.y += 0.005;
torus.rotation.z += 0.005;
/*
camera.position.x = 400;
camera.position.z = 400;
camera.lookAt(ORIGIN);
*/
renderer.render(scene,camera);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
</script>
</body>
</html>