function stats(modelName, geometry, numOfMeshes) {
if (geometry !== undefined) {
statsNode.innerHTML = 'Name of model/file: ' + '' + modelName + ''
+ '
'
+ 'Number of vertices: ' + '' + geometry.attributes.position.count + ''
+ '
'
+ 'Number of faces: ' + '' + geometry.attributes.position.count / 3 + ''
+ '
'
+ 'Number of Meshes: ' + '' + numOfMeshes + '';
}
}
function colladaMerge(dae, filename) {
dae.traverse(function (child) {
if (child instanceof THREE.Mesh) {
numOfMeshes++;
var geometry = child.geometry;
stats(filename, geometry, numOfMeshes);
// console.log(child.geometry); // BufferGeometry
//child.geometry = new THREE.BufferGeometry().fromGeometry(child.geometry);
var wireframe2;
var collada_geometry = new THREE.Geometry();
if (dae.children.length > 1) {
for (var i = 0; i < dae.children.length; i++) {
var col_child = dae.children[i];
//console.log(dae.children.length);
if (col_child instanceof THREE.Mesh) {
//When there is more than one child BufferGeometry, create a new geometry
//and merge it with the main new geometry (defined above as collada_geometry)
var geom = new THREE.Geometry().fromBufferGeometry(col_child.geometry);
collada_geometry.merge(geom);
console.log(collada_geometry);
var buffer_collada_geometry = new THREE.BufferGeometry().fromGeometry(collada_geometry);
console.log(buffer_collada_geometry);
}
}
model = new THREE.Mesh(buffer_collada_geometry, materials.default_material);
wireframe2 = new THREE.WireframeGeometry(buffer_collada_geometry);
console.log("More than one Geometry");
setSmooth(model);
}
else {
// var single_geom = new THREE.Geometry().fromBufferGeometry(child.geometry);
model = new THREE.Mesh(child.geometry, materials.default_material);
wireframe2 = new THREE.WireframeGeometry(child.geometry);
console.log("One Geometry");
setSmooth(model);
}
child.material = materials.default_material;
var edges = new THREE.LineSegments(wireframe2, materials.wireframeAndModel);
materials.wireframeAndModel.visible = false;
model.add(edges);
setWireFrame(model);
setWireframeAndModel(model);
setPhong(model);
setXray(model);
}
});
}
function setCamera(mod) {
var bbox = new THREE.Box3().setFromObject(mod);
/*MODELS OF DIFFERENT SIZES TO FIT IN CAMERA VIEW*/
var height = bbox.getSize().y;
var dist = height / (2 * Math.tan(camera.fov * Math.PI / 360));
var pos = scene.position;
camera.position.set(pos.x, pos.y, dist * 3.50);
camera.lookAt(pos);
}
$('#glow_check').on('change', function () {
if (glow.checked) {
$('input.check').not(this).prop('checked', false);
outlinePass.enabled = true;
}
else {
outlinePass.enabled = false;
}
});
function setWireFrame(mod) {
if (modelWithTextures || fbxLoaded || gltfLoaded) {
$('#wire_check').on('change', function () {
$('input.check').not(this).prop('checked', false);
if (wire.checked) {
materials.wireframeAndModel.visible = false;
if (mod.material.length > 1) {
for (var i = 0; i < mod.material.length; i++) {
mod.material[i].wireframe = true;
}
}
else {
mod.material.wireframe = true;
}
}
else {
if (mod.material.length > 1) {
for (var i = 0; i < mod.material.length; i++) {
mod.material[i].wireframe = false;
}
}
else {
mod.material.wireframe = false;
}
}
});
}
else {
$('#wire_check').on('change', function () {
$('input.check').not(this).prop('checked', false);
if (wire.checked) {
materials.wireframeAndModel.visible = false;
mod.material = materials.wireframeMaterial;
}
else {
mod.material = materials.default_material;
}
});
}
}
function setWireframeAndModel(mod) {
$('#model_wire').on('change', function () {
$('input.check').not(this).prop('checked', false);
if (modelWithTextures || fbxLoaded || gltfLoaded) {
if (mod.material.length > 1) {
for (var i = 0; i < mod.material.length; i++) {
mod.material[i].wireframe = false;
}
}
else {
mod.material.wireframe = false;
}
if (model_wire.checked) {
materials.wireframeAndModel.visible = true;
}
else {
materials.wireframeAndModel.visible = false;
}
}
//model without textures
else {
mod.material = materials.default_material;
if (model_wire.checked) {
materials.wireframeAndModel.visible = true;
}
else {
materials.wireframeAndModel.visible = false;
mod.material = materials.default_material;
}
}
});
}
function setSmooth(mod) {
var smooth_geom;
mod.traverse(function (child) {
if (child instanceof THREE.Mesh) {
$('#smooth').change(function () {
if (child.geometry.isGeometry) {
//Merged collada geometry
smooth_geom = child.geometry;
}
else {
smooth_geom = new THREE.Geometry().fromBufferGeometry(child.geometry);
}
if (smooth.checked) {
document.getElementById('smooth-model').innerHTML = "平整模型"; //Flatten Model
smooth_geom.mergeVertices();
smooth_geom.computeVertexNormals();
smooth_geom.computeFaceNormals();
child.geometry = new THREE.BufferGeometry().fromGeometry(smooth_geom);
//console.log(child.geometry);
}
else {
document.getElementById('smooth-model').innerHTML = "光滑模型"; // Smooth Model
smooth_geom.computeFlatVertexNormals();
child.geometry = new THREE.BufferGeometry().fromGeometry(smooth_geom);
}
});
}
});
}
function setPhong(mod, originalMat) {
$('#phong_check').on('change', function () {
if (modelWithTextures || fbxLoaded || gltfLoaded) {
phong.checked ? mod.material = materials.phongMaterial : mod.material = originalMat;
}
else{
phong.checked ? mod.material = materials.phongMaterial : mod.material = materials.default_material;
}
});
}
function setXray(mod, originalMat) {
$('#xray_check').on('change', function () {
if (modelWithTextures || fbxLoaded || gltfLoaded) {
xray.checked ? mod.material = materials.xrayMaterial : mod.material = originalMat;
}
else{
xray.checked ? mod.material = materials.xrayMaterial : mod.material = materials.default_material;
}
});
}
var bound_box;
function setBoundBox(mod) {
/*bound_box = new THREE.BoxHelper(mod); //, 0xffffff
bound_box.visible = false;
mod.add(bound_box); //Add bounding box helper to model (for when checkbox is checked)*/
var box = new THREE.Box3().setFromObject(mod);
bound_box = new THREE.Box3Helper(box);
bound_box.visible = false;
mod.add(bound_box);
}
$('#bBox').change(function () {
if (bBox.checked) {
bound_box.visible = true;
}
else {
bound_box.visible = false;
}
});
function setPolarGrid(mod) {
var bbox = new THREE.Box3().setFromObject(mod);
console.log(bbox.min.y);
/*POLAR GRID HELPER*/
var radius = 10;
var radials = 16;
var circles = 8;
var divisions = 64;
polar_grid_helper = new THREE.PolarGridHelper(bbox.max.x * 4, radials, circles, divisions);
polar_grid_helper.position.y = bbox.min.y;
polar_grid_helper.visible = false;
mod.add(polar_grid_helper);
}
var polar_grid_helper;
$('#polar_grid').change(function () {
if (polar_grid.checked) {
polar_grid_helper.visible = true;
}
else {
polar_grid_helper.visible = false;
}
});
function setGrid(mod) {
var bbox2 = new THREE.Box3().setFromObject(mod);
/*NORMAL GRID HELPER*/
gridHelper = new THREE.GridHelper(bbox2.max.x * 4, 40, 0xe6e600, 0x808080);
//Set size of grid to cover objects of all sizes based on the non visible box3() size.
gridHelper.position.y = bbox2.min.y; //Set grid underneath loaded model object
gridHelper.visible = false; //Grid visibility initially false, until grid checkbox is selected
mod.add(gridHelper);
}
var gridHelper;
$('#grid').change(function () {
if (grid.checked) {
gridHelper.visible = true;
}
else {
gridHelper.visible = false;
}
});
var axis_view;
function setAxis(mod) {
var bbox3 = new THREE.Box3().setFromObject(mod);
/*AXIS HELPER*/
axis_view = new THREE.AxesHelper(bbox3.max.z * 10); //Set axis size based on the non visible box3() size.
axis_view.position.y = bbox3.min.y; //Set axis underneath loaded model object
axis_view.visible = false; //axis visibility initially false, until axis checkbox is selected
mod.add(axis_view);
}
$('#axis').change(function () {
if (axis.checked) {
axis_view.visible = true;
}
else {
axis_view.visible = false;
}
});
//jQuery slider for phong shininess level
$("#shine").slider({
orientation: "horizontal",
min: 10,
max: 500,
value: 10,
slide: function (event, ui) {
materials.phongMaterial.shininess = ui.value; //Set shininess parameter to the current selected value of slider
},
change: function (event, ui) {
console.log(ui.value);
materials.phongMaterial.shininess = ui.value; //Set shininess of phong material to value from the slider
}
});
//Strength of glow outine
$("#edgeStrength").slider({
orientation: "horizontal",
min: 1,
max: 10,
value: 1,
slide: function (event, ui) {
outlinePass.edgeStrength = ui.value;
},
change: function (event, ui) {
outlinePass.edgeStrength = ui.value;
}
});
//PointLight intensity slider
$("#point_light").slider({
orientation: "horizontal",
min: 0,
max: 1,
step: 0.1,
value: 0.5,
slide: function (event, ui) {
pointLight.intensity = ui.value;
},
change: function (event, ui) {
pointLight.intensity = ui.value;
}
});
//Set colour of glow model to value from colour
$(".glow_select").spectrum({
color: "#fff",
change: function (color) {
$("#basic-log").text("Hex Colour Selected: " + color.toHexString()); //Log information
glow_value = $(".glow_select").spectrum('get').toHexString(); //Get the colour selected
//Set outlinePass effect edge colour to selected value
outlinePass.visibleEdgeColor.set(glow_value);
}
});
/*SCALE FUNCTIONS*/
var loopScale = 0;
scale = 1;
function scaleUp(mod) {
// User clicks scale button once at a time, scale applied once
$('#scale_up').click(function (e) {
if (modelLoaded || sample_model_loaded) {
if (mod.scale.z < 25) {
scale += (scale * 0.45);
mod.scale.x = mod.scale.y = mod.scale.z = scale;
}
}
});
}
function scaleDown(mod) {
//User clicks scale button once at a time, scale applied once
$('#scale_down').click(function (e) {
if (modelLoaded || sample_model_loaded) {
scale -= (scale * 0.35);
mod.scale.x = mod.scale.y = mod.scale.z = scale;
}
});
}
function fixRotation(mod) {
$("input:radio[name=rotate]").click(function () {
var rotAxis = $("input:radio[name=rotate]:checked").val();
switch (rotAxis) {
case 'rotateX':
mod.rotation.x = -Math.PI / 2;
polar_grid_helper.rotation.x = Math.PI / 2;
gridHelper.rotation.x = Math.PI / 2;
axis_view.rotation.x = Math.PI / 2;
break;
case 'rotateY':
mod.rotation.y = -Math.PI / 2;
polar_grid_helper.rotation.y = Math.PI / 2;
gridHelper.rotation.y = Math.PI / 2;
axis_view.rotation.y = Math.PI / 2;
break;
case 'rotateZ':
mod.rotation.z = -Math.PI / 2;
polar_grid_helper.rotation.z = Math.PI / 2;
gridHelper.rotation.z = Math.PI / 2;
axis_view.rotation.z = Math.PI / 2;
break;
}
});
}
function resetRotation(mod) {
$("#reset_rot").click(function () {
mod.rotation.set(0, 0, 0);
polar_grid_helper.rotation.set(0, 0, 0);
gridHelper.rotation.set(0, 0, 0);
axis_view.rotation.set(0, 0, 0);
$('input[name="rotate"]').prop('checked', false);
});
}
/*Animation Controls */
//credit: https://raw.githubusercontent.com/mrdoob/three.js/dev/editor/js/Sidebar.Animation.js
function addAnimation( object, model_animations ) {
animations[ object.uuid ] = model_animations;
if(model_animations.length > 0 ){
animsDiv.style.display = "block";
}
else{
animsDiv.style.display = "none";
}
}
function animControl( object ) {
var uuid = object !== null ? object.uuid : '';
var anims = animations[ uuid ];
if ( anims !== undefined ) {
mixer = new THREE.AnimationMixer( object );
var options = {};
for ( var animation of anims ) {
options[ animation.name ] = animation.name;
var action = mixer.clipAction( animation );
actions[ animation.name ] = action;
}
setOptions( options );
}
}
function playAnimation() {
currentAnimation = actions[ animationsSelect.value ];
if ( currentAnimation !== undefined ) {
stopAnimations();
currentAnimation.play();
// updateAnimation();
}
}
function playAllAnimation(anims) {
if(anims !== undefined){
document.getElementById("playAll").onclick = function(){
anims.forEach(function (clip) {
mixer.clipAction(clip).reset().play();
});
}
}
}
function stopAnimations() {
if ( mixer !== undefined ) {
mixer.stopAllAction();
}
}
function setOptions( options ) {
var selected = animationsSelect.value;
while ( animationsSelect.children.length > 0 ) {
animationsSelect.removeChild( animationsSelect.firstChild );
}
for ( var key in options ) {
var option = document.createElement( 'option' );
option.value = key;
option.innerHTML = options[ key ];
animationsSelect.appendChild( option );
}
animationsSelect.value = selected;
}
document.getElementById("play").onclick = playAnimation;
document.getElementById("stop").onclick = stopAnimations;