Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Jake Read
rndmc
Commits
272032cf
Commit
272032cf
authored
Dec 08, 2018
by
Jake Read
Browse files
three canvas shoot thru
parent
4aa2a38f
Changes
6
Hide whitespace changes
Inline
Side-by-side
canvas.js
View file @
272032cf
...
...
@@ -10,6 +10,9 @@ var program = Programs.new('new program')
var
canvas
=
Programs
.
loadModuleFromSource
(
program
,
'
./modules/ui/threeCanvas.js
'
)
Programs
.
setUI
(
canvas
,
200
,
200
)
var
array
=
Programs
.
loadModuleFromSource
(
program
,
'
./modules/util/array.js
'
)
array
.
state
.
array
=
[
2
,
4
]
array
.
outputs
.
out
.
attach
(
canvas
.
inputs
.
xy1
)
// UI
const
View
=
require
(
'
./views.js
'
)
...
...
client/ui/threeCanvas.js
View file @
272032cf
...
...
@@ -20,22 +20,16 @@
// grid
var
gridHelper
=
new
THREE
.
GridHelper
(
10
,
100
)
gridHelper
.
translateOnAxis
(
new
THREE
.
Vector3
(
0
,
0
,
1
),
-
0.01
)
gridHelper
.
rotateX
(
-
Math
.
PI
/
2
)
gridHelper
.
translateOnAxis
(
new
THREE
.
Vector3
(
0
,
0
,
1
),
-
0.01
)
gridHelper
.
rotateX
(
-
Math
.
PI
/
2
)
scene
.
add
(
gridHelper
)
/*
// floor
var flrGeo = new THREE.PlaneBufferGeometry(2000, 2000, 8, 8)
var flrMat = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.DoubleSide })
var floor = new THREE.Mesh(flrGeo, flrMat)
scene.add(floor);
*/
//
adding to sce
ne
//
one li
ne
var
material
=
new
THREE
.
LineBasicMaterial
({
color
:
0x00ffff
})
var
geometry
=
new
THREE
.
Geometry
()
geometry
.
vertices
.
push
(
new
THREE
.
Vector3
(
-
10
,
0
,
0
))
geometry
.
vertices
.
push
(
new
THREE
.
Vector3
(
0
,
2
,
2
))
geometry
.
vertices
.
push
(
new
THREE
.
Vector3
(
0
,
0
,
0
))
geometry
.
vertices
.
push
(
new
THREE
.
Vector3
(
0.5
,
0
,
0.5
))
geometry
.
vertices
.
push
(
new
THREE
.
Vector3
(
1
,
0
,
0.5
))
var
line
=
new
THREE
.
Line
(
geometry
,
material
)
scene
.
add
(
line
)
...
...
@@ -48,8 +42,10 @@
var
animate
=
function
()
{
requestAnimationFrame
(
animate
)
/*
line.geometry.vertices[1].x += 0.01
line.geometry.verticesNeedUpdate = true
*/
controls
.
update
()
renderer
.
render
(
scene
,
camera
)
...
...
@@ -73,10 +69,12 @@
// the server
threeCanvas
.
onMessage
=
function
(
msg
)
{
//console.log('got message in client side ui object', msg)
if
(
msg
.
call
==
'
setXY
'
)
{
// do stuff
}
else
if
(
msg
.
call
==
'
anotherThing
'
)
{
//
if
(
msg
.
call
==
'
setXY1
'
)
{
line
.
geometry
.
vertices
[
1
].
set
(
msg
.
argument
[
0
],
msg
.
argument
[
1
],
msg
.
argument
[
2
])
line
.
geometry
.
verticesNeedUpdate
=
true
}
else
if
(
msg
.
call
==
'
setXY2
'
)
{
line
.
geometry
.
vertices
[
2
].
set
(
msg
.
argument
[
0
],
msg
.
argument
[
1
],
msg
.
argument
[
2
])
line
.
geometry
.
verticesNeedUpdate
=
true
}
else
if
(
msg
.
call
==
'
setRows
'
)
{
//
}
else
{
...
...
modules/ui/threeCanvas.js
View file @
272032cf
...
...
@@ -6,7 +6,7 @@ let State = JSUnit.State
// interface elements
const
JSUI
=
require
(
'
../../src/jsui.js
'
)
let
UI
=
JSUI
.
UI
let
UI
=
JSUI
.
UI
// a constructor, a fn, a javascript mess
function
PointOnCanvas
()
{
...
...
@@ -23,27 +23,32 @@ function PointOnCanvas() {
// alias !
var
state
=
ptOnCanvas
.
state
ptOnCanvas
.
ui
=
UI
()
var
ui
=
ptOnCanvas
.
ui
ui
.
addElement
(
'
threeCanvas
'
,
'
./ui/threeCanvas.js
'
,
onUICallback
)
ui
.
threeCanvas
.
onload
=
function
(){
console
.
log
(
'
canvas is loaded
'
)
}
ptOnCanvas
.
inputs
=
{
xy
:
Input
(
'
array
'
,
onNewPoint
)
xy1
:
Input
(
'
array
'
,
onNewXY1
),
xy2
:
Input
(
'
array
'
,
onNewXY2
)
// do some canvas stuff
}
ptOnCanvas
.
outputs
=
{
log
:
Output
(
'
string
'
)
//log: Output('string')
}
ptOnCanvas
.
ui
=
UI
()
var
ui
=
ptOnCanvas
.
ui
ui
.
addElement
(
'
threeCanvas
'
,
'
./ui/threeCanvas.js
'
,
onUICallback
)
ui
.
threeCanvas
.
onload
=
function
()
{
console
.
log
(
'
canvas is loaded
'
)
}
function
onNewXY1
(
array
)
{
ui
.
threeCanvas
.
updateXY1
([
array
[
0
],
0
,
array
[
1
]])
}
function
onNew
Point
(
array
)
{
console
.
log
(
'
pt inputs to ptOnCanvas
'
,
array
)
function
onNew
XY2
(
array
){
ui
.
threeCanvas
.
updateXY2f
([
array
[
0
],
0
,
array
[
1
]]
)
}
function
onUICallback
(
msg
){
function
onUICallback
(
msg
)
{
console
.
log
(
'
msg callback from threeCanvas ui element
'
,
msg
)
}
...
...
modules/util/array.js
0 → 100644
View file @
272032cf
// boilerplate rndmc header
const
JSUnit
=
require
(
'
../../src/jsunit.js
'
)
let
Input
=
JSUnit
.
Input
let
Output
=
JSUnit
.
Output
let
State
=
JSUnit
.
State
// interface elements
const
JSUI
=
require
(
'
../../src/jsui.js
'
)
let
UI
=
JSUI
.
UI
// a constructor, a fn, a javascript mess
function
UIArray
()
{
// this is the tiny program-as-and-object that we'll load into rundmc
// description / name is required to load successfully
var
uiArray
=
{
description
:
{
name
:
'
array-output
'
,
alt
:
'
for clicking
'
}
}
// the State() object is what the system scrapes for ui variables / updates from the UI
// this includes things like Button('title', callback), which are unique state variables
// they can also be found in jsunit.js
uiArray
.
state
=
State
()
// alias !
var
state
=
uiArray
.
state
state
.
array
=
[
1.2
,
5.5
,
7.1
]
uiArray
.
ui
=
UI
()
var
ui
=
uiArray
.
ui
ui
.
addElement
(
'
onArrayButton
'
,
'
./ui/uiButton.js
'
,
onArrayDesire
)
ui
.
onArrayButton
.
onload
=
function
()
{
ui
.
onArrayButton
.
setText
(
'
array out ->
'
)
}
// inputs are required, and must be Input('type', callback)
uiArray
.
inputs
=
{
thru
:
Input
(
'
any
'
,
onThruInput
),
// makes anything into num event
evt
:
Input
(
'
any
'
,
onArrayDesire
)
}
// outputs: Output('type')
uiArray
.
outputs
=
{
out
:
Output
(
'
number
'
)
}
// here's our input callback, specified in the input constructor
function
onThruInput
(
input
){
if
(
typeof
input
==
'
number
'
){
state
.
number
=
input
}
else
{
state
.
number
=
parseFloat
(
input
)
}
onArrayDesire
()
}
function
onArrayDesire
(){
// here's how we fire an output.
uiArray
.
outputs
.
out
.
emit
(
state
.
array
)
}
// gotta give the program this thing we made
return
uiArray
}
// this for node.js's require() function
module
.
exports
=
UIArray
\ No newline at end of file
modules/u
i
/number.js
→
modules/u
til
/number.js
View file @
272032cf
File moved
src/ui/threeCanvas.js
View file @
272032cf
...
...
@@ -10,8 +10,8 @@ function ThreeCanvasUIElement() {
// hook to recv messages from the ui counterpart
threeCanvasUIElement
.
onMessage
=
function
(
msg
)
{
//console.log('message into server side object', msg)
if
(
msg
==
'
onload
'
){
this
.
onload
()
if
(
msg
==
'
onload
'
)
{
this
.
onload
()
}
else
{
// do other message stuff?
// is this why callback ?
...
...
@@ -20,7 +20,25 @@ function ThreeCanvasUIElement() {
}
}
threeCanvasUIElement
.
updateXY1
=
function
(
arary
)
{
// ex. of how to send data up to client
var
msg
=
{
call
:
'
setXY1
'
,
argument
:
arary
}
// this.sendToUi is given to us during load
this
.
sendToUi
(
msg
)
}
threeCanvasUIElement
.
updateXY2
=
function
(
arary
)
{
// ex. of how to send data up to client
var
msg
=
{
call
:
'
setXY2
'
,
argument
:
arary
}
// this.sendToUi is given to us during load
this
.
sendToUi
(
msg
)
}
return
threeCanvasUIElement
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment