css3D hack replaced by a flying brick done in three js
cTn
parent
25edf3a4bf
commit
619f9032be
|
|
@ -107,83 +107,15 @@
|
|||
#interactive_block a.reset:hover {
|
||||
background-color: #dedcdc;
|
||||
}
|
||||
#perspective {
|
||||
height: calc(100% - 25px);
|
||||
-webkit-perspective: 800;
|
||||
#canvas_wrapper {
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
#cube {
|
||||
position: relative;
|
||||
top: calc(50% - 50px); /* - half of height */
|
||||
left: calc(50% - 50px); /* - half of width */
|
||||
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
|
||||
-webkit-transform-style: preserve-3d;
|
||||
}
|
||||
#cubePITCH {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
}
|
||||
#cubeROLL {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
}
|
||||
#cube .face {
|
||||
position: absolute;
|
||||
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
#cube .face.one {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
line-height: 200px;
|
||||
|
||||
font-size: 20px;
|
||||
|
||||
-webkit-transform: rotateX(-90deg) translateZ(-50px);
|
||||
background-color: purple;
|
||||
}
|
||||
#cube .face.two {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
|
||||
-webkit-transform: translateZ(100px);
|
||||
background-color: blue;
|
||||
}
|
||||
#cube .face.three {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
|
||||
-webkit-transform: rotateY(90deg);
|
||||
background-color: green;
|
||||
}
|
||||
#cube .face.four {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
|
||||
-webkit-transform: rotateY(180deg) translateZ(100px);
|
||||
background-color: black;
|
||||
}
|
||||
#cube .face.five {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
|
||||
-webkit-transform: rotateY(-90deg) translateZ(100px);
|
||||
background-color: red;
|
||||
}
|
||||
#cube .face.six {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
line-height: 200px;
|
||||
|
||||
-webkit-transform: rotateX(90deg) translateZ(100px);
|
||||
background-color: silver;
|
||||
}
|
||||
.tab-initial_setup .block_wrapper {
|
||||
font-size: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,25 +21,13 @@
|
|||
</p>
|
||||
</div>
|
||||
<div id="interactive_block">
|
||||
<div id="canvas_wrapper">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<span class="model"></span>
|
||||
<img class="modelMixDiagram" src="" alt="">
|
||||
<span class="heading"></span>
|
||||
<div class="clear-both"></div>
|
||||
<a class="reset" href="#" i18n="initialSetupButtonResetZaxis"></a>
|
||||
<div id="perspective">
|
||||
<div id="cube">
|
||||
<div id="cubePITCH">
|
||||
<div id="cubeROLL">
|
||||
<div class="face one">BOTTOM</div>
|
||||
<div class="face two">BACK</div>
|
||||
<div class="face three">RIGHT</div>
|
||||
<div class="face four">FRONT</div>
|
||||
<div class="face five">LEFT</div>
|
||||
<div class="face six">TOP</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block_wrapper">
|
||||
<div class="throttle">
|
||||
|
|
|
|||
|
|
@ -28,6 +28,9 @@ TABS.initial_setup.initialize = function (callback) {
|
|||
// translate to user-selected language
|
||||
localize();
|
||||
|
||||
// initialize 3D
|
||||
self.initialize3D();
|
||||
|
||||
// Fill in misc stuff
|
||||
$('input[name="mincellvoltage"]').val(MISC.vbatmincellvoltage);
|
||||
$('input[name="maxcellvoltage"]').val(MISC.vbatmaxcellvoltage);
|
||||
|
|
@ -273,15 +276,11 @@ TABS.initial_setup.initialize = function (callback) {
|
|||
$('.bat-mah-drawing').text(chrome.i18n.getMessage('initialSetupBatteryAValue', [ANALOG.amperage.toFixed(2)]));
|
||||
$('.rssi').text(chrome.i18n.getMessage('initialSetupRSSIValue', [((ANALOG.rssi / 1023) * 100).toFixed(0)]));
|
||||
|
||||
// Update cube
|
||||
var cube = $('div#cube');
|
||||
|
||||
cube.css('-webkit-transform', 'rotateY(' + ((SENSOR_DATA.kinematics[2] * -1.0) - self.yaw_fix) + 'deg)');
|
||||
$('#cubePITCH', cube).css('-webkit-transform', 'rotateX(' + SENSOR_DATA.kinematics[1] + 'deg)');
|
||||
$('#cubeROLL', cube).css('-webkit-transform', 'rotateZ(' + SENSOR_DATA.kinematics[0] + 'deg)');
|
||||
|
||||
// Update heading
|
||||
$('span.heading').text(chrome.i18n.getMessage('initialSetupheading', [SENSOR_DATA.kinematics[2]]));
|
||||
|
||||
// Update 3D
|
||||
self.render3D();
|
||||
}
|
||||
|
||||
GUI.interval_add('initial_setup_data_pull', get_analog_data, 50, true);
|
||||
|
|
@ -295,6 +294,70 @@ TABS.initial_setup.initialize = function (callback) {
|
|||
}
|
||||
};
|
||||
|
||||
TABS.initial_setup.initialize3D = function () {
|
||||
var self = this;
|
||||
var canvas = $('#canvas');
|
||||
var wrapper = $('#canvas_wrapper');
|
||||
|
||||
var camera = new THREE.PerspectiveCamera(50, wrapper.width() / wrapper.height(), 1, 10000);
|
||||
var renderer = new THREE.WebGLRenderer({canvas: canvas.get(0), alpha: true, antialias: true});
|
||||
var scene = new THREE.Scene();
|
||||
|
||||
// some light
|
||||
var light = new THREE.DirectionalLight(new THREE.Color(1,1,1), 0.5);
|
||||
light.position.set(0, 1, 0);
|
||||
|
||||
// flying brick
|
||||
var modelWrapper = new THREE.Object3D();
|
||||
var geometry = new THREE.BoxGeometry(150, 80, 300);
|
||||
var materialArray = [
|
||||
new THREE.MeshLambertMaterial({color: 0xff3333, emissive: 0x962020}), // right
|
||||
new THREE.MeshLambertMaterial({color: 0xff8800, emissive: 0xa45a06}), // left
|
||||
new THREE.MeshLambertMaterial({color: 0xffff33, emissive: 0x9a9a21}), // top
|
||||
new THREE.MeshLambertMaterial({color: 0x33ff33, emissive: 0x1f901f}), // bottom
|
||||
new THREE.MeshLambertMaterial({color: 0x3333ff, emissive: 0x212192}), // back
|
||||
new THREE.MeshLambertMaterial({color: 0x8833ff, emissive: 0x5620a2}), // front
|
||||
];
|
||||
var materials = new THREE.MeshFaceMaterial(materialArray);
|
||||
var model = new THREE.Mesh(geometry, materials);
|
||||
|
||||
// initialize render size for current canvas size
|
||||
renderer.setSize(wrapper.width(), wrapper.height());
|
||||
|
||||
// move camera away from the model
|
||||
camera.position.z = 500;
|
||||
|
||||
// modelWrapper just adds an extra axis of rotation to avoid gimbal lock withe euler angles
|
||||
modelWrapper.add(model);
|
||||
|
||||
// add camera, model, light to the foreground scene
|
||||
scene.add(camera);
|
||||
scene.add(modelWrapper);
|
||||
scene.add(light);
|
||||
|
||||
|
||||
this.render3D = function () {
|
||||
// compute the changes
|
||||
model.rotation.x = (SENSOR_DATA.kinematics[1] * -1.0) * 0.017453292519943295;
|
||||
modelWrapper.rotation.y = ((SENSOR_DATA.kinematics[2] * -1.0) - self.yaw_fix) * 0.017453292519943295;
|
||||
model.rotation.z = (SENSOR_DATA.kinematics[0] * -1.0) * 0.017453292519943295;
|
||||
|
||||
// draw
|
||||
renderer.render(scene, camera);
|
||||
};
|
||||
|
||||
// handle canvas resize
|
||||
$(window).resize(function () {
|
||||
renderer.setSize(wrapper.width(), wrapper.height());
|
||||
camera.aspect = wrapper.width() / wrapper.height();
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
self.render3D();
|
||||
});
|
||||
};
|
||||
|
||||
TABS.initial_setup.cleanup = function (callback) {
|
||||
$(window).unbind('resize');
|
||||
|
||||
if (callback) callback();
|
||||
};
|
||||
Loading…
Reference in New Issue