HOME  >   HTML5 CANVAS  >   How WebGL and Canvas Realize Visualized 3D Aircraft Model Structure
How WebGL and Canvas Realize Visualized 3D Aircraft Model Structure
BY Scott13 Nov,2020

Today I will share with you a 3D model structure based on HTML5 Canavs and WebGL, which is a visual 3D aircraft model structure that can be previewed at 360 degrees. We can customize different angles to observe the aircraft model by dragging the mouse, or click the button to observe the specific parts of the aircraft in detail. At the same time, we can also use the mouse wheel to zoom in and out of the airplane.


How WebGL and Canvas Realize Visualized 3D Aircraft Model Structure
HTML Body Code
<div id="content">

    <div id="paint"></div>

    <div id="wrapper">
      <div class="flex">

        <div id="controls">
          <button class="one">Business class</button>
          <button class="two">Ahead of wing</button>
          <button class="three">Over the wing</button>
          <button class="four">Rear cabin</button>
          <label class="option">360 view<input type="checkbox" id="myCheck"></label>

Css Code
*:after {
  box-sizing: inherit;

h1 {
  font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial,
  font-size: 40px;
  line-height: 1;

h3 {
  font-weight: lighter;

section {
  color: white;
  padding: 50px 25px;

p {
  color: rgba(255, 255, 255, 0.5);

a {
  color: white;

span {
  font-weight: bold;
  font-size: 20px;
Js Code
var container = document.getElementById('paint');
    var renderer = new THREE.WebGLRenderer({antialiase:true});
    renderer.setSize(container.getBoundingClientRect().width, container.getBoundingClientRect().height);
    renderer.setClearColor(0x151515, 1);

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, container.getBoundingClientRect().width / container.getBoundingClientRect().height, 1, 10000);

    window.addEventListener("resize", function() {
      let width = container.getBoundingClientRect().width;
      let height = container.getBoundingClientRect().height;
      renderer.setSize(width, height);
      camera.aspect = width / height;

    var plane = new THREE.GridHelper(150, 50);
    plane.material.color = new THREE.Color('gray');

    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.25;
    controls.enableZoom = true;
    controls.maxPolarAngle = Math.PI / 2.1;