4D Studio 3D Scripting 101

By @jerome_etienne

What are we gonna talk about ?

Scripting 3D inside 4D Studio
Recipes Style

Who Am I ?

Best Known as the author of Learning Three.js Blog
Wrote more than 45 game extensions for three.js
Lead for Three.js Team at Daqri in Dublin

Contact me on twitter @jerome_etienne

What is 4D Studio ?

Authoring AR experience
Rich edit tools (models, animation, scripting)
Edit once, play everywhere

Scripting 3D in 4D Studio

What We Gonna Learn ?

How to script your 3d in 4D Studio
Create interactive experience
How to select object ?
Change their appearance
etc...

Open 4D Studio link

Set up the basic

Let me show you - demo here

How to create an object ?
How to change its name ?
How to add a script ?

Create An Object

Change Its Name

Where to Put Your Script ? in js console

How To Play Your Script

How To Reach the Scene Variable

// put that early in your script
var scene = this;

scene is the root of your 3d tree (scene graph intro)

How to Select a 3D Object by Name

var object3d = scene.getObjectByName('superObject')

Where to Get the Object3d Names

How to Detect a Click on an Object

var scene = this;
// listen to click event
document.body.addEventListener('click', function(event){
  // find all objects under the mouse click
  var intersects = daqri.util.computeIntersects(event.x, event.y);
  // test if one object is found
  if(intersects.length>0){
    // get the selected object
    var selected = intersects[0].object;
    // here do what you like with it
    console.log('object selected', selected);
  }
})

How to Change An Object Position

Move object to the right

// object3d is the variable containing the 3d javascript object
object3d.position.x += 50;

How to make the object twice bigger

// set x,y,z all in one
object3d.scale.set(2,2,2);

How to Change the Opacity

// here we change the object material
// material is the way the object is reflecting lights
// you can change its color, and so on
// here we change the opacity
object3d.material.opacity = 0.1;
object3d.material.transparent = true

How to Change the Visibility

Here we change the visibility of the 3d object

object3d.visible = true; // false

How to Create a new Object

Let's create a sphere

var geometry = new THREE.SphereGeometry(1);
var material = new THREE.MeshPhongMaterial({
    color : 'red'
});
var object3d = new THREE.Mesh(geometry, material);

How to add an object into the scene

To add an object to a scene

scene.add(object3d)

or with another parent

parent.add(object3d)

How to remove from the scene

scene.remove(object3d);