Commit WIP
This commit is contained in:
parent
6b735b8899
commit
422ce4978b
14 changed files with 4078 additions and 0 deletions
3
.babelrc
Normal file
3
.babelrc
Normal file
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"presets": ["env", "react"]
|
||||
}
|
65
index.js
Normal file
65
index.js
Normal 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
30
package.json
Normal 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
4
public/README.md
Normal 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
BIN
public/always-grey.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 226 B |
BIN
public/diamond-upholstery.png
Normal file
BIN
public/diamond-upholstery.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 8.9 KiB |
BIN
public/fox.stl
Normal file
BIN
public/fox.stl
Normal file
Binary file not shown.
BIN
public/lighting_fix.png
Normal file
BIN
public/lighting_fix.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 61 KiB |
BIN
public/pattern.png
Normal file
BIN
public/pattern.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 171 KiB |
BIN
public/plus_white.png
Normal file
BIN
public/plus_white.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
BIN
public/skullart.stl
Normal file
BIN
public/skullart.stl
Normal file
Binary file not shown.
69
src/index.html
Normal file
69
src/index.html
Normal 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
244
src/index.js
Normal 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');
|
||||
});
|
||||
}
|
Loading…
Reference in a new issue