Beginning development:

After selecting my coding environment, language and library I have spent some considerable time examining the example source code (http://threejs.org/examples/). There is also some helpful documents to get you started (http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene). From this research I discovered that you need to set up the scene camera and renderer:

“var scene = new THREE.Scene();”

“var camera = new THREE.PerspectiveCamera( Field of view, aspect, near, far)”

“var renderer = new THREE.WebGLRenderer();”

Then add the camera to the scene: “scene.add(camera);”

After the initial scene set up, you are free to place objects within the scene, for example:

“var cubeGeom = new THREE.CubeGeometry(width, height, depth);”

“var cubeMaterial = new THREE.MeshBasicMaterial( {color: HexCode} );”

“var cube = new THREE.Mesh( cubeGeom, cubeMaterial );

scene.add( cube );

The position will automatically be set to 0,0,0 but that’s the same location that the camera is automatically placed, so simply set “camera.position.z = 5;” will move the camera back 5 units.

Viola! When you run the scene you’ll be able to see a stationary cube!

Image

If you want to effect your cube, for example rotating it simply set “cube.rotation.y += 0.01;” in the render function and every step the cube will rotate + 0.01 on the y axis.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s