├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── bin └── mrjs.js ├── demo-mrjs.gif ├── package.json └── template ├── .babelrc ├── .gitignore ├── assets └── texture.png ├── icons ├── LockScreenLogo.scale-200.png ├── SplashScreen.scale-200.png ├── Square150x150Logo.scale-200.png ├── Square44x44Logo.scale-200.png ├── Square44x44Logo.targetsize-24_altform-unplated.png ├── StoreLogo.png └── Wide310x150Logo.scale-200.png ├── index.html ├── package.json ├── public └── texture.png ├── src ├── app.js └── hololens-compatibility │ └── three-patch.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | demo-mrjs.gif 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | BSD License 2 | 3 | For Mixed Reality JS 4 | 5 | Copyright (c) 2017 Devon Bradley 6 | 7 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 8 | 9 | 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 10 | 11 | 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 12 | 13 | 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. 14 | 15 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mixed Reality JS 2 | 3 | ![MRJS Demo](https://github.com/dbradleyfl/Mixed-Reality-JS/blob/master/demo-mrjs.gif?raw=true) 4 | 5 | A simple framework for building Hololens applications with Javascript and [ThreeJS](https://github.com/mrdoob/three.js/). Derived from [HoloJS](https://github.com/Microsoft/HoloJS). 6 | 7 | ## Requirements 8 | * Windows 10 9 | * Hololens (Or emulator) 10 | * Visual Studio 2015 11 | 12 | ## Getting Started 13 | 14 | 1. Run *npm install -g mrjs*, then *mrjs new your_app_name*, then *cd your_app_name*. 15 | 16 | 2. Run *mrjs start*. Write your three js app in the src/ folder. 17 | 18 | 3. Make sure your Hololens development environment is all setup [using Microsoft's guides](https://developer.microsoft.com/en-us/windows/holographic/getting_started). 19 | 20 | 4. To deploy and debug, on emulator or device, run *mrjs package*, open the HoloJS solution located in the release/ folder in Visual Studio. Change the deployment app from HoloHost to ThreeJSApp (right click ThreeJSApp in Solution Exporer and click "set as StartUp project"). Build > Clean Solution. Build > Rebuild Solution. Select your deployment target (Device, or emulator) in the menu then deploy the ThreeJSApp. You can also utilize the deployment instructions on the [HoloJS repo](https://github.com/Microsoft/HoloJS#system-requirements). 21 | 22 | ## Contributions 23 | Hoping to keep this project moving along and toward being a framework for building VR/AR/MR applications for any device with Javascript. Below are a couple things that need to be impolmented into this version. 24 | 25 | ## Missing Features 26 | * The name of the Universal Windows Application and description / author information should be pulled from the package.json 27 | * Path issues within the UWP need to be addressed. For example, putting a "./" infront of the example app's texture.png url will break the UWP and fail silently. Need to find a solution for that. 28 | * Piping images and other assets into the UWP isn't fully implemented yet. 29 | * I'd like to have a --template option for mrjs new the allows you to select ThreeJS or AFrame as your perfered framework. 30 | * I'd like to have an option for packaging for GearVR, mrjs package --gearvr, that injects the ThreeJS app into a GearVRF application. Need to figure out how difficult running WebGL/ThreeJS will be with GearVRF. 31 | -------------------------------------------------------------------------------- /bin/mrjs.js: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env node 2 | const path = require('path'); 3 | var fs = require('fs'); 4 | const shell = require("shelljs"); 5 | 6 | const MODULE_ROOT_PATH = path.join(__dirname, ".."); 7 | const MODULE_TEMPLATE_PATH = path.join(__dirname, "..", "template"); 8 | const USER_ARGS = process.argv.slice(2); 9 | const USER_CWD = process.cwd(); 10 | 11 | // USER_ARGS.forEach(function (val, index, array) { 12 | // console.log(index + ': ' + val); 13 | // }); 14 | 15 | switch (USER_ARGS[0]) { 16 | case "new": 17 | if (USER_ARGS[1]) { 18 | let usersAppName = USER_ARGS[1]; 19 | console.log("Creating a Mixed Reality JS app named: ", USER_ARGS[1]); 20 | shell.exec("cp -r " + MODULE_TEMPLATE_PATH + " " + path.join(USER_CWD, usersAppName)); 21 | console.log("Installing dependencies."); 22 | shell.cd("./" + usersAppName); 23 | shell.exec("npm install"); 24 | console.log("\n\n\nSuccessfully created " + usersAppName + "! \n\nRun \"cd " + usersAppName + " && mrjs start\" to run the developmet server."); 25 | } else { 26 | console.log("Please pass an app name after new."); 27 | } 28 | break; 29 | case "start": 30 | shell.exec("npm start"); 31 | break; 32 | case "package": 33 | try { 34 | shell.exec("npm run build"); 35 | } catch (e) { 36 | console.log(e); 37 | console.log("Failed when trying to build js application (didn't get to HoloJS template app)."); 38 | } 39 | 40 | if (!shell.which('git')) { 41 | shell.echo('Sorry, this script requires git'); 42 | shell.exit(1); 43 | } 44 | 45 | try { 46 | fs.stat("./release", function (err, stats) { 47 | if (err) { 48 | console.log('Creating release folder...'); 49 | shell.mkdir("./release"); 50 | } 51 | shell.cd("./release"); 52 | checkForHoloJS(); 53 | }); 54 | } catch (e) { 55 | console.log(e); 56 | console.log("Failed when trying to create and navigate into release folder."); 57 | } 58 | 59 | function checkForHoloJS () { 60 | try { 61 | fs.stat("./HoloJS", function (err, stats) { 62 | if (err) { 63 | console.log("\n\nLooks like this is the first time this application will be packaged. The first run of \"mrjs package\" can take quite a while because we have to clone HoloJS and all its submodules. HoloJS is a rather large file.\n\n"); 64 | console.log("Cloning HoloJS template app..."); 65 | shell.exec("git clone --recursive https://github.com/dbradleyfl/HoloJS.git"); 66 | } 67 | copyBuildIntoTemplateApp(); 68 | }); 69 | } catch (e) { 70 | console.log(e) 71 | console.log("Failed when trying to recursivly clone HoloJS from dbradleyfl repo.");; 72 | } 73 | } 74 | 75 | function copyBuildIntoTemplateApp () { 76 | try { 77 | console.log("Copying icons into HoloJS Template App"); 78 | shell.cp("-r", path.join(USER_CWD, "icons"), path.join("HoloJS","HoloJS","ThreeJSApp","Assets")); 79 | console.log("Copying bundle"); 80 | shell.cp(path.join(USER_CWD, "bundle.js"), path.join("HoloJS","HoloJS","ThreeJSApp","Scripts", "App.js")); 81 | console.log("\n\n\nSuccessfully packaged this application into a Universal Windows Platform Application. Open \"release/HoloJS/HoloJS/HoloJS.sln\" in Visual Studio. Right click ThreeJSApp and \"Set as Startup Project\". Click \"Build > Clean Solution\", then \"Build > Rebuild Solution\". Select your deployment target (Device, or emulator) in the menu then deploy the ThreeJSApp\n\n\n"); 82 | } catch (e) { 83 | console.log(e); 84 | console.log("Failed when trying to copy build into HoloJS template app."); 85 | } 86 | } 87 | break; 88 | default: 89 | printAciiHololens(); 90 | console.log("\n**************************\nMixed Reality JS Framework \n**************************\n\nAvailable commands: \n\nmrjs new (to create a new mrjs app)\nmrjs start (to start the development server server)\nmrjs package (to build a Hololens compatible Universal Windows Platform application)\n\nWelcome to the Metaverse :)"); 91 | } 92 | 93 | function printAciiHololens () { 94 | console.log(` 95 | ............................................ ........................................................ 96 | ................ iGG000000000000GGGCCLLfffttt1111111iiiiii;.......................................... 97 | ........i11ttfLCGGG0000000000000GGGCCCLLfffftttt1111111iiiiitiiiiiiiiii.. ........................... 98 | .. iiii11ttfLCCG00000000000000000000000CCCCCLLLLLfffftttttiii1iiiiiiiiiiiiiii111i ................... 99 | .iii11ffLLLCCCG000000008008808000000000CCCCCCLLLLLfffftttt01111111111111111111111ttttttt ............ 100 | i:i1tffLLCCCCG88888888888888000000000GCCCCCCLLLLLfffftttt11111111111111111ttttttttttttfttftf;....... 101 | ..:ittffLLCCCGG08888888888888000888880GLCCCCCCLLLLLfffftttttttttttttttttttttttffffffffffffffffftt.... 102 | ..;ittfLLCCCCGGG88888888888888888888888GGCCCCCCLLLLLfffftttfffffffffffffffffffffLfLLLLLLLLLLLffft1;.. 103 | ..:1tffLLCCCGGGG88888888888888888888888GGGGCCCCCLLLLLffffttLLLLLffffffffLLLLLLLLLLLLLLLCLLLLLLLLfti.. 104 | . :1tffLLCCCGGGG08888888888888888888888GGGGGCCCCCLLLLLfffftLffffttLCLLLLLLLLCCCCCCCCCCCCCCCCCCLLff1 . 105 | .i:itffLLCCCGGGG00888888888888@@@@8800GCCCCLGLLLLfffffttttt........... ,ffGG0Lf1LGGGGGGGGGCCCCCCLf1.. 106 | ..:i1tfLLCCGGGGG0008@@@@@@@@@888888888GGGGGCGLLLLffftttt11tGLLLCCCCCCCCCCCCCCCCCCCCLGGLLC0GGGGCCLft.. 107 | ..C;1tfLLCCCGGGG0000@@@@@@@@8888888000GGGGGCGCCCLLLLLfffffLGGGGGGGGGGGGCCCCCCCCCCCCCCCCfffffffff1Lt . 108 | .. ;itffLLCCGGGGG0000@888@@@@880000000GGGGGCGCCCLLLLLLffffGGGGGGGGGGGGGGGGGGGGGGGGGGGGCCCCCGGCffff1.. 109 | ...i;1tfLttttGGGGGG0000880@0@8@888000000GGGGCCCCCLLLLLLLLLGGGGGGGGGGGGGGGGGGGGGCCGGCCCGGGGGCCffff1... 110 | ....Liit1t111111111110C80G800@08@8GGG00000800GCCGGCGCGCCLGGGGGCCGGGGCCCCGGCLf.........GCtffft........ 111 | .....tiit1iiiiiiiiiiiCG1tG8@GC@0888000000001GCLLLLLLLLLGG0GGGGGGGGGGGGGGCfLL......................... 112 | .......GitL:;;;;;;;;Li0i1L08C;i@@800C;;;;;;;;;;;:Ct.................................................. 113 | ........fitf,::::1fLLL;;fL00;;:::i880L::::;8f........................................................ 114 | ..........f1...,,. C..C00::::::::@@1 ............................................................. 115 | ...........i;. .;:.................................................................................. 116 | ......................................................................Microsoft.Hololens.ASCII.Art... 117 | `); 118 | } 119 | -------------------------------------------------------------------------------- /demo-mrjs.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbradleyfl/Mixed-Reality-JS/5ca40519bca26a96cf949183bc26c4db1824d15d/demo-mrjs.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mrjs", 3 | "version": "0.0.3", 4 | "description": "A simple way to build applications for the hololens with Javascript and ThreeJS.", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "echo \"Framework being updated to webpack. Just uploading to npm to claim name\" && exit 1", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "bin": { 11 | "mrjs": "bin/mrjs.js" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/dbradleyfl/Mixed-Reality-JS.git" 16 | }, 17 | "keywords": [ 18 | "mrjs", 19 | "mixed reality", 20 | "mixed reality js", 21 | "augmented reality", 22 | "reality", 23 | "hololens", 24 | "three", 25 | "js" 26 | ], 27 | "author": "Devon Bradley", 28 | "license": "BSD", 29 | "bugs": { 30 | "url": "https://github.com/dbradleyfl/Mixed-Reality-JS/issues" 31 | }, 32 | "homepage": "https://github.com/dbradleyfl/Mixed-Reality-JS#readme", 33 | "dependencies": { 34 | "shelljs": "^0.7.7" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /template/.babelrc: -------------------------------------------------------------------------------- 1 | {"presets": ["env"]} 2 | -------------------------------------------------------------------------------- /template/.gitignore: -------------------------------------------------------------------------------- 1 | build 2 | release 3 | node_modules 4 | bundle.js 5 | -------------------------------------------------------------------------------- /template/assets/texture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbradleyfl/Mixed-Reality-JS/5ca40519bca26a96cf949183bc26c4db1824d15d/template/assets/texture.png -------------------------------------------------------------------------------- /template/icons/LockScreenLogo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbradleyfl/Mixed-Reality-JS/5ca40519bca26a96cf949183bc26c4db1824d15d/template/icons/LockScreenLogo.scale-200.png -------------------------------------------------------------------------------- /template/icons/SplashScreen.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbradleyfl/Mixed-Reality-JS/5ca40519bca26a96cf949183bc26c4db1824d15d/template/icons/SplashScreen.scale-200.png -------------------------------------------------------------------------------- /template/icons/Square150x150Logo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbradleyfl/Mixed-Reality-JS/5ca40519bca26a96cf949183bc26c4db1824d15d/template/icons/Square150x150Logo.scale-200.png -------------------------------------------------------------------------------- /template/icons/Square44x44Logo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbradleyfl/Mixed-Reality-JS/5ca40519bca26a96cf949183bc26c4db1824d15d/template/icons/Square44x44Logo.scale-200.png -------------------------------------------------------------------------------- /template/icons/Square44x44Logo.targetsize-24_altform-unplated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbradleyfl/Mixed-Reality-JS/5ca40519bca26a96cf949183bc26c4db1824d15d/template/icons/Square44x44Logo.targetsize-24_altform-unplated.png -------------------------------------------------------------------------------- /template/icons/StoreLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbradleyfl/Mixed-Reality-JS/5ca40519bca26a96cf949183bc26c4db1824d15d/template/icons/StoreLogo.png -------------------------------------------------------------------------------- /template/icons/Wide310x150Logo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbradleyfl/Mixed-Reality-JS/5ca40519bca26a96cf949183bc26c4db1824d15d/template/icons/Wide310x150Logo.scale-200.png -------------------------------------------------------------------------------- /template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mrjs-template-app", 3 | "version": "0.0.3", 4 | "description": "\"App built with mrjs\"", 5 | "main": "app.js", 6 | "scripts": { 7 | "build": "webpack -p --output-public-path='/'", 8 | "start": "webpack-dev-server && exit 1", 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "babel-core": "^6.24.0", 15 | "babel-loader": "^6.4.1", 16 | "babel-preset-env": "^1.2.2", 17 | "webpack": "^2.3.2", 18 | "webpack-dev-server": "^2.4.2" 19 | }, 20 | "dependencies": { 21 | "three": "^0.84.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /template/public/texture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbradleyfl/Mixed-Reality-JS/5ca40519bca26a96cf949183bc26c4db1824d15d/template/public/texture.png -------------------------------------------------------------------------------- /template/src/app.js: -------------------------------------------------------------------------------- 1 | let THREE = require('three'); 2 | THREE = require('./hololens-compatibility/three-patch')(THREE); 3 | 4 | let canvas = document.createElement(window.getViewMatrix ? 'canvas3D' : 'canvas'); 5 | if (!window.getViewMatrix) { 6 | document.body.appendChild(canvas); 7 | document.body.style.margin = document.body.style.padding = 0; 8 | canvas.style.width = canvas.style.height = "100%"; 9 | } 10 | 11 | class HolographicCamera extends THREE.Camera { 12 | 13 | constructor () { 14 | super(); 15 | this._holographicViewMatrix = new THREE.Matrix4(); 16 | this._holographicTransformMatrix = new THREE.Matrix4(); 17 | this._flipMatrix = new THREE.Matrix4().makeScale(-1, 1, 1); 18 | } 19 | 20 | update () { 21 | this._holographicViewMatrix.elements.set(window.getViewMatrix()); 22 | this._holographicViewMatrix.multiply(this._flipMatrix); 23 | this._holographicTransformMatrix.getInverse(this._holographicViewMatrix); 24 | this._holographicTransformMatrix.decompose(this.position, this.quaternion, this.scale); 25 | } 26 | } 27 | 28 | let renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true }); 29 | let scene = new THREE.Scene(); 30 | let camera = window.getViewMatrix ? new HolographicCamera() : new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000); 31 | let raycaster = new THREE.Raycaster(); 32 | let clock = new THREE.Clock(); 33 | let loader = new THREE.TextureLoader(); 34 | let material = new THREE.MeshStandardMaterial({ vertexColors: THREE.VertexColors, map: new THREE.DataTexture(new Uint8Array(3).fill(255), 1, 1, THREE.RGBFormat) }); 35 | 36 | let ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.8); 37 | let directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.5); 38 | let pointLight = new THREE.PointLight(0xFFFFFF, 0.5); 39 | 40 | let cube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.2, 0.2, 0.2), material.clone()); 41 | let sphere = new THREE.Mesh(initColors(new THREE.SphereBufferGeometry(0.1, 20, 20)), material.clone()); 42 | let cone = new THREE.Mesh(initColors(new THREE.ConeBufferGeometry(0.1, 0.2, 20, 20)), material.clone()); 43 | let torus = new THREE.Mesh(initColors(new THREE.TorusKnotBufferGeometry(0.2, 0.02, 100, 100)), material.clone()); 44 | let cursor = new THREE.Mesh(initColors(new THREE.RingBufferGeometry(0.001, 0.003, 20, 20)), material.clone()); 45 | 46 | renderer.setSize(window.innerWidth, window.innerHeight); 47 | loader.setCrossOrigin('anonymous'); 48 | material.map.needsUpdate = true; 49 | 50 | directionalLight.position.set(0, 1, 1); 51 | 52 | cube.position.set(0, 0, -1.5); 53 | cube.geometry.addAttribute('color', new THREE.BufferAttribute(Float32Array.from([ 54 | 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // right - red 55 | 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // left - blue 56 | 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // top - green 57 | 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, // bottom - yellow 58 | 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, // back - cyan 59 | 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // front - purple 60 | ]), 3)); 61 | loader.load('texture.png', tex => { cube.material.map = tex; start(); }, x => x, err => start()); 62 | 63 | sphere.position.set(0.4, 0, -1.5); 64 | sphere.material.color.set(0xff0000); 65 | sphere.material.roughness = 0.3; 66 | sphere.material.metalness = 0.2; 67 | 68 | cone.position.set(-0.4, 0, -1.5); 69 | cone.material.color.set(0x0000ff); 70 | cone.material.roughness = 0.5; 71 | 72 | torus.scale.set(1.5, 1.5, 1.5); 73 | torus.material.color.set(0x00ff00); 74 | torus.material.roughness = 0.5; 75 | torus.material.metalness = 1.0; 76 | 77 | cursor.position.set(0, 0, -0.5); 78 | cursor.material.transparent = true; 79 | cursor.material.opacity = 0.5; 80 | 81 | scene.add(ambientLight); 82 | scene.add(directionalLight); 83 | scene.add(pointLight); 84 | 85 | scene.add(cube); 86 | scene.add(sphere); 87 | scene.add(cone); 88 | scene.add(torus); 89 | camera.add(cursor); 90 | scene.add(camera); 91 | 92 | cube.frustumCulled = false; 93 | sphere.frustumCulled = false; 94 | cone.frustumCulled = false; 95 | torus.frustumCulled = false; 96 | cursor.frustumCulled = false; 97 | 98 | function initColors (geometry) { 99 | return geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(geometry.attributes.position.array.length).fill(1.0), 3)); 100 | } 101 | 102 | function update (delta, elapsed) { 103 | window.requestAnimationFrame(() => update(clock.getDelta(), clock.getElapsedTime())); 104 | 105 | pointLight.position.set(0 + 2.0 * Math.cos(elapsed * 0.5), 0, -1.5 + 2.0 * Math.sin(elapsed * 0.5)); 106 | cube.rotation.y += 0.01; 107 | sphere.scale.x = sphere.scale.y = sphere.scale.z = Math.abs(Math.cos(elapsed * 0.3)) * 0.6 + 1.0; 108 | cone.position.y = Math.sin(elapsed * 0.5) * 0.1; 109 | torus.position.z = -2 - Math.abs(Math.cos(elapsed * 0.2)); 110 | 111 | raycaster.ray.origin.setFromMatrixPosition(camera.matrixWorld); 112 | raycaster.ray.direction.set(0, 0, -1).transformDirection(camera.matrixWorld); 113 | let intersects = raycaster.intersectObjects(scene.children); 114 | if (intersects.length > 0) { 115 | cursor.material.color.set(0xFFFF00); 116 | cursor.material.opacity = 0.8; 117 | cursor.scale.set(2, 2, 2); 118 | } 119 | else { 120 | cursor.material.color.set(0xFFFFFF); 121 | cursor.material.opacity = 0.5; 122 | cursor.scale.set(1, 1, 1); 123 | } 124 | 125 | if (camera.update) camera.update(); 126 | 127 | renderer.render(scene, camera); 128 | } 129 | 130 | function start () { 131 | update(clock.getDelta(), clock.getElapsedTime()); 132 | } 133 | -------------------------------------------------------------------------------- /template/src/hololens-compatibility/three-patch.js: -------------------------------------------------------------------------------- 1 | // rename transpose shader function to avoid conflict with built-in GLES 3.0 function 2 | module.exports = function(THREE){ 3 | for (var chunk in THREE.ShaderChunk) THREE.ShaderChunk[chunk] = THREE.ShaderChunk[chunk].replace('transpose', 'transpose2'); 4 | return THREE; 5 | } 6 | -------------------------------------------------------------------------------- /template/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | entry: "./src/app.js", 5 | output: { 6 | path: __dirname, 7 | filename: "bundle.js" 8 | }, 9 | devServer: { 10 | contentBase: [path.join(__dirname), path.join(__dirname, "public")], 11 | publicPath: "/" 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.js$/, 17 | exclude: /(node_modules|bower_components)/, 18 | use: { 19 | loader: 'babel-loader' 20 | } 21 | } 22 | ] 23 | } 24 | }; 25 | --------------------------------------------------------------------------------