Skip to content

Commit 8f8ce1e

Browse files
openalgorithmdevelopersopenalgorithmdevelopers
committed
added few more codes
1 parent 13bb3bf commit 8f8ce1e

File tree

9 files changed

+54819
-0
lines changed

9 files changed

+54819
-0
lines changed

‎Book example codes/Chapter 9/GLTFLoader.js

Lines changed: 4311 additions & 0 deletions
Large diffs are not rendered by default.

‎Book example codes/Chapter 9/animation.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>THREE JS Animation Code</title>
5+
<script src="three2.js"></script>
6+
<style>
7+
body {
8+
margin: 0;
9+
overflow: hidden;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<!-- Div which will hold the Output -->
15+
<div id="canvas">
16+
</div>
17+
<script>
18+
// Once everything is set, here comes the THREE JS code
19+
function init() {
20+
// create a scene, that will hold all our elements such as objects, cameras and lights.
21+
var scene = new THREE.Scene();
22+
// create a camera, which defines where we're looking at.
23+
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
24+
// create a render and set the size
25+
var renderer = new THREE.WebGLRenderer();
26+
//renderer.setClearColorHex();
27+
renderer.setClearColor(new THREE.Color(0xEEEEEE));
28+
renderer.setSize(window.innerWidth, window.innerHeight);
29+
// show axes in the screen
30+
var axes = new THREE.AxisHelper(40);
31+
scene.add(axes);
32+
33+
// create the ground plane
34+
var planeGeometry = new THREE.PlaneGeometry(30, 20);
35+
var planeMaterial = new THREE.MeshBasicMaterial({color: 0x00FF00});
36+
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
37+
// rotate and position the plane
38+
plane.rotation.x = -0.5 * Math.PI;
39+
plane.position.x = 0;
40+
plane.position.y = -5;
41+
plane.position.z = 0;
42+
// add the plane to the scene
43+
scene.add(plane);
44+
45+
// create a sphere
46+
var torusGeometry = new THREE.TorusGeometry(5, 3, 16, 100)
47+
var torusMaterial = new THREE.MeshBasicMaterial({color: 0xFF0000, wireframe: true});
48+
var torus = new THREE.Mesh(torusGeometry, torusMaterial);
49+
// position the sphere
50+
torus.position.x = 0;
51+
torus.position.y = 10;
52+
torus.position.z = 0;
53+
// add the sphere to the scene
54+
scene.add(torus);
55+
56+
// position and point the camera to the center of the scene
57+
camera.position.x = -30;
58+
camera.position.y = 40;
59+
camera.position.z = 30;
60+
camera.lookAt(scene.position);
61+
62+
// add the output of the renderer to the html element
63+
document.getElementById("canvas").appendChild(renderer.domElement);
64+
65+
function loop(){
66+
torus.rotation.y += 0.01;
67+
requestAnimationFrame(loop);
68+
renderer.render(scene, camera);
69+
}
70+
loop();
71+
}
72+
window.onload = init;
73+
</script>
74+
</body>
75+
</html>

‎Book example codes/Chapter 9/drone_gltf.glb

434 KB
Binary file not shown.

‎Book example codes/Chapter 9/earth_texture.jpg

452 KB
Loading

‎Book example codes/Chapter 9/external_object.html

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>THREE JS Animation Code</title>
5+
<script src="three2.js"></script>
6+
<script src="GLTFLoader.js"></script>
7+
<style>
8+
body {
9+
margin: 0;
10+
overflow: hidden;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<!-- Div which will hold the Output -->
16+
<div id="canvas">
17+
</div>
18+
<script>
19+
// Once everything is set, here comes the THREE JS code
20+
function init() {
21+
// create a scene, that will hold all our elements such as objects, cameras and lights.
22+
var scene = new THREE.Scene();
23+
// create a camera, which defines where we're looking at.
24+
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
25+
// create a render and set the size
26+
var renderer = new THREE.WebGLRenderer();
27+
//renderer.setClearColorHex();
28+
renderer.setClearColor(new THREE.Color(0xEEEEEE));
29+
renderer.setSize(window.innerWidth, window.innerHeight);
30+
// show axes in the screen
31+
var axes = new THREE.AxisHelper(40);
32+
scene.add(axes);
33+
34+
// create the ground plane
35+
var planeGeometry = new THREE.PlaneGeometry(30, 20);
36+
var planeMaterial = new THREE.MeshBasicMaterial({color: 0x00FF00});
37+
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
38+
// rotate and position the plane
39+
plane.rotation.x = -0.5 * Math.PI;
40+
plane.position.x = 0;
41+
plane.position.y = -5;
42+
plane.position.z = 0;
43+
// add the plane to the scene
44+
scene.add(plane);
45+
46+
// create a sphere
47+
var torusGeometry = new THREE.TorusGeometry(5, 3, 16, 100)
48+
var torusMaterial = new THREE.MeshBasicMaterial({color: 0xFF0000, wireframe: true});
49+
var torus = new THREE.Mesh(torusGeometry, torusMaterial);
50+
// position the sphere
51+
torus.position.x = 0;
52+
torus.position.y = 10;
53+
torus.position.z = 0;
54+
// add the sphere to the scene
55+
scene.add(torus);
56+
57+
var loader = new THREE.GLTFLoader();
58+
var material = new THREE.MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 200 } );
59+
60+
loader.load( 'drone_gltf.gltf', function ( geometry ) {
61+
var mesh = new THREE.Mesh( geometry, material );
62+
mesh.position.set( 0, 0, 0 );
63+
//mesh.rotation.set( - Math.PI / 2, 0, 0 );
64+
mesh.scale.set( 2, 2, 2 );
65+
mesh.castShadow = true;
66+
mesh.receiveShadow = true;
67+
scene.add( mesh );
68+
} );
69+
// position and point the camera to the center of the scene
70+
camera.position.x = -30;
71+
camera.position.y = 40;
72+
camera.position.z = 30;
73+
camera.lookAt(scene.position);
74+
75+
// add the output of the renderer to the html element
76+
document.getElementById("canvas").appendChild(renderer.domElement);
77+
78+
function loop(){
79+
torus.rotation.y += 0.01;
80+
requestAnimationFrame(loop);
81+
renderer.render(scene, camera);
82+
}
83+
loop();
84+
}
85+
window.onload = init;
86+
</script>
87+
</body>
88+
</html>

