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