What Is X3D Modelling? And How To Do It?

What is X3D modelling and why should we care?

3D object visualisation has a reputation of being expensive, time consuming and some of the formats do not work nowadays. Having a computer that was able to support viewing and creating 3D objects was necessary. Extensible 3D modelling left all of these problems behind, it is royalty-free, relatively fast loading and highly portable because it is XML integrated which makes it transferable and easier to preserve.

Model of a building created using X3D modelling.

Anyone with a computer or even a mobile device and a browser is able to view and interact with 3D objects but it may not run on older versions of the browsers. User interaction is fairly simple performed by dragging the mouse.  X3D modelling can be used for educational purposes, architects, engineers. Furthermore, in the future we are likely to see extensions of 3D models that will support 3D printing. 

Printer visualised thanks to X3D modelling. Source: web3d.org

All in all, X3D modelling can be the future for many disciplines such as architecture, engineering, and the educational sphere. It is accessible on most devices with an exception of the devices that run on older browser versions. User interactivity, portability are benefits of X3D. Designing is much less time consuming and less of an expense. In other words, it is easy to learn and people are easily impressed by it.

How to do it?

You only need a simple text editor and a web browser to create 3D models using these technique.

Want to learn more - enrol into our javascript course today

Preparation for making a discord bot

Developing a Discord Bot requires quite a bit of setup, but you only need to do this once and then you can create many more JavaScript projects.

Node JS

Download and Install Node from: https://nodejs.org/en/

Node Packet Manager

Once installed, create a folder for your project. Call it what your bot will be named or just call it DiscordBot for now. Next up we need to install Discord.js, this is done using Node Package Manager (NPM). We need to open a command prompt to do this, hold down Shift + Right Click and then select open command prompt. If you cannot see the option, open the start menu and search for cmd and hit enter. Then type cd <PATH TO YOUR FOLDER> for example if my folder was located on my Desktop I would type: cd C:\Users\Dan\Desktop\DiscordBot. Replace “Dan” with the account name on Windows.

Installing discord js

Type “npm init” in the command prompt. This will then ask a series of questions. Fill them in as you see fit. If you are not sure on any, just leave them blank.

Once complete, it’s now time to install Discord.js. Type into the command prompt: “npm install discord.js”

Setting up a linter

You can program your discord bot using Notepad or Notepad++, however these don’t offer syntax highlighting. I am using WebStorm to develop in, however, this is a paid product. You can download Visual Studio Code which is a light weight editor for multiple languages.

Next download the Linter for Visual Studio Code: npm install eslint

Finally, install the plugin for Visual Studio code.

Linter Tweaks

Create a file in the root of your project folder. Call this file .eslintrc.json and copy the following code into the file or download it from Github.

{
	"extends": "eslint:recommended",
	"env": {
		"node": true,
		"es6": true
	},
	"parserOptions": {
		"ecmaVersion": 2019
	},
	"rules": {
		"brace-style": ["error", "stroustrup", { "allowSingleLine": true }],
		"comma-dangle": ["error", "always-multiline"],
		"comma-spacing": "error",
		"comma-style": "error",
		"curly": ["error", "multi-line", "consistent"],
		"dot-location": ["error", "property"],
		"handle-callback-err": "off",
		"indent": ["error", "tab"],
		"max-nested-callbacks": ["error", { "max": 4 }],
		"max-statements-per-line": ["error", { "max": 2 }],
		"no-console": "off",
		"no-empty-function": "error",
		"no-floating-decimal": "error",
		"no-inline-comments": "error",
		"no-lonely-if": "error",
		"no-multi-spaces": "error",
		"no-multiple-empty-lines": ["error", { "max": 2, "maxEOF": 1, "maxBOF": 0 }],
		"no-shadow": ["error", { "allow": ["err", "resolve", "reject"] }],
		"no-trailing-spaces": ["error"],
		"no-var": "error",
		"object-curly-spacing": ["error", "always"],
		"prefer-const": "error",
		"quotes": ["error", "single"],
		"semi": ["error", "always"],
		"space-before-blocks": "error",
		"space-before-function-paren": ["error", {
			"anonymous": "never",
			"named": "never",
			"asyncArrow": "always"
		}],
		"space-in-parens": "error",
		"space-infix-ops": "error",
		"space-unary-ops": "error",
		"spaced-comment": "error",
		"yoda": "error"
	}
}

Automating the boring tasks in Google Drive

Have you ever got bored doing a monotonous task over and over again, on google drive, and wish there was a simpler and less repetitive way to get these tasks run. Google provides a scripting language called Google Apps Script for that very reason, which lets you automate the boring stuff. There are other ways to automate tasks in Google Drive such as using external libraries/modules in programming languages like Python. One of the many libraries in Python for this is PyDrive, which lets you use the Google Drive API to automate your own tasks. For this blog tutorial, we will be sticking to the Google Apps Script which doesn’t require any additional software as you can write this all in your browser. Google Apps Script is a flavour of JavaScript and has a very similar syntax to JavaScript, while also allowing you to do Google Drive specific operations easily.

Through this blog tutorial, we will explore how to create some simple automated operations to do which you can expand on afterwards.

To start go to your Google Drive homepage at https://drive.google.com/drive/my-drive.

Click on “New”, then press “more” at the bottom of the pop-up. You should now see an option called “Google App Script” click on this.

This should open a screen like the screenshot below.

Automating creating a new GoogleDoc and sharing

Often when you are working in a workplace or in a team project you might be having to create multiple Google Drive documents and sheets. This often requires sharing with the same multiple people which can become quite annoying after a while. Especially if it’s there is a long list of people. So we are going to create a script to do this for us!

Firstly, once we have created a new Google App Script document, edit the project name to whatever you would like. I’m going to call mine “Create GDoc for project”. This might take a few seconds to be done. If you have an error try creating a new project instance by clicking “File” => “New” => “Project”.

Once you have created a project you will see a file called Code.gs which has a function called “myFunction()”. Feel free to delete this as we will start with a blank file. 

We will start by creating a function to do the operation.

function createDocument() {

}

We have created the function so let’s create the new document. As we are using the Google App Script language Google has made it really easy to create new documents by using the “DocumentApp” class.

function createDocument() {
  var doc = DocumentApp.create('Daily Briefing');
}

Now for the last step of our simple script, let’s share the document with a set of predefined users. Firstly we need to get the document file id. We can get this easily by using the “getId()“ method with our doc object. Afterwards, we are going to use an array to store the other user’s emails. Using a for loop we will, one by one, add each new user as an editor to the document by the file id.

function createDocument() {
  var doc = DocumentApp.create('Daily Briefing');
  var fileId = doc.getId();
  
  var editors = ["user1@gmail.com", "user2@gmail.com"];
  
  for (var i=0; i<editors.length; i++) {
    DriveApp.getFileById(fileId).addEditor(editors[i]);
  }
}

To run the finished program press the run button at the top of the window. When you first run the program for the first time you might get a popup like below.

If this happens follow the steps to authorise your app to run. And allow the app to access it’s required permissions.

We have now finished showing you how to do this basic example, but that shouldn’t stop you looking further. Why not create your own scripts for your own need or edit this code yourself with the help of the Google App Script Guides to add new features. You could modify the code so it’s run at certain times of the day or you could even have the document set up with a predefined style already.

Do you want to learn more?

If you enjoyed this tutorial and want to find out more about programming and scripting why not join one of our Online Summer Camps for Kids and Teens.

---

Author: Robert Nimmo