Qt 5.6 | Qt Canvas 3D | Interactive Mobile Phone Example | cellphone.js Example File

Qt 5.6.2 Reference Documentation

# cellphone.js Example File

threejs/cellphone/qml/cellphone/cellphone.js

      /****************************************************************************
      **
      ** Copyright (C) 2015 The Qt Company Ltd.
      ** Contact: http://www.qt.io/licensing/
      **
      ** This file is part of the QtCanvas3D module of the Qt Toolkit.
      **
      ** $QT_BEGIN_LICENSE:LGPL3$
      ** Commercial License Usage
      ** Licensees holding valid commercial Qt licenses may use this file in
      ** accordance with the commercial license agreement provided with the
      ** Software or, alternatively, in accordance with the terms contained in
      ** a written agreement between you and The Qt Company. For licensing terms
      ** and conditions see http://www.qt.io/terms-conditions. For further
      ** information use the contact form at http://www.qt.io/contact-us.
      **
      ** GNU Lesser General Public License Usage
      ** Alternatively, this file may be used under the terms of the GNU Lesser
      ** General Public License version 3 as published by the Free Software
      ** Foundation and appearing in the file LICENSE.LGPLv3 included in the
      ** packaging of this file. Please review the following information to
      ** ensure the GNU Lesser General Public License version 3 requirements
      ** will be met: https://www.gnu.org/licenses/lgpl.html.
      **
      ** GNU General Public License Usage
      ** Alternatively, this file may be used under the terms of the GNU
      ** General Public License version 2.0 or later as published by the Free
      ** Software Foundation and appearing in the file LICENSE.GPL included in
      ** the packaging of this file. Please review the following information to
      ** ensure the GNU General Public License version 2.0 requirements will be
      ** met: http://www.gnu.org/licenses/gpl-2.0.html.
      **
      ** $QT_END_LICENSE$
      **
      ****************************************************************************/

      Qt.include("three.js")

      var camera, scene, renderer, cubeCamera;
      var caseMesh, frontMesh, iconMesh;
      var caseColor = new THREE.Color("#000000");
      var meshesReady = false;
      var canvasTextureProvider = null;
      var zeroVector = new THREE.Vector3(0, 0, 0);
      var cameraLight;
      var sphereImage, iconImage;
      var caseMeshFile, frontMeshFile, iconMeshFile;

      function initializeGL(canvas, textureSource) {
          scene = new THREE.Scene();

          cubeCamera = new THREE.CubeCamera(5, 100, 512);
          cubeCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
          scene.add(cubeCamera);

          // Background sphere
          var sphere = new THREE.Mesh(
                      new THREE.SphereGeometry(40, 16, 16),
                      new THREE.MeshBasicMaterial());
          sphere.side = THREE.BackSide;
          sphere.scale.x = -1;
          scene.add(sphere);
          if (sphereImage) {
              var sphereTexture = THREE.ImageUtils.loadTexture(sphereImage, THREE.UVMapping, updateEnvMap);
              sphereTexture.minFilter = THREE.LinearFilter;
              sphere.material.map = sphereTexture;
          } else {
              sphere.material.color = new THREE.Color("black");
          }

          camera = new THREE.PerspectiveCamera( 75, canvas.width / canvas.height, 0.001, 1000 );

          var light = new THREE.AmbientLight( 0x666666 );
          scene.add( light );

          cameraLight = new THREE.DirectionalLight( 0xffffff, 1 );
          cameraLight.position.y = 1.5;
          scene.add( cameraLight );

          var caseMaterial = new THREE.MeshPhongMaterial({ envMap: cubeCamera.renderTarget,
                                                         combine: THREE.MultiplyOperation,
                                                         reflectivity: 0.35,
                                                         specular: "#555555" });
          var frontTexture = new THREE.QtQuickItemTexture( textureSource );
          var frontMaterial = new THREE.MeshPhongMaterial( { map: frontTexture } );

          var iconMaterial = new THREE.MeshPhongMaterial( { transparent:true } );
          if (iconImage) {
              var iconTexture = THREE.ImageUtils.loadTexture(iconImage);
              iconTexture.minFilter = THREE.LinearFilter;
              iconMaterial.map = iconTexture;
          } else {
              iconMaterial.opacity = 0;
          }

          renderer = new THREE.Canvas3DRenderer(
                      { canvas: canvas, antialias: true, devicePixelRatio: canvas.devicePixelRatio });
          renderer.setSize( canvas.width, canvas.height );

          // The cellphone meshes were created using a third party tool (Blender).
          // They were exported from Blender as Wavefront OBJ files and then converted into JSON format
          // using the OBJ -> JSON conversion script provided by three.js (convert_obj_three.py).
          var loader = new THREE.JSONLoader();
          loader.load( caseMeshFile, function ( geometry, materials ) {
              geometry.computeVertexNormals();
              var bufferGeometry = new THREE.BufferGeometry();
              bufferGeometry.fromGeometry(geometry);
              caseMesh = new THREE.Mesh( bufferGeometry, caseMaterial );
              if (iconMesh && frontMesh)
                  meshesReady = true;
              caseMesh.material.color = caseColor;
              updateEnvMap();
              scene.add( caseMesh );
          } );
          loader.load( frontMeshFile, function ( geometry, materials ) {
              var bufferGeometry = new THREE.BufferGeometry();
              bufferGeometry.fromGeometry(geometry);
              frontMesh = new THREE.Mesh( bufferGeometry, frontMaterial );
              if (iconMesh && caseMesh)
                  meshesReady = true;
              scene.add( frontMesh );
          } );
          loader.load( iconMeshFile, function ( geometry, materials ) {
              var bufferGeometry = new THREE.BufferGeometry();
              bufferGeometry.fromGeometry(geometry);
              iconMesh = new THREE.Mesh( bufferGeometry, iconMaterial );
              if (caseMesh && frontMesh)
                  meshesReady = true;
              scene.add( iconMesh );
          } );
      }

      function updateEnvMap() {
          if (caseMesh) {
              // Take a snapshot of the scene using cube camera to create environment map for case
              caseMesh.material.envMap = cubeCamera.renderTarget;
              cubeCamera.updateCubeMap(renderer, scene);
              caseMesh.material.needsUpdate = true;
          }
      }

      function setSphereTexture(image) {
          sphereImage = image;
      }

      function setIconTexture(image) {
          iconImage = image;
      }

      function setMeshFiles(caseFile, frontFile, iconFile) {
          caseMeshFile = caseFile;
          frontMeshFile = frontFile;
          iconMeshFile = iconFile;
      }

      function setCaseColor(color) {
          caseColor.set(color);
          if (caseMesh)
              caseMesh.material.color = caseColor;
      }

      function resizeGL(canvas) {
          camera.aspect = canvas.width / canvas.height;
          camera.updateProjectionMatrix();

          renderer.setPixelRatio(canvas.devicePixelRatio);
          renderer.setSize( canvas.width, canvas.height );
      }

      function degToRad(degrees) {
          return degrees * Math.PI / 180;
      }

      function paintGL(canvas) {
          if (meshesReady) {
              var cameraRad = degToRad(canvas.cameraAngle);
              var lightRad = cameraRad - 0.8;
              caseMesh.rotation.x = degToRad(canvas.xRotAnim);
              caseMesh.rotation.y = degToRad(canvas.yRotAnim);
              caseMesh.rotation.z = cameraRad + degToRad(canvas.zRotAnim);
              frontMesh.rotation.set(caseMesh.rotation.x, caseMesh.rotation.y, caseMesh.rotation.z);
              iconMesh.rotation.set(caseMesh.rotation.x, caseMesh.rotation.y, caseMesh.rotation.z);
              camera.position.x = canvas.distance * Math.sin(cameraRad);
              camera.position.z = canvas.distance * Math.cos(cameraRad);
              cameraLight.position.x = (canvas.distance + 2) * Math.sin(lightRad);
              cameraLight.position.z = (canvas.distance + 2) * Math.cos(lightRad);
              camera.lookAt(zeroVector);
          }

          renderer.render( scene, camera );

      }