1+ <!DOCTYPE html>
2+ < html >
3+ < head >
4+ < title > 3D CG Fundamentals Illustrations</ title >
5+ < script src ="three_min.js "> </ script >
6+ < script src ="OrbitControls.js "> </ script >
7+ < style >
8+
9+ </ style >
10+ </ head >
11+ < 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 ">
12+ < body >
13+ < div id ="Original " class ="p-20 w-25 bg-primary "> </ div >
14+ < div id ="Result "> </ div >
15+ < script >
16+ function init ( ) {
17+ var scene = new THREE . Scene ( ) ;
18+ var camera = new THREE . PerspectiveCamera ( 45 , window . innerWidth / window . innerHeight , 0.1 , 1000 ) ;
19+
20+ var renderer = new THREE . WebGLRenderer ( ) ;
21+ renderer . setClearColor ( new THREE . Color ( 0xEEEEEE ) ) ;
22+ renderer . setSize ( window . innerWidth , window . innerHeight ) ;
23+
24+ var controls = new THREE . OrbitControls ( camera , renderer . domElement ) ;
25+ controls . enableDamping = true ;
26+ controls . dampingFactor = 0.25 ;
27+ controls . enableZoom = true ;
28+
29+ // show axes in the screen
30+ var axes = new THREE . AxesHelper ( 40 ) ;
31+ scene . add ( axes ) ;
32+
33+ const geometry = new THREE . BoxGeometry ( 15 , 10 , 10 ) ;
34+ const material = new THREE . MeshBasicMaterial ( { color : 0x00FFFF } ) ;
35+ const cube = new THREE . Mesh ( geometry , material ) ;
36+ cube . position . x = 15 ;
37+ cube . position . y = 15 ;
38+ cube . position . z = 15 ;
39+ scene . add ( cube ) ;
40+
41+ camera . position . x = 30 ;
42+ camera . position . y = 40 ;
43+ camera . position . z = 100 ;
44+ camera . lookAt ( scene . position ) ;
45+
46+ document . getElementById ( "Original" ) . appendChild ( renderer . domElement ) ;
47+ document . getElementById ( "Result" ) . appendChild ( renderer . domElement ) ;
48+ renderer . render ( scene , camera ) ;
49+ animate ( ) ;
50+
51+ function animate ( )
52+ {
53+ controls . update ( ) ;
54+ requestAnimationFrame ( animate ) ;
55+ renderer . render ( scene , camera ) ;
56+ }
57+ }
58+ window . onload = init ;
59+ </ script >
60+ </ body >
61+ </ html >
0 commit comments