Skip to content

Commit 11ab6ea

Browse files
openalgorithmdevelopersopenalgorithmdevelopers
committed
standard rotation demo with THREE JS ready
1 parent 19cdcb3 commit 11ab6ea

File tree

1 file changed

+75
-15
lines changed

1 file changed

+75
-15
lines changed

‎Computer Graphics/3D_illustrations_THREE_JS.HTML

Lines changed: 75 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
<!--
2+
11-March-22 ! Bhupendra Singh ! CG Illustration for Standard Rotation.
3+
-->
14
<!DOCTYPE html>
25
<html>
36
<head>
@@ -10,49 +13,106 @@
1013
</head>
1114
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
1215
<body>
13-
<div id="Original" class="p-20 w-25 bg-primary"></div>
14-
<div id="Result"></div>
16+
<div class="body">
17+
<div id="header">
18+
<!-- <nav class="navbar navbar-expand-lg navbar-light bg-light">
19+
<a class="navbar-brand h1" href="#">Computer Graphics Fundamentals Illustrations</a>
20+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
21+
<span class="navbar-toggler-icon"></span>
22+
</button>
23+
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
24+
<div class="navbar-nav">
25+
<a class="nav-item nav-link active" href="#">To be added <span class="sr-only">(current)</span></a>
26+
<a class="nav-item nav-link" href="#">To be added</a>
27+
<a class="nav-item nav-link disabled" href="#">Disabled</a>
28+
</div>
29+
</div>
30+
</nav> -->
31+
</div>
32+
<div id="WebGL_output" class="container">
33+
<div class="row col-lg-12 h1 text-center font-weight-bold text-info">
34+
<b>Standard Rotations in Computer Graphics Fundamentals</b>
35+
</div>
36+
<div class="row">
37+
<div id="Original" class="col-lg-6 h1 text-primary text-center font-weight-bold">Original Geometry.</div>
38+
<div id="Result1" class="col-lg-6 h1 text-success text-center font-weight-bold">After Rotation around X.</div>
39+
</div>
40+
<div class="row">
41+
<div id="Result2" class="col-lg-6 h1 text-success text-center font-weight-bold">After Rotation around Y.</div>
42+
<div id="Result3" class="col-lg-6 h1 text-success text-center font-weight-bold">After Rotation around Z.</div>
43+
</div>
44+
</div>
45+
</div>
1546
<script>
1647
function init() {
1748
var scene = new THREE.Scene();
18-
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
49+
//var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
50+
const camera = new THREE.OrthographicCamera( window.innerHeight / - 20, window.innerHeight / 20, window.innerHeight / 20, window.innerHeight / - 20, 1, 100 );
1951

2052
var renderer = new THREE.WebGLRenderer();
21-
renderer.setClearColor(new THREE.Color(0xEEEEEE));
22-
renderer.setSize(window.innerWidth, window.innerHeight);
53+
renderer.setClearColor(new THREE.Color(0x000000));
54+
renderer.setSize(window.innerWidth*0.4, window.innerHeight*0.6);
55+
56+
var renderer2 = new THREE.WebGLRenderer();
57+
renderer2.setClearColor(new THREE.Color(0x000000));
58+
renderer2.setSize(window.innerWidth*0.4, window.innerHeight*0.6);
59+
60+
var renderer3 = new THREE.WebGLRenderer();
61+
renderer3.setClearColor(new THREE.Color(0x000000));
62+
renderer3.setSize(window.innerWidth*0.4, window.innerHeight*0.6);
63+
64+
var renderer4 = new THREE.WebGLRenderer();
65+
renderer4.setClearColor(new THREE.Color(0x000000));
66+
renderer4.setSize(window.innerWidth*0.4, window.innerHeight*0.6);
2367

2468
var controls = new THREE.OrbitControls(camera, renderer.domElement);
2569
controls.enableDamping = true;
2670
controls.dampingFactor = 0.25;
2771
controls.enableZoom = true;
2872

29-
// show axes in the screen
30-
var axes = new THREE.AxesHelper(40);
73+
var axes = new THREE.AxesHelper(60);
3174
scene.add(axes);
3275

33-
const geometry = new THREE.BoxGeometry( 15, 10, 10 );
76+
const geometry = new THREE.BoxGeometry( 20, 5, 15 );
3477
const material = new THREE.MeshBasicMaterial( {color: 0x00FFFF} );
3578
const cube = new THREE.Mesh( geometry, material );
36-
cube.position.x = 15;
37-
cube.position.y = 15;
38-
cube.position.z = 15;
79+
cube.position.x = 0;
80+
cube.position.y = 0;
81+
cube.position.z = 0;
3982
scene.add( cube );
4083

4184
camera.position.x = 30;
4285
camera.position.y = 40;
43-
camera.position.z = 100;
86+
camera.position.z = 80;
4487
camera.lookAt(scene.position);
4588

4689
document.getElementById("Original").appendChild(renderer.domElement);
47-
document.getElementById("Result").appendChild(renderer.domElement);
48-
renderer.render(scene, camera);
90+
document.getElementById("Result1").appendChild(renderer2.domElement);
91+
document.getElementById("Result2").appendChild(renderer3.domElement);
92+
document.getElementById("Result3").appendChild(renderer4.domElement);
93+
4994
animate();
50-
95+
var angle = 0;
96+
var xRotation, yRotation, zRotation;
5197
function animate()
5298
{
99+
angle += 0.1;
53100
controls.update();
54101
requestAnimationFrame ( animate );
55102
renderer.render (scene, camera);
103+
104+
cube.rotation.x = angle;
105+
renderer2.render (scene, camera);
106+
107+
cube.rotation.x = 0;
108+
cube.rotation.y = angle;
109+
renderer3.render (scene, camera);
110+
111+
cube.rotation.y = 0;
112+
cube.rotation.z = angle;
113+
renderer4.render (scene, camera);
114+
115+
cube.rotation.z = 0;
56116
}
57117
}
58118
window.onload = init;

0 commit comments

Comments
 (0)