Create a gist now

Instantly share code, notes, and snippets.

Webruby code vs JavaScript code, both use three.js
// The original JS code for WebGL geometries example in three.js repository
// I only changed the order of the functions for better comparison
// with the Ruby version.
// You can still find the original version inline at http://mrdoob.github.com/three.js/examples/webgl_geometries.html
var container, stats;
var camera, scene, renderer;
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.y = 400;
scene = new THREE.Scene();
var light, object, object2, materials;
scene.add( new THREE.AmbientLight( 0x404040 ) );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 0 );
scene.add( light );
var map = THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg' );
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16;
materials = [
new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: map, side: THREE.DoubleSide } ),
new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1, side: THREE.DoubleSide } )
];
object = THREE.SceneUtils.createMultiMaterialObject( new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 ), materials );
object.position.set( -200, 0, 400 );
scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( new THREE.CylinderGeometry( 25, 75, 100, 40, 5 ), materials );
object.position.set( 0, 0, 400 );
scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( new THREE.IcosahedronGeometry( 75, 1 ), materials );
object.position.set( -200, 0, 200 );
scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( new THREE.OctahedronGeometry( 75, 2 ), materials );
object.position.set( 0, 0, 200 );
scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( new THREE.TetrahedronGeometry( 75, 0 ), materials );
object.position.set( 200, 0, 200 );
scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry( 100, 100, 4, 4 ), materials );
object.position.set( -200, 0, 0 );
scene.add( object );
object2 = THREE.SceneUtils.createMultiMaterialObject( new THREE.CircleGeometry( 50, 10, 0, Math.PI ), materials );
object2.rotation.x = Math.PI/2;
object.add( object2 );
object = THREE.SceneUtils.createMultiMaterialObject( new THREE.SphereGeometry( 75, 20, 10 ), materials );
object.position.set( 0, 0, 0 );
scene.add( object );
var points = [];
for ( var i = 0; i < 50; i ++ ) {
points.push( new THREE.Vector3( Math.sin( i * 0.2 ) * 15 + 50, 0, ( i - 5 ) * 2 ) );
}
object = THREE.SceneUtils.createMultiMaterialObject( new THREE.LatheGeometry( points, 20 ), materials );
object.position.set( 200, 0, 0 );
scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( new THREE.TorusGeometry( 50, 20, 20, 20 ), materials );
object.position.set( -200, 0, -200 );
scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( new THREE.TorusKnotGeometry( 50, 10, 50, 20 ), materials );
object.position.set( 0, 0, -200 );
scene.add( object );
object = new THREE.AxisHelper( 50 );
object.position.set( 200, 0, -200 );
scene.add( object );
object = new THREE.ArrowHelper( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 0 ), 50 );
object.position.set( 200, 0, 400 );
scene.add( object );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function render() {
var timer = Date.now() * 0.0001;
camera.position.x = Math.cos( timer ) * 800;
camera.position.z = Math.sin( timer ) * 800;
camera.lookAt( scene.position );
for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
var object = scene.children[ i ];
object.rotation.x = timer * 5;
object.rotation.y = timer * 2.5;
}
renderer.render( scene, camera );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
init();
animate();
# WebGL example powered by three.js
# This example is originated from http://mrdoob.github.com/three.js/examples/webgl_geometries.html
$window = MrubyJs::get_root_object
$document = $window.document
$three = $window.THREE
$container = $stats = nil
$camera = $scene = $renderer = nil
unless $window.Detector.webgl
$window.Detector.addGetWebGLMessage[]
end
def onWindowResize
if $camera
$camera.aspect = $window.innerWidth / $window.innerHeight
$camera.updateProjectionMatrix[]
end
if $renderer
$renderer.setSize($window.innerWidth, $window.innerHeight)
end
end
def init
$container = $document.createElement('div')
$document.body.appendChild($container)
$camera = $three.PerspectiveCamera.invoke_new(
45, $window.innerWidth / $window.innerHeight, 1, 2000)
$camera.position.y = 400
$scene = $three.Scene.invoke_new
$scene.add($three.AmbientLight.invoke_new(0x404040))
light = $three.DirectionalLight.invoke_new(0xffffff)
light.position.call(:set, 0, 1, 0)
$scene.add(light)
map = $three.ImageUtils.loadTexture("textures/ash_uvgrid01.jpg")
map.wrapS = map.wrapT = $three.RepeatWrapping
map.anisotropy = 16
materials = [$three.MeshLambertMaterial.invoke_new({ambient: 0xbbbbbb, map: map, side: $three.DoubleSide}),
$three.MeshBasicMaterial.invoke_new({color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1, side: $three.DoubleSide})]
object_create_func = $three.SceneUtils.createMultiMaterialObject
object = object_create_func[$three.CubeGeometry.invoke_new(100, 100, 100, 4, 4, 4), materials]
object.position.call(:set, -200, 0, 400)
$scene.add(object)
object = object_create_func[$three.CylinderGeometry.invoke_new(25, 75, 100, 40, 5), materials]
object.position.call(:set, 0, 0, 400)
$scene.add(object)
object = object_create_func[$three.IcosahedronGeometry.invoke_new(75, 1), materials]
object.position.call(:set, -200, 0, 200)
$scene.add(object)
object = object_create_func[$three.OctahedronGeometry.invoke_new(75, 2), materials]
object.position.call(:set, 0, 0, 200)
$scene.add(object)
object = object_create_func[$three.TetrahedronGeometry.invoke_new(75, 0), materials]
object.position.call(:set, 200, 0, 200)
$scene.add(object)
object = object_create_func[$three.PlaneGeometry.invoke_new(100, 100, 4, 4), materials]
object.position.call(:set, -200, 0, 0)
$scene.add(object)
object2 = object_create_func[$three.CircleGeometry.invoke_new(50, 10, 0, Math::PI), materials]
object2.rotation["x"] = Math::PI / 2
object.add(object2)
object = object_create_func[$three.SphereGeometry.invoke_new(75, 20, 10), materials]
object.position.call(:set, 0, 0, 0)
$scene.add(object)
points = []
vector3_func = $three.Vector3
50.times do |i|
points << vector3_func.invoke_new(Math.sin(i * 0.2) * 15 + 50, 0, (i - 5) * 2)
end
object = object_create_func[$three.LatheGeometry.invoke_new(points, 20), materials]
object.position.call(:set, 200, 0, 0)
$scene.add(object)
object = object_create_func[$three.TorusGeometry.invoke_new(50, 20, 20, 20), materials]
object.position.call(:set, -200, 0, -200)
$scene.add(object)
object = object_create_func[$three.TorusKnotGeometry.invoke_new(50, 10, 50, 20), materials]
object.position.call(:set, 0, 0, -200)
$scene.add(object)
object = $three.AxisHelper.invoke_new(50)
object.position.call(:set, 200, 0, -200)
$scene.add(object)
object = $three.ArrowHelper.invoke_new(vector3_func.invoke_new(0, 1, 0),
vector3_func.invoke_new(0, 0, 0), 50)
object.position.call(:set, 200, 0, 400)
$scene.add(object)
$renderer = $three.WebGLRenderer.invoke_new({antialias: true})
$renderer.setSize($window.innerWidth, $window.innerHeight)
$container.appendChild($renderer.domElement)
$stats = $window.Stats.invoke_new
$stats.domElement.style.position = 'absolute'
$stats.domElement.style.top = '0px'
$container.appendChild( $stats.domElement )
$window.addEventListener('resize', :onWindowResize.to_proc, false)
end
def do_render
t = Time.now
timer = t.sec * 0.1 + t.usec * 0.0000001
$camera.position.x = Math.cos(timer) * 800
$camera.position.z = Math.sin(timer) * 800
$camera.lookAt( $scene.position )
$scene.children.each do |object|
object.rotation.x = timer * 5
object.rotation.y = timer * 2.5
end
$renderer.render($scene, $camera)
end
def animate
$window.requestAnimationFrame(:animate.to_proc)
do_render
$stats.update[]
end
init
animate
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment