ngx3js-assets - npm Package Compare versions

ngx3js-assets

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.0.1 to 0.134.0-2021111717

LICENSE

package.json

		{
		"name": "ngx3js-assets",
		"version": "0.0.1",
		"version": "0.134.0-2021111717",
		"license": "MIT",
		"repository": {
		"type": "git",
		"url": "git://github.com/outmindkjg/ngx3js-module.git"
		},
		"description": "Angular & Javascript 3D library",
		"author": "outmind0@gmail.com",
		"bugs": {
		"url": "https://github.com/outmindkjg/ngx3js-module/issues"
		},
		"peerDependencies": {
		@@ -11,2 +21,22 @@ "@angular/common": "^12.2.0",
		},
		"keywords": [
		"three",
		"three.js",
		"javascript",
		"3d",
		"virtual-reality",
		"augmented-reality",
		"webgl",
		"webgl2",
		"webaudio",
		"webgpu",
		"webxr",
		"canvas",
		"svg",
		"html5",
		"ngx3js",
		"angular",
		"typescript"
		],
		"homepage": "https://outmindkjg.github.io/ngx3js-doc/",
		"main": "bundles/ngx3js-assets.umd.js",
		@@ -13,0 +43,0 @@ "module": "fesm2015/ngx3js-assets.js",

229

README.md

		@@ -1,24 +0,227 @@
		# Ngx3jsAssets
		ngx3js
		========

		This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.
		[![NPM Package][npm]][npm-url]
		[![NPM Downloads][npm-downloads]][npmtrends-url]

		## Code scaffolding
		### JavaScript 3D library ####

		Run `ng generate component component-name --project ngx3js-assets` to generate a new component. You can also use `ng generate directive\|pipe\|service\|class\|guard\|interface\|enum\|module --project ngx3js-assets`.
		> Note: Don't forget to add `--project ngx3js-assets` or else it will be added to the default project in your `angular.json` file.
		The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples.

		## Build
		[Examples](https://outmindkjg.github.io/ngx3js-doc/#/examples/) —
		[Documentation](https://outmindkjg.github.io/ngx3js-doc/#/docs) —
		[API Documentation](https://outmindkjg.github.io/ngx3js-doc/docs)

		Run `ng build ngx3js-assets` to build the project. The build artifacts will be stored in the `dist/` directory.
		## Usage ###

		## Publishing
		This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a `WebGL` renderer for the scene and camera, and it adds that viewport to the `document.body` element. Finally, it animates the cube within the scene for the camera.

		After building your library with `ng build ngx3js-assets`, go to the dist folder `cd dist/ngx3js-assets` and run `npm publish`.

		## Running unit tests
		To Install you can choose one from two method.

		Run `ng test ngx3js-assets` to execute the unit tests via [Karma](https://karma-runner.github.io).
		### Ngx3js Install - Method 1 - Recommanded ####
		```sh
		install shell script
		npm install -g @angular/cli
		npm install ngx3js
		node ./node_modules/ngx3js/bin/patch.js
		npm install
		```

		## Further help
		### Ngx3js Install - Method 2 ####
		```sh
		install by npm
		npm install -g @angular/cli
		npm install ngx3js
		npm install three@0.134.0
		npm install --save-dev @types/three@0.134.0
		npm install gsap
		npm install ammojs-typed
		npm install lil-gui
		npm install chroma-js
		npm install --save-dev @types/chroma-js
		npm install fs
		npm install fs-web
		```

		To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

		### Auto Formater - optional ####
		```sh
		prettier format change
		npx prettier --write src/*/.json
		npx prettier --write src/*/.ts
		npx prettier --write src/*/.html
		npx prettier --write src/*/.scss
		```

		### Imports Ngx3JsModule - Required ####

		To use ngx3js have to import Ngx3JsModule in src/app/app.module.ts or some other place modle.ts
		```ts
		// src/app/app.module.ts

		import { Ngx3JsModule } from 'ngx3js';

		@NgModule({
		....
		imports: [..., Ngx3JsModule],
		....
		})
		```

		### Change Default Assets Url - optional ####

		If you chhange assets in angular.json file must be setted!

		```ts
		// src/app/app.component.ts

		import { ThreeUtil } from 'ngx3js';

		export class AppComponent {
		ngOnInit(): void {
		// any where use ngx3js for just one time
		ThreeUtil.setAssetUrl('assets/examples/');
		}
		}
		```


		### Chane angular.json for ammojs-typed and basic assets ####

		// angular.json
		```json
		{
		"projects": {
		"your-project-name": {
		"architect": {
		"build": {
		"options": {
		"allowedCommonJsDependencies" : [
		"ammojs-typed"
		],
		"assets": [
		{
		"glob": "*/",
		"input": "./node_modules/ngx3js/assets",
		"output": "/assets/examples/"
		}
		],
		},
		},
		}
		}
		},
		}
		```

		### Chane tsconfig.json for fs ####

		// tsconfig.json
		```json
		{
		"compilerOptions": {
		"paths": {
		"fs": ["./node_modules/fs-web"]
		}
		}
		}
		```

		### Add Code to your template ####


		~~~html
		<!-- src/app/app.component.html -->
		<div style="width: 700px; height: 500px; display: block; position: relative">
		<ngx3js-renderer
		[controlType]="'orbit'"
		[controlOptions]="{
		enablePan: false,
		enableDamping: true,
		minDistance: 10,
		maxDistance: 500
		}"
		[statsMode]="0"
		[antialias]="true"
		[clearColor]="'0x000000'"
		[shadowMapEnabled]="true"
		>
		<ngx3js-lookat [x]="0" [y]="0" [z]="0"></ngx3js-lookat>
		<ngx3js-camera
		[type]="'perspective'"
		[fov]="40"
		[near]="1"
		[far]="1000"
		[viewport]="true"
		[x]="0"
		[y]="0"
		[width]="'100%'"
		[height]="'100%'"
		>
		<ngx3js-position [x]="-50" [y]="0" [z]="50"></ngx3js-position>
		</ngx3js-camera>
		<ngx3js-scene #scene>
		<ngx3js-light [type]="'AmbientLight'" [color]="'0x6688cc'"></ngx3js-light>
		<ngx3js-light
		[type]="'directional'"
		[color]="'0xffffff'"
		[intensity]="1"
		[castShadow]="true"
		>
		<ngx3js-position [x]="-3" [y]="10" [z]="-10"></ngx3js-position>
		</ngx3js-light>
		<ngx3js-mesh>
		<ngx3js-position [x]="0" [y]="0" [z]="0"></ngx3js-position>
		<ngx3js-geometry
		[type]="'Icosahedron'"
		[radius]="20"
		[detail]="2"
		></ngx3js-geometry>
		<ngx3js-material
		[type]="'meshlambert'"
		[color]="'0xffffff'"
		[wireframe]="true"
		></ngx3js-material>
		</ngx3js-mesh>
		<ngx3js-mesh>
		<ngx3js-position [x]="0" [y]="0" [z]="0"></ngx3js-position>
		<ngx3js-geometry
		[type]="'TextGeometry'"
		[text]="'Ngx3Js'"
		[font]="'gentilis_regular'"
		[size]="20"
		[height]="5"
		[center]="true"
		></ngx3js-geometry>
		<ngx3js-material
		[type]="'meshlambert'"
		[color]="'0xff0000'"
		></ngx3js-material>
		</ngx3js-mesh>
		</ngx3js-scene>
		</ngx3js-renderer>
		</div>
		~~~

		## Cloning this repository ###

		Cloning the repo with all its history results in a ~2 GB download. If you don't need the whole history you can use the `depth` parameter to significantly reduce download size.

		```sh
		git clone --depth=1 https://github.com/outmindkjg/ngx3js-module.git
		```

		## Change log & Ask Question ###

		- [Releases - GitHub](https://github.com/outmindkjg/ngx3js-module/releases)
		- [ISSUE - GitHub](https://github.com/outmindkjg/ngx3js-module/issues)
		- [Email - outmind0@gmail.com](outmind0@gmail.com)


		[npm]: https://img.shields.io/npm/v/ngx3js
		[npm-url]: https://www.npmjs.com/package/ngx3js
		[build-size]: https://badgen.net/bundlephobia/minzip/ngx3js
		[build-size-url]: https://bundlephobia.com/result?p=ngx3js
		[npm-downloads]: https://img.shields.io/npm/dw/ngx3js
		[npmtrends-url]: https://www.npmtrends.com/ngx3js

New alerts

Fixed alerts

Improved metrics

Worsened metrics