Skip to content

Commit a226886

Browse files
yousef-asfanyousef-asfan
committed
Initial commit
0 parents  commit a226886

File tree

7 files changed

+1090
-0
lines changed

7 files changed

+1090
-0
lines changed

‎.gitattributes

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>wepApplication</title>
7+
</head>
8+
<body>
9+
<div class="divApp">
10+
<canvas id="c1" class="cc1"></canvas>
11+
<canvas id="c2" class="cc2"></canvas>
12+
<!-- <canvas id="multiScene2" class="divApp"></canvas> -->
13+
</div>
14+
<script type="module" src="/main.js"></script>
15+
</body>
16+
</html>

‎main.js

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import './style.css'
2+
import * as THREE from 'three';
3+
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
4+
5+
const scene1 = new THREE.Scene();
6+
const canvas1 = document.getElementById('c1');
7+
8+
let sizeWidth1 = canvas1.clientWidth;
9+
let sizeHeight1 = canvas1.clientHeight;
10+
11+
const camera1 = new THREE.PerspectiveCamera(75, sizeWidth1 / sizeHeight1, 0.1, 1000)
12+
13+
const renderer1 = new THREE.WebGLRenderer({
14+
canvas: canvas1,
15+
antialias: true
16+
});
17+
renderer1.setPixelRatio(Math.min(window.devicePixelRatio, 2));
18+
renderer1.setSize(sizeWidth1 , sizeHeight1);
19+
renderer1.setClearColor( 0x1b1b1b, 1);
20+
21+
camera1.position.set(6, 4, 0);
22+
scene1.add(camera1);
23+
24+
const controls1 = new OrbitControls(camera1, canvas1);
25+
controls1.target.set(0, 2.5, 0);
26+
controls1.maxDistance = 12;
27+
controls1.minDistance = 5;
28+
controls1.enablePan = false;
29+
30+
const gridHelper1 = new THREE.GridHelper(10,10);
31+
scene1.add(gridHelper1);
32+
33+
const cube1 = new THREE.Mesh(
34+
new THREE.BoxGeometry(1,1,1),
35+
new THREE.MeshBasicMaterial({color:0xff00ff})
36+
);
37+
scene1.add(cube1);
38+
39+
/**
40+
*
41+
*
42+
*
43+
*
44+
*
45+
*/
46+
47+
const scene2 = new THREE.Scene();
48+
const canvas2 = document.getElementById('c2');
49+
50+
let sizeWidth2 = canvas2.clientWidth;
51+
let sizeHeight2 = canvas2.clientHeight;
52+
53+
const camera2 = new THREE.PerspectiveCamera(75, sizeWidth2 / sizeHeight2, 0.1, 1000)
54+
55+
const renderer2 = new THREE.WebGLRenderer({
56+
canvas: canvas2,
57+
antialias: true
58+
});
59+
renderer2.setPixelRatio(Math.min(window.devicePixelRatio, 2));
60+
renderer2.setSize(sizeWidth2 , sizeHeight2);
61+
renderer2.setClearColor( 0x1b1b1b, 1);
62+
63+
camera2.position.set(6, 4, 0);
64+
scene2.add(camera2);
65+
66+
const controls2 = new OrbitControls(camera2, canvas2);
67+
controls2.target.set(0, 2.5, 0);
68+
controls2.maxDistance = 12;
69+
controls2.minDistance = 5;
70+
controls2.enablePan = false;
71+
72+
const gridHelper2 = new THREE.GridHelper(10,10);
73+
scene2.add(gridHelper2);
74+
75+
const cube2 = new THREE.Mesh(
76+
new THREE.BoxGeometry(1,1,1),
77+
new THREE.MeshBasicMaterial({color:0x0000ff})
78+
);
79+
scene2.add(cube2);
80+
81+
/**
82+
*
83+
*
84+
*
85+
*
86+
*
87+
*/
88+
89+
const tick = () => {
90+
controls1.update();
91+
renderer1.render(scene1, camera1);
92+
controls2.update();
93+
renderer2.render(scene2, camera2);
94+
window.requestAnimationFrame(tick);
95+
}
96+
tick();
97+
98+
99+
/**
100+
* LICENSE CREDIT
101+
*
102+
* ASFAN Internatioal Trading Company
103+
*
104+
* "MatCaps" (https://github.com/nidorx/matcaps/blob/master/thumbnail/AC171C_FA8593_E84854_D3464E.jpg) Matcaps by nidorx github (https://github.com/nidorx)
105+
* "MatCaps" (https://github.com/nidorx/matcaps/blob/master/thumbnail/9F1A27_F1AF7F_CD5845_D08441.jpg) Matcaps by nidorx github (https://github.com/nidorx)
106+
* "MatCaps" (https://github.com/nidorx/matcaps/blob/master/thumbnail/7877EE_D87FC5_75D9C7_1C78C0.jpg) Matcaps by nidorx github (https://github.com/nidorx)
107+
*/

0 commit comments

Comments
 (0)