Commit WIP

This commit is contained in:
Shawn 2018-12-31 11:05:31 -06:00
parent 6b735b8899
commit 422ce4978b
14 changed files with 4078 additions and 0 deletions

3
.babelrc Normal file
View file

@ -0,0 +1,3 @@
{
"presets": ["env", "react"]
}

65
index.js Normal file
View file

@ -0,0 +1,65 @@
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const middleware = require('webpack-dev-middleware');
const compiler = webpack({
devtool: 'eval-source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
resolve: {
modules: ['node_modules', path.resolve(`node_modules/altspace/node_modules`)],
alias: {
//firebase: path.resolve(`node_modules/altspace/lib/firebase.min`),
//urllib: path.resolve(`node_modules/altspace/lib/url.min`),
//please: path.resolve(`node_modules/altspace/lib/Please.min`),
},
},
devServer: {
contentBase: './',
hot: true
},
});
const express = require('express');
const app = express();
app.use(middleware(compiler, {
// webpack-dev-middleware options
}));
/*
app.get('/skullart.stl', (req, res) => {
res.render('skullart.stl');
});
*/
app.use(express.static('public'))
/*
app.get('/', (req, res) => {
if(/AltspaceVR\-App/.test(req.headers['user-agent'])) {
console.log('In VR!');
res.render('index.html');
} else {
res.send(
`<!DOCTYPE><html><head><title>Spee.ch VR</title></head><body>Error: Must be ran in AltspaceVR</body></html>`
);
}
});
*/
app.listen(8000, () => {
console.log('Example app listening on port 8000!')
});

30
package.json Normal file
View file

@ -0,0 +1,30 @@
{
"name": "speechvr",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"altspace": "^2.9.0",
"express": "^4.16.3"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"pleasejs": "^0.4.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"script-loader": "^0.7.2",
"three": "0.84.0",
"webpack": "^4.16.4",
"webpack-dev-middleware": "^3.1.3"
}
}

4
public/README.md Normal file
View file

@ -0,0 +1,4 @@
These STL files are for demo/development purposes only and not to be used in a production environment.
skullart.stl - https://www.thingiverse.com/thing:1388237
fox.stl - https://www.thingiverse.com/thing:937740

BIN
public/always-grey.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 226 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

BIN
public/fox.stl Normal file

Binary file not shown.

BIN
public/lighting_fix.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

BIN
public/pattern.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 KiB

BIN
public/plus_white.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/skullart.stl Normal file

Binary file not shown.

69
src/index.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://cdn.rawgit.com/NGenesis/altspacevr-behaviors/bd11cce8/js/altspaceutil.min.js"></script>
<!-- <script src="https://sdk.altvr.com/libs/altspace.js/2.9.0/altspace.min.js"></script> -->
</head>
<body>
<script>
/*
var sim = new altspace.utilities.Simulation();
var config = { authorId: 'AltspaceVR', appId: 'DragEvents' };
var sceneSync;
var enclosure;
//Get the enclosure
altspace.getEnclosure().then(function(e) {
enclosure = e;
//Connect to sync server
altspace.utilities.sync.connect(config).then(function(connection) {
//Retrieve SceneSync
sceneSync = new altspace.utilities.behaviors.SceneSync(connection.instance, {
instantiators: {'Cube': createCube },//Create the cube
ready: ready//Ready!
});
//Add SceneSync to the scene
sim.scene.addBehavior(sceneSync);
});
});
function createCube() {
//Create cube
var cubeSize = enclosure.innerWidth / 10;
var geometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
var material = new THREE.MeshBasicMaterial({color:'green'});
var cube = new THREE.Mesh(geometry, material);
//Bring the cube down closer to the user
cube.position.y = (enclosure.innerHeight / 4) * -1;
//Add behaviors
cube.addBehaviors(
new altspace.utilities.behaviors.Object3DSync({position: true}),
new altspace.utilities.behaviors.Drag({
//Limit drag to within bounds of the enclosure
x: { min: (enclosure.innerWidth / 3) * -1, max: (enclosure.innerWidth / 3)},
z: { min: (enclosure.innerDepth / 3) * -1, max: (enclosure.innerDepth / 3)}
})
);
//Add event listeners
addCubeListeners(cube);
sim.scene.add(cube);
return cube;
}
function addCubeListeners(cube){
//Add 'Drag Start' event listener
cube.addEventListener('dragstart', function (data) {
cube.material.color.setStyle('blue');
});
//Add 'Drag Stop' event listener
cube.addEventListener('dragstop', function (data) {
cube.material.color.setStyle('red');
});
}
function ready(firstInstance) {
if (firstInstance) {
sceneSync.instantiate('Cube');
}
}
*/
</script>
</body>
</html>

