Tutorials

three.js

Tips for implementing three.js

Introduction

three.js is JavaScript library creating and displaying animated 3D

this page http://blog.teamtreehouse.com/the-beginners-guide-to-three-js is best recommended

to load json 3d model file and see the 3D model --> for to https://threejs.org/editor/

Tip 1: JS in Body not in header

Place JavaScript in html file in the body - not in header

<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>
		<script>
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera(
				35,			// Field of view
				window.innerWidth / window.innerHeight,	// Aspect ratio
				0.1,		// Near
				10000		// Far
			);
			

			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			var geometry = new THREE.BoxGeometry( 1, 1, 1 );
			var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			var cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			camera.position.z = 5;

			var animate = function () {
				requestAnimationFrame( animate );

				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;

				renderer.render(scene, camera);
			};

			animate();
		</script>
	</body>
</html>

Tip 2: Replacing a model - only with the same type

A. Replace model.js file with geometry type

enter http://blog.teamtreehouse.com/the-beginners-guide-to-three-js, download the code, Extract the zip file to your computer
now you see this
2. you can see this module file here --> modules/treehouse_logo.js
Get the new model file and place it in your main three.js directory
1. Enter https://threejs.org/ and download three.js-master zip file, then extract it to your directory
2. Find the new model file here .../three.js-master/examples/models/animated/sittingBox.js
3. place sittingBox.js at modules directory
Change the code
1. at index.html replace this line
  1. loader.load( "models/treehouse_logo.js", function(geometry){
2. with this line
  1. loader.load( "models/sittingBox.js", function(geometry){
3. pay attention that both models are "geometry" type
Now you will see
2. you can see this module file here --> modules/sitting.js

B. Replace model.obj file with obj type

Enter https://threejs.org/ and download three.js-master zip file, then extract it to your directory
Enter ../three.js-master/examples/webgl_loader_obj2.html
you will see this
2. and the model file --> models/obj/female02/female02.obj
Get any file.obj, I received lamp.obj file from Hagai from Brightway https://drive.google.com/drive/folders/162PuzEitVvS57DkVjPrpHOMgyGRzshib
Place the file.obj at the model directory
replace two lines in webgl_loader_obj2.html code
1. this line
  1. objLoader.load( 'models/obj/female02/female02.obj', callbackOnLoad, null, null, null, false );
2. with this line
  1. objLoader.load( 'models/obj/lamp.obj', callbackOnLoad, null, null, null, false );
3. and also this line
  1. objLoader.loadMtl( 'models/obj/female02/female02.obj', null, onLoadMtl );
4. with this line
  1. objLoader.loadMtl( 'models/lamp.obj', null, onLoadMtl );
now you will see this
2. and the model file --> models/lamp.obj

Tip 3: Adjust mouse speed animation

A. The code change

Go to OrbitControls.js at https://s.cdpn.io/25480/OrbitControls.js - see below the section of mouse speed adjustment
chAnge zoomSpeed from 1.0 to 2.0 and play with your mouse scroll wheel to change zoom
see more about it here https://threejs.org/docs/#examples/controls/OrbitControls

// This option actually enables dollying in and out; left as "zoom" for
	// backwards compatibility
	this.noZoom = false;
	this.zoomSpeed = 1.0;
	// Limits to how far you can dolly in and out
	this.minDistance = 0;
	this.maxDistance = Infinity;

	// Set to true to disable this control
	this.noRotate = false;
	this.rotateSpeed = 1.0;

	// Set to true to disable this control
	this.noPan = false;
	this.keyPanSpeed = 7.0;	// pixels moved per arrow key push

	// Set to true to automatically rotate around the target
	this.autoRotate = false;
	this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60

B. The actual testing

For actually change in code mouse speed and then test it there is a need to do the following

enter http://blog.teamtreehouse.com/the-beginners-guide-to-three-js and download the code
Extract the zip file to your computer and open index.html file --> you should see the animation in you browser - if not - see tip 4 below
adust mouse speed at OrbitControls.js and test it by your self

Tip 4: to see three.js animation in chrome

open your chrome browser by this "chrome.exe --allow-file-access-from-files" command

Database

Connect and See MySQL Database

Step by Step PHP/SQL Tutorial

Step 1: Open database

at cPanel - Open database db_name

Step 2: Download SQL table file

Enter download-sample-sql
Download the first SQL file in the list with table of 10 rows Sample-SQL-File-10-Rows.sql

See below the Sample-SQL-File-10-Rows.sql

--
-- Database: `samplevideo_db`
--

-- --------------------------------------------------------

--
-- Table structure for table `user_details`
--

CREATE TABLE IF NOT EXISTS `user_details` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) DEFAULT NULL,
  `first_name` varchar(50) DEFAULT NULL,
  `last_name` varchar(50) DEFAULT NULL,
  `gender` varchar(10) DEFAULT NULL,
  `password` varchar(50) DEFAULT NULL,
  `status` tinyint(10) DEFAULT NULL,
  PRIMARY KEY (`user_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10001 ;

--
-- Dumping data for table `user_details`
--

INSERT INTO `user_details` (`user_id`, `username`, `first_name`, `last_name`, `gender`, `password`, `status`) VALUES
(1, 'rogers63', 'david', 'john', 'Female', 'e6a33eee180b07e563d74fee8c2c66b8', 1),
(2, 'mike28', 'rogers', 'paul', 'Male', '2e7dc6b8a1598f4f75c3eaa47958ee2f', 1),
(3, 'rivera92', 'david', 'john', 'Male', '1c3a8e03f448d211904161a6f5849b68', 1),
(4, 'ross95', 'maria', 'sanders', 'Male', '62f0a68a4179c5cdd997189760cbcf18', 1),
(5, 'paul85', 'morris', 'miller', 'Female', '61bd060b07bddfecccea56a82b850ecf', 1),
(6, 'smith34', 'daniel', 'michael', 'Female', '7055b3d9f5cb2829c26cd7e0e601cde5', 1),
(7, 'james84', 'sanders', 'paul', 'Female', 'b7f72d6eb92b45458020748c8d1a3573', 1),
(8, 'daniel53', 'mark', 'mike', 'Male', '299cbf7171ad1b2967408ed200b4e26c', 1),
(9, 'brooks80', 'morgan', 'maria', 'Female', 'aa736a35dc15934d67c0a999dccff8f6', 1),
(10, 'morgan65', 'paul', 'miller', 'Female', 'a28dca31f5aa5792e1cefd1dfd098569', 1);

Step 3: Create table

Enter cPanel --> phpMyAdmi --> db_name (database)
Press on "Import" tab (top menu)
Choose the "Sample-SQL-File-10-Rows.sql" file at your computer
Press on the "go" button (at the bottom)
Choose user_details table at your db_name database

Step 4: Index.php

Edit index.php - see below
1. correct "user_name", password" and db_name (user_details is table name)
Enter fileZilla and upload index.php to your website

note that I used mysqli (mysql did not work)

<!DOCTYPE html>
<html>
<body>
<?php
// connect the database
$DBconn = new mysqli ("localhost","user_name","password","db_name");

// submit the query
$query = "select * from user_details;";
$result = mysqli_query ($DBconn, $query);

// debugging code to make sure the query worked
$rowcount = mysqli_num_rows($result);
echo ("row count = $rowcount <P>");

// output the query result, using associtive array method
while ($row = mysqli_fetch_array ($result))
  {
   echo ("user id: " . $row["user_id"] . "<br>");
   echo ("first name: " . $row["first_name"] . "<br>");
   echo ("last name:" . $row["last_name"] . "<P>" );
	}
$conn->close();
?>   
</body>
</html>

Step 5: See the database

Enter your website and see the database

row count = 10
user id: 1
first name: david
last name:john

user id: 2
first name: rogers
last name:paul

user id: 3
first name: david
last name:john

user id: 4
first name: maria
last name:sanders

user id: 5
first name: morris
last name:miller

user id: 6
first name: daniel
last name:michael

user id: 7
first name: sanders
last name:paul

user id: 8
first name: mark
last name:mike

user id: 9
first name: morgan
last name:maria

user id: 10
first name: paul
last name:miller

demo

AngulaJS

First steps with AngularJS

Build your first "Hello World" and "Calculator"

Introduction

AngularJS vs. Angular
- AngularJS
  - AngularJS or Angular 1
  - This tutorial is based on AngularJS
  - wiki
  - official website
  - basic sample - scroll down at official website to see the basic one HTML file sample
- Angular
  - Angular or Angular 2+ or V2 and above
  - based on AngularJS
  - web platform
  - wiki
  - official website

Hello World

1 link to angular.min.js file

Index.html (only one file)

<html ng-app>
<head>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js'></script>
</head>
<body>
  {{"hello"+" world"}}
</body>
</html>

The source is StackOverflow how-to-host-an-angularjs-app-in-domain

2 internal angular.min.js file

angular.min.js file
1. Enter https://angularjs.org/
2. Press on "DOWNLOAD ANGULARJS" button
3. Verify all parameters: Branch, Build...
4. Press "Download"
5. press "Ctrl + A" sign all text
6. press "Ctrl + C" copy
7. open Notepadd++ and "Ctrl + V" paste
8. save it as angular.min.js file
9. upload to your host

index.html file

<html ng-app>
<head>
  <script src='angular.min.js'></script>
</head>
<body>
  {{"hello"+" world"}}
</body>
</html>

The source is StackOverflow how-to-host-an-angularjs-app-in-domain

Calculator

add_numbers_controller.js file

angular.module('AddNumbersApp', [])
    .controller('AddNumbersController', function($scope) {
        $scope.AddNumbers = function() {
            var a = Number($scope.a || 0);
            var b = Number($scope.b || 0);
            $scope.sum = a+b;
        }
});

add_numbers_controller.html file

<script src="/angular.min.js"></script>
<script src="/add_numbers_controller.js"></script>
<div ng-app="AddNumbersApp">
    <div ng-controller="AddNumbersController">
        <input ng-model="a" ng-keyup="AddNumbers()">
        <input ng-model="b" ng-keyup="AddNumbers()">
        <h1>{{ sum }}</h1>
    </div>
</div>

Based on add numbers with angular js from code-maven angular js tutorial

demo

Basic HTML file

To combine CSS and JS

<!DOCTYPE html>
<html lang"en">
  <head>
    <meta charset="utf-8">
    <title>...</title>
    <link rel="stylesheet" type="text/css" href="/your_CSS_Directory/your.css" />
    <script src="/your_JS_Directory/your.js"></script>
  </head>
  <body>
   ...your html
  </body>
</html>

CSS Grid

a sample of full-page layout

the HTML file

<!DOCTYPE html>
<html lang"en">
  <head>
    <meta charset="utf-8">
    <title>...</title>
    <link rel="stylesheet" type="text/css" href="/css/your.css" />
    <script src="/your_JS_Directory/your.js"></script>
  </head>
  <body>
    <header id="pageHeader">Header</header>
    <article id="mainArticle">Article</article>
    <nav id="mainNav">Nav</nav>
    <footer id="pageFooter">Footer</footer>
  </body>
</html>

the CSS file

body {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav article article"
    "nav footer footer";
  grid-template-rows: 80px 1fr 70px;
  grid-template-columns: 20% 1fr 15%;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: calc(100vh - 40px);
  border-radius: 10px;
  padding: 0px;
  margin: 20px;
  font-size: 150%;
}

header,
footer,
article,
nav,
div {
  background-color: #444;
  color: #fff;
  border-radius: 10px;
  padding: 20px;
  font-size: 150%;
}

#pageHeader {
  grid-area: header;
}

#pageFooter {
  grid-area: footer;
}

#mainArticle {
  grid-area: article;
  background-color: #379;
}

#mainNav {
  grid-area: nav;
}

/* Stack the layout on small devices/viewports. */
@media all and (max-width: 975px) {
  body {
    grid-template-areas:
      "header"
      "nav"
      "article"
      "article"
      "footer";
    grid-template-rows: 80px 1fr 70px 1fr 70px;
    grid-template-columns: 1fr;
  }
}

the result

ReactJS

Operating ReactJS with Windows

For fast operation (If you already installed Node.js and React --> jump to "paragraph 2: Run-the-React-Application at React getting started"

Preparation: Install Node.js and NPM on Windows

Note: Need to do it once, if you already did it - jump to React get started

By How to Install Node.js and NPM

Download “node-v16.13.0-x64.msi” file - see How to Install Node.js and NPM on Windows Step 1
Install “node-v16.13.0-x64.msi” How to Install Node.js and NPM on Windows Step 2
Verify the installation
1. enter windows command prompt (cmd)
  1. type here to search
  2. enter: "cmd"
  3. enter Command Prompt
  4. Command Prompt is here!!!
2. Verify NPM and Node version - see How to Install Node.js and NPM on Windows Step 3
3. Basic Node.js Usage - see Basic Node.js Usage
  1. text editor
    1. Open text editor (notepad++ Etc.)
    2. copy the following to
```
var http = require('http');
 http.createServer(function (req, res) {
   res.writeHead(200, {'Content-Type': 'text/html'});
   res.end('Hello World!');
 }).listen(8080);
```
    3. save the file
      1. save as "myprogram.js"
      2. at "C:\Users\username"
  2. cmd
    1. Access to the Windows command line (Search--> cmd--> left key)
    2. enter
      1. cd c:\users\username node myprogram.js
  3. Bowser
    1. Enter a browser (Chrome Etc.)
    2. Enter the following link localhost:8080/ and you "see Hii World!"

React Getting Started

By w3schools: React Getting Started

Setting up a React Environment
Need to do once, if you already did it - jump to --> "paragraph 2: run the react application"
1. 1. Access to the Windows command line (Search--> cmd--> left key)
  2. enter
    1. ```
    cd c:\users\username
    npx create-react-app my-react-app
```
3. open "File Explorer" at "c:\users\username" and verify a new directory "my-react-app" with sub-directories
4. enter ..my-react-app/src and open App.js to see the main file, that is JS file and not HTML!!!

Run-the-React-Application

Access to the Windows command line (Search--> cmd--> left key)
enter
```
cd my-react-app
npm start
```
wait until process complete
Enter a browser (Chrome Etc.)

Enter the following link http://localhost:3000/ (not localhost:8080/ ) and you "see the following:

the App.js (I brought the file here because the file in its place is about to change ...)

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Modify the React Application
1. open c:\users\username/my-react-app/src/App.js file at any browser
2. change it to
3. ```
function App() {
  return (
    <div className="App">
      <h1>Hellow, name is Arie</h1>
    </div>
  );
}

export default App;
```
4. Save
5. Enter http://localhost:3000/ and see:
7. Pay attention that immediatky after saving the App.js file --> browser is updated with the need ti do the refresh!!!

Website Building Resources

Tutorials

three.js

three.js

Introduction

Tip 1: JS in Body not in header

Tip 2: Replacing a model - only with the same type

A. Replace model.js file with geometry type

B. Replace model.obj file with obj type

Tip 3: Adjust mouse speed animation

A. The code change

B. The actual testing

Tip 4: to see three.js animation in chrome

Search