‎Book example codes/Chapter 9/first.html

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>THREE JS Basic Example Code</title>
5+
<script src="three2.js"></script>
6+
<style>
7+
body {
8+
margin: 0;
9+
overflow: hidden;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<!-- Div which will hold the Output -->
15+
<div id="canvas">
16+
</div>
17+
<script>
18+
// Once everything is set, here comes the THREE JS code
19+
function init() {
20+
// create a scene, that will hold all our elements such as objects, cameras and lights.
21+
var scene = new THREE.Scene();
22+
// create a camera, which defines where we're looking at.
23+
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
24+
// create a render and set the size
25+
var renderer = new THREE.WebGLRenderer();
26+
//renderer.setClearColorHex();
27+
renderer.setClearColor(new THREE.Color(0xEEEEEE));
28+
renderer.setSize(window.innerWidth, window.innerHeight);
29+
// show axes in the screen
30+
var axes = new THREE.AxisHelper(40);
31+
scene.add(axes);
32+
33+
// create the ground plane
34+
var planeGeometry = new THREE.PlaneGeometry(30, 20);
35+
var planeMaterial = new THREE.MeshBasicMaterial({color: 0x00FF00});
36+
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
37+
// rotate and position the plane
38+
plane.rotation.x = -0.5 * Math.PI;
39+
plane.position.x = 0;
40+
plane.position.y = -5;
41+
plane.position.z = 0;
42+
// add the plane to the scene
43+
scene.add(plane);
44+
45+
// create a sphere
46+
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
47+
// var sphereGeometry = new THREE.CylinderGeometry(5, 5, 20);
48+
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0xFF0000, wireframe: true});
49+
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
50+
// position the sphere
51+
sphere.position.x = 0;
52+
sphere.position.y = 10;
53+
sphere.position.z = 0;
54+
// add the sphere to the scene
55+
scene.add(sphere);
56+
57+
// position and point the camera to the center of the scene
58+
camera.position.x = -30;
59+
camera.position.y = 40;
60+
camera.position.z = 30;
61+
camera.lookAt(scene.position);
62+
63+
// add the output of the renderer to the html element
64+
document.getElementById("canvas").appendChild(renderer.domElement);
65+
// render the scene
66+
renderer.render(scene, camera);
67+
}
68+
window.onload = init;
69+
</script>
70+
</body>
71+
</html>

