ng-three-viewer

3D model viewer using Angular and Three.js

入门
GitHub在线演示
Stars：68
License：MIT License
更新：2025/1/28

README

ng-three-viewer

Overview

This project demonstrates two approaches (v1 & v2) to create an AngularJS and Three.js app. You can view the accompanying presentation on Google Slides.

Both approaches create the same app, a simple 3D model viewer.

v1 Approach

  • Most common Angular pattern (angularjs.org docs demonstrate this approach)
  • Uses grunt to uglify / minify
  • Uses Angular factories, services, filters, directives
  • Bootstraps components from ng-controller in DOM

v2 Approach

  • Prototypal Pattern for Everything!
  • Bridge to Angular 2.0
  • Controller as (local scope)
  • Closure Compilation
    • Annotations including @ngInject
    • type checking
    • --angular_pass
    • Dependency chains (goog.provide / goog.require)
    • minification
  • No closure pattern (factories). Services only.
  • App.js initialization for all components.

Getting Started

  1. Do a git pull https://github.com/cubicleDowns/ng-three-viewer.git
  2. You will probably have to install some grunt packages in both the v1 & v2 directories.
  • npm install grunt-package-name
  1. Open up the repo and run a server from the ng-three-viewer/ directory
  • grunt serve
  • python -m SimpleHTTPServer
  • or whatever.
  1. Browse to SERVER_NAME:PORT
  • Compiled Versions:
    • /v1/dist/
    • /v2/dist/
  • Uncompiled Versions:
    • /v1/
    • /v2/

v1 Compiling Code

  1. From v1/ grunt build
  • Joins all library files into libs.js
  • Minifies and ngAnnnotates
  • Exports the files to /v1/dist/

v2 Compiling Code

  1. Uncomment
  • //goog.require('Viewer.Scene'); in app.js
  • //goog.require's in scene.js
  1. From v2/ grunt
  2. Will show any warnings or errors from compilation
  3. If no errors, it'll output /v2/dist/app.min.js

A few Protractor tests for v2 of the app

Set up:

  1. Get Protractor:
npm install -g protractor
  1. Get Selenium:
webdriver-manager update
  1. Start Selenium server:
webdriver-manager start
  1. Start the app on localhost:8000. I used python -m SimpleHTTPServer.
  2. Run it! cd into test/ directory and run
protractor conf.js

That should launch Chrome and run the tests in it.

Files:

  • app.js -- page object containing some element locators and functions.
  • test.js -- the tests.
  • conf.js -- config file where, well, different options can be specified.