three.js - OrthographicTrackballControls vs. TrackballControls -

three.js - OrthographicTrackballControls vs. TrackballControls -

i've implemented scene utilize both orthographic , perspective cameras, , respective trackball controls. feels they're out of sync.

sometimes results of switching between them expected, while other times output wrong.

in image below, rotated model in perspective mode, took snapshot, checked box set in ortho mode, , took sec snapshot. there no other manipulation done scene between switching cameras.

here is working expected after slight rotation in perspective mode:

and here after random rotations while in perspective mode:

(i know have zooming issues well--i'm working on one.)

of course, i'm open thought i'm 1 doing wrong--it has been ages since i've worked ortho cameras, might forgetting concepts, fact works sometimes makes me think i'm @ to the lowest degree on right track, , need nudge in right direction.

i've tried combinedcamera, didn't behave orthographictrackballcontrol.

any input or suggestions appreciated. (r68 & r69)

jsfiddle: http://jsfiddle.net/thejim01/rckanx2l/103/

var hostdiv, scene, renderer, ocamera, pcamera, root, ocontrols, pcontrols, ctrl, light, shape, o; var width = 500, height = 500, fov = 28, near = 1, far = 60; function init() { o = false; hostdiv = document.createelement('div'); document.body.appendchild(hostdiv); renderer = new three.webglrenderer({ antialias: true, preserverdrawingbuffer: true }); renderer.setsize(width, height); hostdiv.appendchild(renderer.domelement); pcamera = new three.perspectivecamera( fov, width / height, near, far ); ocamera = new three.orthographiccamera( 0, 0, 0, 0, near, far ); pcamera.position.z = 50; ocamera.position.z = 10; height = math.tan(pcamera.fov / 2) * 2 * pcamera.near; width = height * pcamera.aspect; ocamera.left = width / -2; ocamera.right = width / 2; ocamera.top = height / 2; ocamera.bottom = height / -2; pcontrols = new three.trackballcontrols(pcamera, renderer.domelement); ocontrols = new three.orthographictrackballcontrols(ocamera, renderer.domelement); lite = new three.pointlight(0xffffff, 1, infinity); scene = new three.scene(); scene.add(pcamera); scene.add(ocamera); scene.add(light); scene.add(new three.hemispherelight(0xffffff, 0xffffff, 0.5)); var cube = colorcube(5); scene.add(cube); pcontrols.target.copy(cube.position); animate(); } function animate() { requestanimationframe(animate); if(o) { light.position.copy(ocamera.position); renderer.render(scene, ocamera); } else { light.position.copy(pcamera.position); renderer.render(scene, pcamera); } ocontrols.update(); pcontrols.update(); } function change(e) { o = e.checked; } function colorcube(scale){ var geo = new three.buffergeometry(); var positions = new float32array( 72 ); var normals = new float32array( 72 ); var colors = new float32array( 72 ); var indices = new uint16array( 36 ); var face = 0, idx = 0, vert = 0; var x = 0, r = 0, y = 1, g = 1, z = 2, b = 2; // front end face (red) positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5; normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = 1.; colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5; normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = 1.; colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5; normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = 1.; colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5; normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = 1.; colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 0.; vert += 3; indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2; indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3; idx += 6; ++face; // face (blue) positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5; normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = -1.; colors[vert + r] = 0.; colors[vert + g] = 0.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5; normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = -1.; colors[vert + r] = 0.; colors[vert + g] = 0.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5; normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = -1.; colors[vert + r] = 0.; colors[vert + g] = 0.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5; normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = -1.; colors[vert + r] = 0.; colors[vert + g] = 0.; colors[vert + b] = 1.; vert += 3; indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2; indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3; idx += 6; ++face; // right face (green) positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5; normals[vert + x] = 1.; normals[vert + y] = 0.; normals[vert + z] = 0.; colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5; normals[vert + x] = 1.; normals[vert + y] = 0.; normals[vert + z] = 0.; colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5; normals[vert + x] = 1.; normals[vert + y] = 0.; normals[vert + z] = 0.; colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5; normals[vert + x] = 1.; normals[vert + y] = 0.; normals[vert + z] = 0.; colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 0.; vert += 3; indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2; indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3; idx += 6; ++face; // left face (magenta) positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5; normals[vert + x] = -1.; normals[vert + y] = 0.; normals[vert + z] = 0.; colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5; normals[vert + x] = -1.; normals[vert + y] = 0.; normals[vert + z] = 0.; colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5; normals[vert + x] = -1.; normals[vert + y] = 0.; normals[vert + z] = 0.; colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5; normals[vert + x] = -1.; normals[vert + y] = 0.; normals[vert + z] = 0.; colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 1.; vert += 3; indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2; indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3; idx += 6; ++face; // top face (cyan) positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5; normals[vert + x] = 0.; normals[vert + y] = 1.; normals[vert + z] = 0.; colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5; normals[vert + x] = 0.; normals[vert + y] = 1.; normals[vert + z] = 0.; colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5; normals[vert + x] = 0.; normals[vert + y] = 1.; normals[vert + z] = 0.; colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5; normals[vert + x] = 0.; normals[vert + y] = 1.; normals[vert + z] = 0.; colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 1.; vert += 3; indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2; indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3; idx += 6; ++face; // bottom face (yellow) positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5; normals[vert + x] = 0.; normals[vert + y] = -1.; normals[vert + z] = 0.; colors[vert + r] = 1.; colors[vert + g] = 1.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5; normals[vert + x] = 0.; normals[vert + y] = -1.; normals[vert + z] = 0.; colors[vert + r] = 1.; colors[vert + g] = 1.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5; normals[vert + x] = 0.; normals[vert + y] = -1.; normals[vert + z] = 0.; colors[vert + r] = 1.; colors[vert + g] = 1.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5; normals[vert + x] = 0.; normals[vert + y] = -1.; normals[vert + z] = 0.; colors[vert + r] = 1.; colors[vert + g] = 1.; colors[vert + b] = 0.; vert += 3; indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2; indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3; idx += 6; ++face; geo.addattribute( 'index', new three.bufferattribute( indices, 1 ) ); geo.addattribute( 'position', new three.bufferattribute( positions, 3 ) ); geo.addattribute( 'normal', new three.bufferattribute( normals, 3 ) ); geo.addattribute( 'color', new three.bufferattribute( colors, 3 ) ); var mat = new three.meshphongmaterial( { color: 0xffffff, ambient: 0xffffff, specular: 0xffffff, shininess: 50, side: three.doubleside, vertexcolors: three.vertexcolors } ); var msh = new three.mesh(geo, mat); msh.scale.multiplyscalar(scale); homecoming msh; } init();

it seems 2 controls indeed out of sync. when added observation camera, , photographic camera helpers, able watch location vectors diverge immediately.

whether that's design or not, don't know. regardless, able working purposes in jsfiddle below.

i gave trying sync controls , rely on perspective photographic camera control. update ortho photographic camera based on orientation of perspective camera, , vice versa.

i'm not going take reply right away, there may improve solutions out there.

update: got both cameras sync together. there must improve way of doing this, i'll leave reply open few days.

jsfiddle: http://jsfiddle.net/thejim01/jkbwk4xn/76/

// p/o photographic camera tester var hostdiv, scene, renderer, light, o; var pcamera, ocamera, watchcamera; var pcontrols, ocontrols; var phelper, ohelper; var width = 600, height = 300, fov = 28, near = 40, far = 60; var obackup, dist = 0; function render() { obackup = ocamera.clone(); light.position.copy(pcontrols.object.position); renderer.clear(); renderer.setviewport(0, 0, width/2, height); if(o) { renderer.render(scene, ocamera); } else { renderer.render(scene, pcamera); } pcontrols.update(); ocontrols.update(); if(o) { // zoom if(obackup.top !== ocamera.top || obackup.right !== ocamera.right || obackup.bottom !== ocamera.bottom || obackup.left !== ocamera.left) { ocamera.position.copy(pcamera.position); } pcamera.position.copy(ocamera.position); pcamera.up.copy(ocamera.up); pcamera.lookat(ocontrols.target); pcontrols.target.copy(ocontrols.target); } else { ocamera.position.copy(pcamera.position); ocamera.up.copy(pcamera.up); ocamera.lookat(pcontrols.target); ocontrols.target.copy(pcontrols.target); } if(pcamera.up.x === undefined) debugger; if(ocamera.up.x === undefined) debugger; dist = pcamera.position.distanceto(pcontrols.target); pcamera.near = dist - 10; pcamera.far = dist + 10; ocamera.near = dist - 10; ocamera.far = dist + 10; pcamera.updateprojectionmatrix(); ocamera.updateprojectionmatrix(); phelper.update(); ohelper.update(); renderer.setviewport(width/2, 0, width/2, height); renderer.render(scene, watchcamera); obackup = null; } function animate() { requestanimationframe(animate); render(); } function init() { o = false; hostdiv = document.createelement('div'); hostdiv.style.position = 'relative'; hostdiv.style.top = '0'; hostdiv.style.left = '0'; document.body.appendchild(hostdiv); var movediv = document.createelement('div'); movediv.style.position = 'absolute'; movediv.style.top = '0'; movediv.style.left = '0'; movediv.style.width = (width/2).tostring() + 'px'; movediv.style.height = (height).tostring() + 'px'; scene = new three.scene(); watchcamera = new three.perspectivecamera( 14, 0.5 * width / height, 1, 1000 ); watchcamera.position.x = 200; watchcamera.position.y = 200; watchcamera.position.z = 200; watchcamera.lookat(new three.vector3(0, 0, 0)); pcamera = new three.perspectivecamera( fov, 0.5* width / height, near, far ); ocamera = new three.orthographiccamera( -12, 12, 12, -12, near, far ); renderer = new three.webglrenderer({ antialias: true, preserverdrawingbuffer: true }); renderer.setsize(width, height); renderer.domelement.style.position = "relative"; hostdiv.appendchild(renderer.domelement); hostdiv.appendchild(movediv); renderer.autoclear = false; pcamera.position.z = 50; ocamera.position.z = 50; pcontrols = new three.trackballcontrols(pcamera, movediv); ocontrols = new three.orthographictrackballcontrols(ocamera, movediv); pcontrols.target.set(0, 0, 0); ocontrols.target.set(0, 0, 0); lite = new three.pointlight(0xffffff, 1., infinity); var hemi = new three.hemispherelight(0xffffff, 0xffffff, 0.5); var cube = colorcube(5); scene.add(pcamera); scene.add(ocamera); scene.add(watchcamera); scene.add(light); scene.add(hemi); scene.add(cube); var debug = true; if(debug) { phelper = new three.camerahelper( pcamera ); scene.add( phelper ); ohelper = new three.camerahelper( ocamera ); scene.add( ohelper ); var spheresize = 1; var pointlighthelper = new three.pointlighthelper( light, spheresize ); scene.add( pointlighthelper ); var arrowxp = new three.arrowhelper( new three.vector3(1, 0, 0), new three.vector3(0, 0, 0), 10, 0x00ff00); scene.add(arrowxp); var arrowxn = new three.arrowhelper( new three.vector3(-1, 0, 0), new three.vector3(0, 0, 0), 10, 0xff00ff); scene.add(arrowxn); var arrowyp = new three.arrowhelper( new three.vector3(0, 1, 0), new three.vector3(0, 0, 0), 10, 0x00ffff); scene.add(arrowyp); var arrowyn = new three.arrowhelper( new three.vector3(0, -1, 0), new three.vector3(0, 0, 0), 10, 0xffff00); scene.add(arrowyn); var arrowzp = new three.arrowhelper( new three.vector3(0, 0, 1), new three.vector3(0, 0, 0), 10, 0xff0000); scene.add(arrowzp); var arrowzn = new three.arrowhelper( new three.vector3(0, 0, -1), new three.vector3(0, 0, 0), 10, 0x0000ff); scene.add(arrowzn); } animate(); } function change(e) { o = e.checked; } function colorcube(scale){ var geo = new three.buffergeometry(); var positions = new float32array( 72 ); var normals = new float32array( 72 ); var colors = new float32array( 72 ); var indices = new uint16array( 36 ); var face = 0, idx = 0, vert = 0; var x = 0, r = 0, y = 1, g = 1, z = 2, b = 2; // front end face (red) positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5; normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = 1.; colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5; normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = 1.; colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5; normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = 1.; colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5; normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = 1.; colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 0.; vert += 3; indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2; indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3; idx += 6; ++face; // face (blue) positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5; normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = -1.; colors[vert + r] = 0.; colors[vert + g] = 0.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5; normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = -1.; colors[vert + r] = 0.; colors[vert + g] = 0.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5; normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = -1.; colors[vert + r] = 0.; colors[vert + g] = 0.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5; normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = -1.; colors[vert + r] = 0.; colors[vert + g] = 0.; colors[vert + b] = 1.; vert += 3; indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2; indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3; idx += 6; ++face; // right face (green) positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5; normals[vert + x] = 1.; normals[vert + y] = 0.; normals[vert + z] = 0.; colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5; normals[vert + x] = 1.; normals[vert + y] = 0.; normals[vert + z] = 0.; colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5; normals[vert + x] = 1.; normals[vert + y] = 0.; normals[vert + z] = 0.; colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5; normals[vert + x] = 1.; normals[vert + y] = 0.; normals[vert + z] = 0.; colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 0.; vert += 3; indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2; indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3; idx += 6; ++face; // left face (magenta) positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5; normals[vert + x] = -1.; normals[vert + y] = 0.; normals[vert + z] = 0.; colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5; normals[vert + x] = -1.; normals[vert + y] = 0.; normals[vert + z] = 0.; colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5; normals[vert + x] = -1.; normals[vert + y] = 0.; normals[vert + z] = 0.; colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5; normals[vert + x] = -1.; normals[vert + y] = 0.; normals[vert + z] = 0.; colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 1.; vert += 3; indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2; indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3; idx += 6; ++face; // top face (cyan) positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5; normals[vert + x] = 0.; normals[vert + y] = 1.; normals[vert + z] = 0.; colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5; normals[vert + x] = 0.; normals[vert + y] = 1.; normals[vert + z] = 0.; colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5; normals[vert + x] = 0.; normals[vert + y] = 1.; normals[vert + z] = 0.; colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 1.; vert += 3; positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5; normals[vert + x] = 0.; normals[vert + y] = 1.; normals[vert + z] = 0.; colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 1.; vert += 3; indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2; indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3; idx += 6; ++face; // bottom face (yellow) positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5; normals[vert + x] = 0.; normals[vert + y] = -1.; normals[vert + z] = 0.; colors[vert + r] = 1.; colors[vert + g] = 1.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5; normals[vert + x] = 0.; normals[vert + y] = -1.; normals[vert + z] = 0.; colors[vert + r] = 1.; colors[vert + g] = 1.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5; normals[vert + x] = 0.; normals[vert + y] = -1.; normals[vert + z] = 0.; colors[vert + r] = 1.; colors[vert + g] = 1.; colors[vert + b] = 0.; vert += 3; positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5; normals[vert + x] = 0.; normals[vert + y] = -1.; normals[vert + z] = 0.; colors[vert + r] = 1.; colors[vert + g] = 1.; colors[vert + b] = 0.; vert += 3; indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2; indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3; idx += 6; ++face; geo.addattribute( 'index', new three.bufferattribute( indices, 1 ) ); geo.addattribute( 'position', new three.bufferattribute( positions, 3 ) ); geo.addattribute( 'normal', new three.bufferattribute( normals, 3 ) ); geo.addattribute( 'color', new three.bufferattribute( colors, 3 ) ); var mat = new three.meshphongmaterial( { color: 0xffffff, ambient: 0xffffff, specular: 0xffffff, shininess: 50, side: three.doubleside, vertexcolors: three.vertexcolors } ); var msh = new three.mesh(geo, mat); msh.scale.multiplyscalar(scale); homecoming msh; } init();

three.js