You need to create two files into your folder and use this filename: index.html and starfield.js.
First file index.html has this source code:

XHTML
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>WebGL Tunnel</title>
</head>
<body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script>
  <script  src="starfield.js"></script>
</body>
</html>

The next file is a javascript has this source code:

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
var mouseX = 0, mouseY = 0;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var cubecam = new THREE.CubeCamera(0.1, 120, 256);
// mipmap filter
cubecam.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
scene.add(cubecam);
 
var renderer = new THREE.WebGLRenderer({ antialias: true });
// background
renderer.setClearColor( 0x000000, 0 );
 
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
camera.position.z = -110;
camera.lookAt(scene.position);
 
// mesh group to add objects
var group = new THREE.Group();
scene.add(group);
 
// add lights
var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );
 
var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.set( 0, 0, 1 );
scene.add( directionalLight );
 
//make starfield
var geometry = new THREE.Geometry();
for (i = 0; i < 1000; i++) {
  var vertex = new THREE.Vector3();
  vertex.x = Math.random()*1000-500;
  vertex.y = Math.random()*1000-500;
  vertex.z = Math.random()*1000-500;
  geometry.vertices.push(vertex);
}
var starField = new THREE.PointCloud(geometry, new THREE.PointCloudMaterial({
  size: 0.1,
  color: 0xffffff
  })
);
scene.add(starField);
starField.position.z = 100;
 
var time = new THREE.Clock();
 
var render = function () {
  camera.position.x = mouseX * 0.5;
  camera.position.y = -mouseY * 0.5;
  camera.lookAt(scene.position);
 
  starField.rotation.z += 0.0005;
 
  starField.material.color.setHSL(0, 1, 1);
 
 
  cubecam.updateCubeMap( renderer, scene );
 
 
  renderer.render(scene, camera);
  requestAnimationFrame(render);
};
 
render();
 
// use mouse and resize events
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener('resize', onWindowResize, false);
 
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
 
function onDocumentMouseMove( event ) {
  mouseX = event.clientX - window.innerWidth/2;
  mouseY = event.clientY - window.innerHeight/2;
}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.