Home

Selforganizology, 2028, 15(1-2): 21-53
[XML] [EndNote] [RefManager] [BibTex] [ Full PDF (405K)][Online 3D Visualizer][Offline 3D Visualizer] [Comment/Review Article]

Article

A browser-based interactive 3D visualizer for molecular and object structures

WenJun Zhang
School of Life Sciences, Sun Yat-sen University, Guangzhou 510275, China; International Academy of Ecology and Environmental Sciences, Hong Kong

Received 30 June 2026;Accepted 12 July 2026;Published online 30 July 2026;Published 1 June 2028
IAEES

Abstract
This paper presents a lightweight, browser-based interactive 3D visualizer for molecular and geometric object structures. The system is implemented as a standalone HTML, CSS, and JavaScript application and requires no external libraries, server-side computation, or WebGL support. It supports two common structural data formats: XYZ files for molecular coordinates and OBJ files for polygonal object geometry. XYZ data are rendered as depth-sorted shaded atomic spheres with element-dependent colors, while OBJ data are rendered as grayscale depth-enhanced wireframe models. The visualization pipeline is based on a custom affine 3D transformation matrix that supports scaling, translation, rotation, zooming, panning, and orthographic projection onto an HTML5 canvas. Users can interact with the model through mouse-based rotation, click or wheel-based zooming, slider-based panning, view resetting, and PNG image export. The program demonstrates how fundamental 3D visualization functions can be implemented using only the 2D canvas API, making it suitable for education, rapid structural inspection, and lightweight scientific visualization. Although the current implementation does not include advanced features such as molecular bond detection, perspective projection, hidden-line removal, or material-based OBJ rendering, it provides a compact and extensible framework for interactive visualization of molecular and object structures in standard web environments.

Keywords 3D visualization;interactive browser-based tool;molecular structure;3D object;XYZ file;OBJ file.


International Academy of Ecology and Environmental Sciences. E-mail: office@iaees.org
Copyright © 2009-2026 International Academy of Ecology and Environmental Sciences. All rights reserved.
Web administrator: office@iaees.org, website@iaees.org; Last modified: 2026/8/10


Translate page to: