Project 3 Three js Project Overview In this project you will create a unique 3D

Question

Project 3 Three js Project Overview In this project you will create a unique 3D animated scene composed of Three.js graphic components. The scene should include animation, lighting and multiple objects. Requirements: 1. Using Three.js create a unique 3D animated scene. The scene has the following specifications: a. Size: minimum of 640x480 b. Includes at least 6 different shapes c. Uses multiple lighting effects d. Includes radio buttons, slider bars or other widgets to turn on or off certain components of the animation. 2. Use Three.js 3. All JavaScript source code should be written using Google JavaScript style guide.( http://google.github.io/styleguide/jsguide.html) 4. Prepare, conduct and document a test plan verifying your application is working as expected. This plan should include a test matrix listing each method you tested, how you tested it, and the results of testing Deliverables: 1. All JavaScript source code used for this project. Code should adhere to the Google Javascript style guide. 2. Word or PDF file demonstrating with clearly labeled screen captures and associated well-written descriptions, the successful execution of your 3D Three.js animated scene. The document should be well-written, well-organized, includes the test plan, include page numbers, captions for all screen captures, and a title page including your name, class, section number and date. References should be included for all sources used and formatted in APA style.

Explanation / Answer

var eyeRight = new THREE.Matrix4();
eyeLeft = new THREE.Matrix4();
focalLength = 125;
_aspect, _near, _far, _fov; var _cameraL = new THREE.PerspectiveCamera();
_cameraL.matrixAutoUpdate = false;
var _cameraR = new THREE.PerspectiveCamera();
_cameraR.matrixAutoUpdate = false;
var _camera = new THREE.OrthographicCamera( -1, 1, 1, - 1, 0, 1 );
var _scene = new THREE.Scene();
var _params = { minFilter: THREE.LinearFilter, magFilter:
THREE.NearestFilter, format: THREE.RGBAFormat };
if ( width === undefined ) width = 512;
if ( height === undefined ) height = 512;
var _renderTargetL = new THREE.WebGLRenderTarget( width, height,
_params );
var _renderTargetR = new THREE.WebGLRenderTarget( width, height,
_params );
var _material = new THREE.ShaderMaterial( {
uniforms: {
"mapLeft": { type: "t", value: _renderTargetL },
"mapRight": { type: "t", value: _renderTargetR }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"
"
position, 1.0 );", vUv = vec2( uv.x, uv.y );",
gl_Position = projectionMatrix * modelViewMatrix * vec4( "}".join("

"),
fragmentShader: [
"uniform sampler2D mapLeft;",
"uniform sampler2D mapRight;",
"varying vec2 vUv;",
"void main() {", "
" vec4 colorL, colorR;",
vec2 uv = vUv;", "
" colorL = texture2D( mapLeft, uv );",
colorR = texture2D( mapRight, uv );",
// http://3dtv.at/Knowhow/AnaglyphComparison_en.aspx "
gl_FragColor = vec4( colorL.g * 0.7 + colorL.b * 0.3,
colorR.g, colorR.b, colorL.a + colorR.a ) * 1.1;",
"}".join("

")
} );
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ),
_material );
_scene.add( mesh );
this.setSize = function ( width, height ) {
if ( _renderTargetL ) _renderTargetL.dispose();
if ( _renderTargetR ) _renderTargetR.dispose();
_renderTargetL = new THREE.WebGLRenderTarget( width, height, _params ); _renderTargetR = new THREE.WebGLRenderTarget( width, height, _params ); _material.uniforms[ "mapLeft" ].value = _renderTargetL;
_material.uniforms[ "mapRight" ].value = _renderTargetR;
renderer.setSize( width, height );
}; is /*
* Renderer now uses an asymmetric perspective projection
* (http://paulbourke.net/miscellaneous/stereographics/stereorender/).
*
* Each camera is offset by the eye seperation and its projection matrix plane.
to 0. * also skewed asymetrically back to converge on the same projection
* Added a focal length parameter to, this is where the parallax is equal
*/ this.render = function ( scene, camera ) {
scene.updateMatrixWorld();
if ( camera.parent === undefined ) camera.updateMatrixWorld();
var hasCameraChanged = ( _aspect !== camera.aspect ) || ( _near !==
camera.near ) || ( _far !== camera.far ) || ( _fov !== camera.fov );
if ( hasCameraChanged ) {
_aspect = camera.aspect;
_near = camera.near;
_far = camera.far; _fov = camera.fov;
var
var
var
var
); projectionMatrix = camera.projectionMatrix.clone();
eyeSep = focalLength / 30 * 0.5;
eyeSepOnProjection = eyeSep * _near / focalLength;
ymax = _near * Math.tan( THREE.Math.degToRad( _fov * 0.5 ) var xmin, xmax;
// translate xOffset
eyeRight.elements[12] = eyeSep;
eyeLeft.elements[12] = -eyeSep;
// for left eye
xmin = -ymax * _aspect + eyeSepOnProjection;
xmax = ymax * _aspect + eyeSepOnProjection;
projectionMatrix.elements[0] = 2 * _near / ( xmax - xmin );
projectionMatrix.elements[8] = ( xmax + xmin ) / ( xmax - xmin ); _cameraL.projectionMatrix.copy( projectionMatrix );
// for right eye
xmin = -ymax * _aspect - eyeSepOnProjection;
xmax = ymax * _aspect - eyeSepOnProjection;
projectionMatrix.elements[0] = 2 * _near / ( xmax - xmin );
projectionMatrix.elements[8] = ( xmax + xmin ) / ( xmax - xmin
);
_cameraR.projectionMatrix.copy( projectionMatrix );
}
_cameraL.matrixWorld.copy( camera.matrixWorld ).multiply( eyeLeft );
_cameraL.position.copy( camera.position );
_cameraL.near = camera.near;
_cameraL.far = camera.far;
renderer.render( scene, _cameraL, _renderTargetL, true );
_cameraR.matrixWorld.copy( camera.matrixWorld ).multiply( eyeRight );
_cameraR.position.copy( camera.position );
_cameraR.near = camera.near;
_cameraR.far = camera.far;
renderer.render( scene, _cameraR, _renderTargetR, true );
renderer.render( _scene, _camera );
};
this.dispose = function() {
if ( _renderTargetL ) _renderTargetL.dispose();
if ( _renderTargetR ) _renderTargetR.dispose();
}
};

Related Questions

Navigate

• Browse (All)
• Browse P
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.