244
src/index.js Normal file
View file

@ -0,0 +1,244 @@
/*
import React from 'react';
import ReactDOM from 'react-dom';
const Index = () => {
return <div>Hello React!</div>;
};
ReactDOM.render(<Index />, document.body);
*/
window.Please = require('altspace/lib/Please.min')
require('altspace');
import STLloader from 'three/examples/js/loaders/STLLoader'
import SimplifyModifier from 'three/examples/js/modifiers/SimplifyModifier';
import BufferGeometryUtils from 'three/examples/js/BufferGeometryUtils'
import NativeComponent from 'altspace/src/components/NativeComponent'
var modifer = new THREE.SimplifyModifier();
var sim = new altspace.utilities.Simulation();
var config = {
authorId: 'Shawn Khameneh',
appId: 'DemoApp',
};
var sceneSync;
var enclosure;
function updateGeometryUv(geometry) {
let max = geometry.boundingBox.max,
min = geometry.boundingBox.min;
let offset = new THREE.Vector2(0 - min.x, 0 - min.y);
let range = new THREE.Vector2(max.x - min.x, max.y - min.y);
let faces = geometry.faces;
geometry.faceVertexUvs[0] = [];
for(let i = 0; i < faces.length ; i++) {
let v1 = geometry.vertices[faces[i].a],
v2 = geometry.vertices[faces[i].b],
v3 = geometry.vertices[faces[i].c];
geometry.faceVertexUvs[0].push([
new THREE.Vector2((v1.x + offset.x)/range.x ,(v1.y + offset.y)/range.y),
new THREE.Vector2((v2.x + offset.x)/range.x ,(v2.y + offset.y)/range.y),
new THREE.Vector2((v3.x + offset.x)/range.x ,(v3.y + offset.y)/range.y)
]);
}
geometry.uvsNeedUpdate = true;
}
//Get the enclosure
altspace.getEnclosure().then(function(e) {
enclosure = e;
enclosure.requestFullspace();
/*
var popupUrl = 'http://localhost:8000/noop' + location.search;
altspace.open(popupUrl, '_experience', {
target: '_experience',
icon: 'http://localhost:8000/plus_white.png',
hidden: true
}).then((popup) => {
console.log('open popup', popup);
popup.show = () => console.log('popup show', popup);
//popup.close();
});
*/
const METER = enclosure.pixelsPerMeter;
console.log(enclosure);
//Connect to sync server
altspace.utilities.sync.connect(config).then(function(connection) {
//Retrieve SceneSync
sceneSync = new altspace.utilities.behaviors.SceneSync(connection.instance, {
instantiators: {
'Cube': createCube,
},
ready: function(firstInstance) {
console.log('ready');
if (firstInstance) {
sceneSync.instantiate('Cube');
}
}
});
//Add SceneSync to the scene
let steamVrInput = new altspace.utilities.behaviors.SteamVRInput();
sim.scene.addBehavior(steamVrInput);
sim.scene.addBehavior(sceneSync);
let edit_button = new THREE.Object3D();
edit_button.addBehaviors(new altspaceutil.behaviors.NativeComponent('n-cockpit-parent', {}, { useCollider: false }));
edit_button.position.set(1, -.5, -1.5);
let open_panel_button = new THREE.Mesh(new THREE.PlaneGeometry(.1,.1),new THREE.MeshBasicMaterial({transparent:true,map:new THREE.TextureLoader().load('plus_white.png')}));
edit_button.rotation.set( -.18, -.1, 0 );
edit_button.add(open_panel_button);
sim.scene.add(edit_button);
loadCurrentFile((bufferGeometry) => {
let newSync = new altspace.utilities.behaviors.SceneSync(connection.instance, {
instantiators: {
'CurrentFile': function() {
//let tolerance = 100000;
//var simplifiedGeometry = modifer.modify( geometry, tolerance );
var geometry = new THREE.Geometry().fromBufferGeometry( bufferGeometry );
geometry.attributes = bufferGeometry.attributes;
geometry.computeFaceNormals();
geometry.mergeVertices();
geometry.computeVertexNormals();
//console.log(geometry.attr)
geometry.computeBoundingBox();
geometry.index = 0;
//geometry.addAttribute( 'uv', new THREE.BufferAttribute( 20000, 2 ));
updateGeometryUv(geometry);
geometry.normalize(); // scale to "1"
let newScale = METER * 0.5;
geometry.scale(newScale, newScale, newScale);
THREE.BufferGeometryUtils.computeTangents(geometry);
var simplifiedGeometry = geometry;
//simplifiedGeometry.dynamic = true;
var texture = new THREE.TextureLoader().load( './lighting_fix.png' );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 0.2, 0.2 );
var material = new THREE.MeshBasicMaterial({
color: 'green',
map: texture,
});
var mesh = new THREE.Mesh( simplifiedGeometry, material );
mesh.rotation.set( - Math.PI / 2, 0, 0 );
mesh.position.y = (geometry.boundingBox.max.y - geometry.boundingBox.min.y) / 2;
//mesh.castShadow = true;
//mesh.receiveShadow = true;
console.log(steamVrInput);
mesh.addBehaviors(
new altspace.utilities.behaviors.Object3DSync({position: true}),
new altspace.utilities.behaviors.Drag({
//Limit drag to within bounds of the enclosure
x: { min: (enclosure.innerWidth / 3) * -1, max: (enclosure.innerWidth / 3)},
//z: { min: (enclosure.innerDepth / 3) * -1, max: (enclosure.innerDepth / 3)},
y: true,
}),
//new altspaceutil.behaviors.TransformControls({ controlType: 'position', showButtons: true }),
//new altspace.utilities.behaviors.SteamVRTrackedObject()
);
sim.scene.add( mesh );
return mesh;
},
},
ready: function (firstInstance) {
if(firstInstance) {
newSync.instantiate('CurrentFile');
}
}
});
sim.scene.addBehavior(newSync);
})
});
});
function createCube() {
var cubeSize = 1;
var geometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
var texture = new THREE.TextureLoader().load( './pattern.png' );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 10, 10 );
var material = new THREE.MeshBasicMaterial({
color: 'green',
map: texture,
});
var cube = new THREE.Mesh(geometry, material);
//Bring the cube down closer to the user
//cube.position.y = (enclosure.innerHeight / 4) * -1;
cube.position.y = cubeSize;
//Add behaviors
cube.addBehaviors(
new altspace.utilities.behaviors.Object3DSync({position: true}),
new altspace.utilities.behaviors.Drag({
//Limit drag to within bounds of the enclosure
x: { min: (enclosure.innerWidth / 3) * -1, max: (enclosure.innerWidth / 3)},
z: { min: (enclosure.innerDepth / 3) * -1, max: (enclosure.innerDepth / 3)}
})
);
//Add event listeners
addCubeListeners(cube);
sim.scene.add(cube);
return cube;
}
function loadCurrentFile(callback) {
var loader = new THREE.STLLoader();
loader.load( './fox.stl', function ( geometry ) {
callback(geometry);
});
}
function instantiateCurrentFile() {
console.log('instantiateCurrentFile', window.CurrentFileMesh)
return window.CurrentFileMesh;
}
function addCubeListeners(cube){
//Add 'Drag Start' event listener
cube.addEventListener('dragstart', function (data) {
cube.material.color.setStyle('blue');
});
//Add 'Drag Stop' event listener
cube.addEventListener('dragstop', function (data) {
cube.material.color.setStyle('orange');
});
}

3663
yarn.lock Normal file

File diff suppressed because it is too large Load diff