‎Book example codes/Chapter 9/lights.html

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>THREE JS Animation Code</title>
5+
<script src="three2.js"></script>
6+
<style>
7+
body {
8+
margin: 0;
9+
overflow: hidden;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<!-- Div which will hold the Output -->
15+
<div id="canvas">
16+
</div>
17+
<script>
18+
// Once everything is set, here comes the THREE JS code
19+
function init() {
20+
// create a scene, that will hold all our elements such as objects, cameras and lights.
21+
var scene = new THREE.Scene();
22+
// create a camera, which defines where we're looking at.
23+
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
24+
// create a render and set the size
25+
var renderer = new THREE.WebGLRenderer();
26+
//renderer.setClearColorHex();
27+
// renderer.setClearColor(new THREE.Color(0xEEEEEE));
28+
renderer.setSize(window.innerWidth, window.innerHeight);
29+
// show axes in the screen
30+
var axes = new THREE.AxisHelper(40);
31+
scene.add(axes);
32+
33+
//Lets add a point light in the scene
34+
const light = new THREE.PointLight( 0xff0000, 500, 50 );
35+
light.position.set( 0, 10, 10 );
36+
scene.add( light );
37+
38+
//Lets add Ambient Light to the scene
39+
const light2 = new THREE.AmbientLight( 0x404040 ); // soft white light
40+
scene.add( light2 );
41+
// create the ground plane
42+
var planeGeometry = new THREE.PlaneGeometry(30, 20);
43+
var planeMaterial = new THREE.MeshBasicMaterial({color: 0x00FF00});
44+
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
45+
// rotate and position the plane
46+
plane.rotation.x = -0.5 * Math.PI;
47+
plane.position.x = 0;
48+
plane.position.y = -5;
49+
plane.position.z = 0;
50+
// add the plane to the scene
51+
scene.add(plane);
52+
53+
// create a sphere
54+
var torusGeometry = new THREE.TorusGeometry(5, 3, 16, 100)
55+
var torusMaterial = new THREE.MeshPhongMaterial({color: 0xFF0000, wireframe: true});
56+
var torus = new THREE.Mesh(torusGeometry, torusMaterial);
57+
// position the sphere
58+
torus.position.x = 0;
59+
torus.position.y = 10;
60+
torus.position.z = 0;
61+
// add the sphere to the scene
62+
scene.add(torus);
63+
64+
// position and point the camera to the center of the scene
65+
camera.position.x = -30;
66+
camera.position.y = 40;
67+
camera.position.z = 30;
68+
camera.lookAt(scene.position);
69+
70+
// add the output of the renderer to the html element
71+
document.getElementById("canvas").appendChild(renderer.domElement);
72+
73+
function loop(){
74+
torus.rotation.y += 0.01;
75+
requestAnimationFrame(loop);
76+
renderer.render(scene, camera);
77+
}
78+
loop();
79+
}
80+
window.onload = init;
81+
</script>
82+
</body>
83+
</html>

0 commit comments

Comments
 (0)