Skip to content

Commit 3503191

Browse files
agviegasagviegas
committed
Let viewer accept HTMLCanvasElement as input
1 parent 5b331df commit 3503191

File tree

5 files changed

+20
-16
lines changed

5 files changed

+20
-16
lines changed

‎examples/simple-html/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</head>
1313
<body>
1414
<aside class="side-menu" id="side-menu-left"></aside>
15-
<div id="viewer-container" style='width: 100vw; height: 100vh'></div>
15+
<canvas id="viewer-container" style='width: 100vw; height: 100vh'></canvas>
1616
<script type="module" src="./build/main.js"></script>
1717
</body>
1818
</html>

‎examples/simple-html/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "web-ifc-viewer-basic-example",
33
"private": true,
44
"type": "module",
5-
"version": "1.0.8",
5+
"version": "1.0.9",
66
"description": "A basic html example for web-ifc-viewer",
77
"main": "index.html",
88
"scripts": {

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "web-ifc-viewer-root",
33
"description": "IFC viewer",
4-
"version": "1.0.8",
4+
"version": "1.0.9",
55
"private": true,
66
"author": "agviegas",
77
"license": "MIT",

‎viewer/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "web-ifc-viewer",
3-
"version": "1.0.8",
3+
"version": "1.0.9",
44
"description": "IFC viewer",
55
"main": "dist/index.js",
66
"scripts": {

‎viewer/src/core/viewer.ts‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,23 +38,27 @@ export class Viewer {
3838

3939
const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
4040
this.camera = camera;
41-
42-
const renderer = new THREE.WebGLRenderer({ antialias: true });
43-
container.appendChild(renderer.domElement);
44-
this.renderer = renderer;
41+
42+
if (container instanceof HTMLCanvasElement) {
43+
const canvas = container as HTMLCanvasElement;
44+
this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
45+
} else {
46+
this.renderer = new THREE.WebGLRenderer({antialias: true});
47+
container.appendChild(this.renderer.domElement);
48+
}
4549

4650
const clock = new THREE.Clock(true);
4751
this.clock = clock;
4852

49-
const controls = new OrbitControls(camera, renderer.domElement);
53+
const controls = new OrbitControls(camera, this.renderer.domElement);
5054
this.controls = controls;
5155

5256
//Scene
5357
scene.background = options?.backgroundColor || new THREE.Color(0xa9a9a9);
5458

5559
//Renderer
56-
renderer.setSize(width, height);
57-
renderer.localClippingEnabled = true;
60+
this.renderer.setSize(width, height);
61+
this.renderer.localClippingEnabled = true;
5862

5963
//Camera
6064
camera.position.z = 8;
@@ -80,10 +84,10 @@ export class Viewer {
8084
scene.add(ambientLight);
8185

8286
//Mouse position
83-
renderer.domElement.onmousemove = (event: MouseEvent) => {
84-
const rect = renderer.domElement.getBoundingClientRect();
85-
this.mouse.x = ((event.clientX - rect.left) / renderer.domElement.clientWidth) * 2 - 1;
86-
this.mouse.y = -((event.clientY - rect.top) / renderer.domElement.clientHeight) * 2 + 1;
87+
this.renderer.domElement.onmousemove = (event: MouseEvent) => {
88+
const rect = this.renderer.domElement.getBoundingClientRect();
89+
this.mouse.x = ((event.clientX - rect.left) / this.renderer.domElement.clientWidth) * 2 - 1;
90+
this.mouse.y = -((event.clientY - rect.top) / this.renderer.domElement.clientHeight) * 2 + 1;
8791
};
8892

8993
//Window resize support
@@ -92,7 +96,7 @@ export class Viewer {
9296
const height = container.clientHeight
9397
camera.aspect = width / height;
9498
camera.updateProjectionMatrix();
95-
renderer.setSize(width, height);
99+
this.renderer.setSize(width, height);
96100
});
97101

98102
this.render();

0 commit comments

Comments
 (0)