+ `);
- let sorted = points.slice().sort((a, b) => a.position.z - b.position.z);
- let lowPoint = sorted[0].position.clone();
- let highPoint = sorted[sorted.length - 1].position.clone();
- let min = lowPoint.z;
- let max = highPoint.z;
- let height = max - min;
- height = height.toFixed(3);
+ this.elCopyPosition = this.elContent.find("img[name=copyPosition]");
+ this.elCopyPosition.click( () => {
+ let pos = this.annotation.position.toArray();
+ let msg = pos.map(c => c.toFixed(3)).join(", ");
+ Utils.clipboardCopy(msg);
- this.elHeightLabel = this.elContent.find(`#height_label`);
- this.elHeightLabel.html(`
${height}`);
- }
- }
- };
+ this.viewer.postMessage(
+ `Copied value to clipboard:
'${msg}'`,
+ {duration: 3000});
+ });
- class VolumePanel extends MeasurePanel{
- constructor(viewer, measurement, propertiesPanel){
- super(viewer, measurement, propertiesPanel);
+ this.elTitle = this.elContent.find("#annotation_title").html(annotation.title);
+ this.elDescription = this.elContent.find("#annotation_description").html(annotation.description);
- let copyIconPath = Potree.resourcePath + '/icons/copy.svg';
- let removeIconPath = Potree.resourcePath + '/icons/remove.svg';
+ this.elTitle[0].addEventListener("input", () => {
+ const title = this.elTitle.html();
+ annotation.title = title;
- let lblLengthText = new Map([
- [BoxVolume, "length"],
- [SphereVolume, "rx"],
- ]).get(measurement.constructor);
+ }, false);
- let lblWidthText = new Map([
- [BoxVolume, "width"],
- [SphereVolume, "ry"],
- ]).get(measurement.constructor);
+ this.elDescription[0].addEventListener("input", () => {
+ const description = this.elDescription.html();
+ annotation.description = description;
+ }, false);
- let lblHeightText = new Map([
- [BoxVolume, "height"],
- [SphereVolume, "rz"],
- ]).get(measurement.constructor);
+ this.update();
+ }
- this.elContent = $(`
-
-
+ update(){
+ const {annotation, elContent, elTitle, elDescription} = this;
-
-
- \u03b1
- \u03b2
- \u03b3
-
-
-
-
-
-
+ let pos = annotation.position.toArray().map(c => Utils.addCommas(c.toFixed(3)));
+ elContent.find("#annotation_position_x").html(pos[0]);
+ elContent.find("#annotation_position_y").html(pos[1]);
+ elContent.find("#annotation_position_z").html(pos[2]);
-
-
- ${lblLengthText}
- ${lblWidthText}
- ${lblHeightText}
-
-
-
-
-
-
+ elTitle.html(annotation.title);
+ elDescription.html(annotation.description);
-
-
Volume:
-
-
+ }
+ };
+
+ class CameraAnimationPanel{
+ constructor(viewer, propertiesPanel, animation){
+ this.viewer = viewer;
+ this.propertiesPanel = propertiesPanel;
+ this.animation = animation;
-
-
- make clip volume
-
-
+ this.elContent = $(`
+
`);
- { // download
- this.elDownloadButton = this.elContent.find("input[name=download_volume]");
+ const elPlay = this.elContent.find("input[name=play]");
+ elPlay.click( () => {
+ animation.play();
+ });
- if(this.propertiesPanel.viewer.server){
- this.elDownloadButton.click(() => this.download());
- } else {
- this.elDownloadButton.hide();
+ const elSlider = this.elContent.find('#sldTime');
+ elSlider.slider({
+ value: 0,
+ min: 0,
+ max: 1,
+ step: 0.001,
+ slide: (event, ui) => {
+ animation.set(ui.value);
}
- }
+ });
- this.elCopyRotation = this.elContent.find("img[name=copyRotation]");
- this.elCopyRotation.click( () => {
- let rotation = this.measurement.rotation.toArray().slice(0, 3);
- let msg = rotation.map(c => c.toFixed(3)).join(", ");
- Utils.clipboardCopy(msg);
+ let elDuration = this.elContent.find(`input[name=spnDuration]`);
+ elDuration.spinner({
+ min: 0, max: 300, step: 0.01,
+ numberFormat: 'n',
+ start: () => {},
+ spin: (event, ui) => {
+ let value = elDuration.spinner('value');
+ animation.setDuration(value);
+ },
+ change: (event, ui) => {
+ let value = elDuration.spinner('value');
+ animation.setDuration(value);
+ },
+ stop: (event, ui) => {
+ let value = elDuration.spinner('value');
+ animation.setDuration(value);
+ },
+ incremental: (count) => {
+ let value = elDuration.spinner('value');
+ let step = elDuration.spinner('option', 'step');
- this.viewer.postMessage(
- `Copied value to clipboard:
'${msg}'`,
- {duration: 3000});
+ let delta = value * 0.05;
+ let increments = Math.max(1, parseInt(delta / step));
+
+ return increments;
+ }
});
+ elDuration.spinner('value', animation.getDuration());
+ elDuration.spinner('widget').css('width', '100%');
- this.elCopyScale = this.elContent.find("img[name=copyScale]");
- this.elCopyScale.click( () => {
- let scale = this.measurement.scale.toArray();
- let msg = scale.map(c => c.toFixed(3)).join(", ");
- Utils.clipboardCopy(msg);
+ const elKeyframes = this.elContent.find("#animation_keyframes");
- this.viewer.postMessage(
- `Copied value to clipboard:
'${msg}'`,
- {duration: 3000});
- });
+ const updateKeyframes = () => {
+ elKeyframes.empty();
- this.elRemove = this.elContent.find("img[name=remove]");
- this.elRemove.click( () => {
- this.viewer.scene.removeVolume(measurement);
- });
+ //let index = 0;
- this.elContent.find("#volume_reset_orientation").click(() => {
- measurement.rotation.set(0, 0, 0);
- });
+ //
+ //
- this.elContent.find("#volume_make_uniform").click(() => {
- let mean = (measurement.scale.x + measurement.scale.y + measurement.scale.z) / 3;
- measurement.scale.set(mean, mean, mean);
- });
+ const addNewKeyframeItem = (index) => {
+ let elNewKeyframe = $(`
+
+
+ `);
- this.elCheckClip = this.elContent.find('#volume_clip');
- this.elCheckClip.click(event => {
- this.measurement.clip = event.target.checked;
- });
+ const elAdd = elNewKeyframe.find("input[name=add]");
+ elAdd.click( () => {
+ animation.createControlPoint(index);
+ });
- this.elCheckShow = this.elContent.find('#volume_show');
- this.elCheckShow.click(event => {
- this.measurement.visible = event.target.checked;
- });
+ elKeyframes.append(elNewKeyframe);
+ };
- this.propertiesPanel.addVolatileListener(measurement, "position_changed", this._update);
- this.propertiesPanel.addVolatileListener(measurement, "orientation_changed", this._update);
- this.propertiesPanel.addVolatileListener(measurement, "scale_changed", this._update);
- this.propertiesPanel.addVolatileListener(measurement, "clip_changed", this._update);
+ const addKeyframeItem = (index) => {
+ let elKeyframe = $(`
+
+
+
+
+
+
+
keyframe
+
+
+
+
+ `);
- this.update();
- }
+ const elAssign = elKeyframe.find("img[name=assign]");
+ const elMove = elKeyframe.find("img[name=move]");
+ const elDelete = elKeyframe.find("img[name=delete]");
- async download(){
+ elAssign.click( () => {
+ const cp = animation.controlPoints[index];
- let clipBox = this.measurement;
+ cp.position.copy(viewer.scene.view.position);
+ cp.target.copy(viewer.scene.view.getPivot());
+ });
- let regions = [];
- //for(let clipBox of boxes){
- {
- let toClip = clipBox.matrixWorld;
+ elMove.click( () => {
+ const cp = animation.controlPoints[index];
- let px = new Vector3(+0.5, 0, 0).applyMatrix4(toClip);
- let nx = new Vector3(-0.5, 0, 0).applyMatrix4(toClip);
- let py = new Vector3(0, +0.5, 0).applyMatrix4(toClip);
- let ny = new Vector3(0, -0.5, 0).applyMatrix4(toClip);
- let pz = new Vector3(0, 0, +0.5).applyMatrix4(toClip);
- let nz = new Vector3(0, 0, -0.5).applyMatrix4(toClip);
+ viewer.scene.view.position.copy(cp.position);
+ viewer.scene.view.lookAt(cp.target);
+ });
- let pxN = new Vector3().subVectors(nx, px).normalize();
- let nxN = pxN.clone().multiplyScalar(-1);
- let pyN = new Vector3().subVectors(ny, py).normalize();
- let nyN = pyN.clone().multiplyScalar(-1);
- let pzN = new Vector3().subVectors(nz, pz).normalize();
- let nzN = pzN.clone().multiplyScalar(-1);
+ elDelete.click( () => {
+ const cp = animation.controlPoints[index];
+ animation.removeControlPoint(cp);
+ });
- let planes = [
- new Plane().setFromNormalAndCoplanarPoint(pxN, px),
- new Plane().setFromNormalAndCoplanarPoint(nxN, nx),
- new Plane().setFromNormalAndCoplanarPoint(pyN, py),
- new Plane().setFromNormalAndCoplanarPoint(nyN, ny),
- new Plane().setFromNormalAndCoplanarPoint(pzN, pz),
- new Plane().setFromNormalAndCoplanarPoint(nzN, nz),
- ];
+ elKeyframes.append(elKeyframe);
+ };
- let planeQueryParts = [];
- for(let plane of planes){
- let part = [plane.normal.toArray(), plane.constant].join(",");
- part = `[${part}]`;
- planeQueryParts.push(part);
- }
- let region = "[" + planeQueryParts.join(",") + "]";
- regions.push(region);
- }
+ let index = 0;
- let regionsArg = regions.join(",");
+ addNewKeyframeItem(index);
+
+ for(const cp of animation.controlPoints){
+
+ addKeyframeItem(index);
+ index++;
+ addNewKeyframeItem(index);
- let pointcloudArgs = [];
- for(let pointcloud of this.viewer.scene.pointclouds){
- if(!pointcloud.visible){
- continue;
}
+ };
- let offset = pointcloud.pcoGeometry.offset.clone();
- let negateOffset = new Matrix4().makeTranslation(...offset.multiplyScalar(-1).toArray());
- let matrixWorld = pointcloud.matrixWorld;
+ updateKeyframes();
- let transform = new Matrix4().multiplyMatrices(matrixWorld, negateOffset);
+ animation.addEventListener("controlpoint_added", updateKeyframes);
+ animation.addEventListener("controlpoint_removed", updateKeyframes);
- let path = `${window.location.pathname}/../${pointcloud.pcoGeometry.url}`;
- let arg = {
- path: path,
- transform: transform.elements,
- };
- let argString = JSON.stringify(arg);
- pointcloudArgs.push(argString);
+
+ // this._update = () => { this.update(); };
+
+ // this.update();
+ }
+
+ update(){
+
+ }
+ };
+
+ class PropertiesPanel{
+
+ constructor(container, viewer){
+ this.container = container;
+ this.viewer = viewer;
+ this.object = null;
+ this.cleanupTasks = [];
+ this.scene = null;
+ }
+
+ setScene(scene){
+ this.scene = scene;
+ }
+
+ set(object){
+ if(this.object === object){
+ return;
}
- let pointcloudsArg = pointcloudArgs.join(",");
- let elMessage = this.elContent.find("div[name=download_message]");
-
- let error = (message) => {
- elMessage.html(`
ERROR: ${message}
`);
- };
+ this.object = object;
+
+ for(let task of this.cleanupTasks){
+ task();
+ }
+ this.cleanupTasks = [];
+ this.container.empty();
- let info = (message) => {
- elMessage.html(`${message}`);
- };
+ if(object instanceof PointCloudTree){
+ this.setPointCloud(object);
+ }else if(object instanceof Measure || object instanceof Profile || object instanceof Volume){
+ this.setMeasurement(object);
+ }else if(object instanceof Camera){
+ this.setCamera(object);
+ }else if(object instanceof Annotation){
+ this.setAnnotation(object);
+ }else if(object instanceof CameraAnimation){
+ this.setCameraAnimation(object);
+ }
+
+ }
- let handle = null;
- { // START FILTER
- let url = `${viewer.server}/create_regions_filter?pointclouds=[${pointcloudsArg}]®ions=[${regionsArg}]`;
-
- //console.log(url);
+ //
+ // Used for events that should be removed when the property object changes.
+ // This is for listening to materials, scene, point clouds, etc.
+ // not required for DOM listeners, since they are automatically cleared by removing the DOM subtree.
+ //
+ addVolatileListener(target, type, callback){
+ target.addEventListener(type, callback);
+ this.cleanupTasks.push(() => {
+ target.removeEventListener(type, callback);
+ });
+ }
- info("estimating results ...");
+ setPointCloud(pointcloud){
- let response = await fetch(url);
- let jsResponse = await response.json();
- //console.log(jsResponse);
+ let material = pointcloud.material;
- if(!jsResponse.handle){
- error(jsResponse.message);
- return;
- }else {
- handle = jsResponse.handle;
- }
- }
+ let panel = $(`
+
+
+
+ `);
- }
- };
+ panel.i18n();
+ this.container.append(panel);
- class ProfilePanel extends MeasurePanel{
- constructor(viewer, measurement, propertiesPanel){
- super(viewer, measurement, propertiesPanel);
+ { // POINT SIZE
+ let sldPointSize = panel.find(`#sldPointSize`);
+ let lblPointSize = panel.find(`#lblPointSize`);
- let removeIconPath = Potree.resourcePath + '/icons/remove.svg';
- this.elContent = $(`
-
-
-
-
- Width:
-
-
+ sldPointSize.slider({
+ value: material.size,
+ min: 0,
+ max: 3,
+ step: 0.01,
+ slide: function (event, ui) { material.size = ui.value; }
+ });
-
-
-
+ let update = (e) => {
+ lblPointSize.html(material.size.toFixed(2));
+ sldPointSize.slider({value: material.size});
+ };
+ this.addVolatileListener(material, "point_size_changed", update);
+
+ update();
+ }
-
+ { // MINIMUM POINT SIZE
+ let sldMinPointSize = panel.find(`#sldMinPointSize`);
+ let lblMinPointSize = panel.find(`#lblMinPointSize`);
-
+ sldMinPointSize.slider({
+ value: material.size,
+ min: 0,
+ max: 3,
+ step: 0.01,
+ slide: function (event, ui) { material.minSize = ui.value; }
+ });
-
-
-
-
-
-
-
- `);
+ let update = (e) => {
+ lblMinPointSize.html(material.minSize.toFixed(2));
+ sldMinPointSize.slider({value: material.minSize});
+ };
+ this.addVolatileListener(material, "point_size_changed", update);
+
+ update();
+ }
- this.elRemove = this.elContent.find("img[name=remove]");
- this.elRemove.click( () => {
- this.viewer.scene.removeProfile(measurement);
- });
+ { // POINT SIZING
+ let strSizeType = Object.keys(PointSizeType)[material.pointSizeType];
- { // download
- this.elDownloadButton = this.elContent.find(`input[name=download_profile]`);
+ let opt = panel.find(`#optPointSizing`);
+ opt.selectmenu();
+ opt.val(strSizeType).selectmenu('refresh');
- if(this.propertiesPanel.viewer.server){
- this.elDownloadButton.click(() => this.download());
- } else {
- this.elDownloadButton.hide();
- }
+ opt.selectmenu({
+ change: (event, ui) => {
+ material.pointSizeType = PointSizeType[ui.item.value];
+ }
+ });
}
- { // width spinner
- let elWidthSlider = this.elContent.find(`#sldProfileWidth`);
+ { // SHAPE
+ let opt = panel.find(`#optShape`);
- elWidthSlider.spinner({
- min: 0, max: 10 * 1000 * 1000, step: 0.01,
- numberFormat: 'n',
- start: () => {},
- spin: (event, ui) => {
- let value = elWidthSlider.spinner('value');
- measurement.setWidth(value);
- },
+ opt.selectmenu({
change: (event, ui) => {
- let value = elWidthSlider.spinner('value');
- measurement.setWidth(value);
- },
- stop: (event, ui) => {
- let value = elWidthSlider.spinner('value');
- measurement.setWidth(value);
- },
- incremental: (count) => {
- let value = elWidthSlider.spinner('value');
- let step = elWidthSlider.spinner('option', 'step');
-
- let delta = value * 0.05;
- let increments = Math.max(1, parseInt(delta / step));
+ let value = ui.item.value;
- return increments;
+ material.shape = PointShape[value];
}
});
- elWidthSlider.spinner('value', measurement.getWidth());
- elWidthSlider.spinner('widget').css('width', '100%');
- let widthListener = (event) => {
- let value = elWidthSlider.spinner('value');
- if (value !== measurement.getWidth()) {
- elWidthSlider.spinner('value', measurement.getWidth());
- }
- };
- this.propertiesPanel.addVolatileListener(measurement, "width_changed", widthListener);
- }
+ let update = () => {
+ let typename = Object.keys(PointShape)[material.shape];
- let elShow2DProfile = this.elContent.find(`#show_2d_profile`);
- elShow2DProfile.click(() => {
- this.propertiesPanel.viewer.profileWindow.show();
- this.propertiesPanel.viewer.profileWindowController.setProfile(measurement);
- });
+ opt.selectmenu().val(typename).selectmenu('refresh');
+ };
+ this.addVolatileListener(material, "point_shape_changed", update);
- this.propertiesPanel.addVolatileListener(measurement, "marker_added", this._update);
- this.propertiesPanel.addVolatileListener(measurement, "marker_removed", this._update);
- this.propertiesPanel.addVolatileListener(measurement, "marker_moved", this._update);
+ update();
+ }
- this.update();
- }
+ { // BACKFACE CULLING
+
+ let opt = panel.find(`#set_backface_culling`);
+ opt.click(() => {
+ material.backfaceCulling = opt.prop("checked");
+ });
+ let update = () => {
+ let value = material.backfaceCulling;
+ opt.prop("checked", value);
+ };
+ this.addVolatileListener(material, "backface_changed", update);
+ update();
- update(){
- let elCoordiantesContainer = this.elContent.find('.coordinates_table_container');
- elCoordiantesContainer.empty();
- elCoordiantesContainer.append(this.createCoordinatesTable(this.measurement.points));
- }
+ let blockBackface = $('#materials_backface_container');
+ blockBackface.css('display', 'none');
- async download(){
+ const pointAttributes = pointcloud.pcoGeometry.pointAttributes;
+ const hasNormals = pointAttributes.hasNormals ? pointAttributes.hasNormals() : false;
+ if(hasNormals) {
+ blockBackface.css('display', 'block');
+ }
+ /*
+ opt.checkboxradio({
+ clicked: (event, ui) => {
+ // let value = ui.item.value;
+ let value = ui.item.checked;
+ console.log(value);
+ material.backfaceCulling = value; // $('#set_freeze').prop("checked");
+ }
+ });
+ */
+ }
- let profile = this.measurement;
+ { // OPACITY
+ let sldOpacity = panel.find(`#sldOpacity`);
+ let lblOpacity = panel.find(`#lblOpacity`);
- let regions = [];
- {
- let segments = profile.getSegments();
- let width = profile.width;
-
- for(let segment of segments){
- let start = segment.start.clone().multiply(new Vector3(1, 1, 0));
- let end = segment.end.clone().multiply(new Vector3(1, 1, 0));
- let center = new Vector3().addVectors(start, end).multiplyScalar(0.5);
-
- let startEndDir = new Vector3().subVectors(end, start).normalize();
- let endStartDir = new Vector3().subVectors(start, end).normalize();
- let upDir = new Vector3(0, 0, 1);
- let rightDir = new Vector3().crossVectors(startEndDir, upDir);
- let leftDir = new Vector3().crossVectors(endStartDir, upDir);
-
- console.log(leftDir);
-
- let right = rightDir.clone().multiplyScalar(width * 0.5).add(center);
- let left = leftDir.clone().multiplyScalar(width * 0.5).add(center);
-
- let planes = [
- new Plane().setFromNormalAndCoplanarPoint(startEndDir, start),
- new Plane().setFromNormalAndCoplanarPoint(endStartDir, end),
- new Plane().setFromNormalAndCoplanarPoint(leftDir, right),
- new Plane().setFromNormalAndCoplanarPoint(rightDir, left),
- ];
-
- let planeQueryParts = [];
- for(let plane of planes){
- let part = [plane.normal.toArray(), plane.constant].join(",");
- part = `[${part}]`;
- planeQueryParts.push(part);
+ sldOpacity.slider({
+ value: material.opacity,
+ min: 0,
+ max: 1,
+ step: 0.001,
+ slide: function (event, ui) {
+ material.opacity = ui.value;
}
- let region = "[" + planeQueryParts.join(",") + "]";
- regions.push(region);
- }
+ });
+
+ let update = (e) => {
+ lblOpacity.html(material.opacity.toFixed(2));
+ sldOpacity.slider({value: material.opacity});
+ };
+ this.addVolatileListener(material, "opacity_changed", update);
+
+ update();
}
- let regionsArg = regions.join(",");
+ {
- let pointcloudArgs = [];
- for(let pointcloud of this.viewer.scene.pointclouds){
- if(!pointcloud.visible){
- continue;
- }
+ const attributes = pointcloud.pcoGeometry.pointAttributes.attributes;
- let offset = pointcloud.pcoGeometry.offset.clone();
- let negateOffset = new Matrix4().makeTranslation(...offset.multiplyScalar(-1).toArray());
- let matrixWorld = pointcloud.matrixWorld;
+ let options = [];
- let transform = new Matrix4().multiplyMatrices(matrixWorld, negateOffset);
+ options.push(...attributes.map(a => a.name));
- let path = `${window.location.pathname}/../${pointcloud.pcoGeometry.url}`;
+ const intensityIndex = options.indexOf("intensity");
+ if(intensityIndex >= 0){
+ options.splice(intensityIndex + 1, 0, "intensity gradient");
+ }
- let arg = {
- path: path,
- transform: transform.elements,
- };
- let argString = JSON.stringify(arg);
+ options.push(
+ "elevation",
+ "color",
+ 'matcap',
+ 'indices',
+ 'level of detail',
+ 'composite'
+ );
- pointcloudArgs.push(argString);
- }
- let pointcloudsArg = pointcloudArgs.join(",");
+ const blacklist = [
+ "POSITION_CARTESIAN",
+ "position",
+ ];
- let elMessage = this.elContent.find("div[name=download_message]");
+ options = options.filter(o => !blacklist.includes(o));
- let error = (message) => {
- elMessage.html(`
ERROR: ${message}
`);
- };
+ let attributeSelection = panel.find('#optMaterial');
+ for(let option of options){
+ let elOption = $(`
${option} `);
+ attributeSelection.append(elOption);
+ }
- let info = (message) => {
- elMessage.html(`${message}`);
- };
+ let updateMaterialPanel = (event, ui) => {
+ let selectedValue = attributeSelection.selectmenu().val();
+ material.activeAttributeName = selectedValue;
- let handle = null;
- { // START FILTER
- let url = `${viewer.server}/create_regions_filter?pointclouds=[${pointcloudsArg}]®ions=[${regionsArg}]`;
-
- //console.log(url);
+ let attribute = pointcloud.getAttribute(selectedValue);
- info("estimating results ...");
+ if(selectedValue === "intensity gradient"){
+ attribute = pointcloud.getAttribute("intensity");
+ }
- let response = await fetch(url);
- let jsResponse = await response.json();
- //console.log(jsResponse);
+ const isIntensity = attribute ? ["intensity", "intensity gradient"].includes(attribute.name) : false;
- if(!jsResponse.handle){
- error(jsResponse.message);
- return;
- }else {
- handle = jsResponse.handle;
- }
- }
+ if(isIntensity){
+ if(pointcloud.material.intensityRange[0] === Infinity){
+ pointcloud.material.intensityRange = attribute.range;
+ }
- { // WAIT, CHECK PROGRESS, HANDLE FINISH
- let url = `${viewer.server}/check_regions_filter?handle=${handle}`;
+ const [min, max] = attribute.range;
- let sleep = (function(duration){
- return new Promise( (res, rej) => {
- setTimeout(() => {
- res();
- }, duration);
- });
- });
+ panel.find('#sldIntensityRange').slider({
+ range: true,
+ min: min, max: max, step: 0.01,
+ values: [min, max],
+ slide: (event, ui) => {
+ let min = ui.values[0];
+ let max = ui.values[1];
+ material.intensityRange = [min, max];
+ }
+ });
+ } else if(attribute){
+ const [min, max] = attribute.range;
- let handleFiltering = (jsResponse) => {
- let {progress, estimate} = jsResponse;
+ let selectedRange = material.getRange(attribute.name);
- let progressFract = progress["processed points"] / estimate.points;
- let progressPercents = parseInt(progressFract * 100);
+ if(!selectedRange){
+ selectedRange = [...attribute.range];
+ }
- info(`progress: ${progressPercents}%`);
- };
+ let minMaxAreNumbers = typeof min === "number" && typeof max === "number";
- let handleFinish = (jsResponse) => {
- let message = "downloads ready:
";
- message += "
";
+ if(minMaxAreNumbers){
+ panel.find('#sldExtraRange').slider({
+ range: true,
+ min: min,
+ max: max,
+ step: 0.01,
+ values: selectedRange,
+ slide: (event, ui) => {
+ let [a, b] = ui.values;
- for(let i = 0; i < jsResponse.pointclouds.length; i++){
- let url = `${viewer.server}/download_regions_filter_result?handle=${handle}&index=${i}`;
+ material.setRange(attribute.name, [a, b]);
+ }
+ });
+ }
- message += `result_${i}.las report.json \n`;
- message += " ";
+ let blockWeights = $('#materials\\.composite_weight_container');
+ let blockElevation = $('#materials\\.elevation_container');
+ let blockRGB = $('#materials\\.rgb_container');
+ let blockExtra = $('#materials\\.extra_container');
+ let blockColor = $('#materials\\.color_container');
+ let blockIntensity = $('#materials\\.intensity_container');
+ let blockIndex = $('#materials\\.index_container');
+ let blockTransition = $('#materials\\.transition_container');
+ let blockGps = $('#materials\\.gpstime_container');
+ let blockMatcap = $('#materials\\.matcap_container');
- info(message);
- };
+ blockIndex.css('display', 'none');
+ blockIntensity.css('display', 'none');
+ blockElevation.css('display', 'none');
+ blockRGB.css('display', 'none');
+ blockExtra.css('display', 'none');
+ blockColor.css('display', 'none');
+ blockWeights.css('display', 'none');
+ blockTransition.css('display', 'none');
+ blockMatcap.css('display', 'none');
+ blockGps.css('display', 'none');
- let handleUnexpected = (jsResponse) => {
- let message = `Unexpected Response.
status: ${jsResponse.status}
message: ${jsResponse.message}`;
- info(message);
+ if (selectedValue === 'composite') {
+ blockWeights.css('display', 'block');
+ blockElevation.css('display', 'block');
+ blockRGB.css('display', 'block');
+ blockIntensity.css('display', 'block');
+ } else if (selectedValue === 'elevation') {
+ blockElevation.css('display', 'block');
+ } else if (selectedValue === 'RGB and Elevation') {
+ blockRGB.css('display', 'block');
+ blockElevation.css('display', 'block');
+ } else if (selectedValue === 'rgba') {
+ blockRGB.css('display', 'block');
+ } else if (selectedValue === 'color') {
+ blockColor.css('display', 'block');
+ } else if (selectedValue === 'intensity') {
+ blockIntensity.css('display', 'block');
+ } else if (selectedValue === 'intensity gradient') {
+ blockIntensity.css('display', 'block');
+ } else if (selectedValue === "indices" ){
+ blockIndex.css('display', 'block');
+ } else if (selectedValue === "matcap" ){
+ blockMatcap.css('display', 'block');
+ } else if (selectedValue === "classification" ){
+ // add classification color selctor?
+ } else if (selectedValue === "gps-time" ){
+ blockGps.css('display', 'block');
+ } else if(selectedValue === "number of returns"){
+
+ } else if(selectedValue === "return number"){
+
+ } else if(["source id", "point source id"].includes(selectedValue)){
+
+ } else {
+ blockExtra.css('display', 'block');
+ }
};
- let handleError = (jsResponse) => {
- let message = `ERROR: ${jsResponse.message}`;
- error(message);
+ attributeSelection.selectmenu({change: updateMaterialPanel});
- throw new Error(message);
+ let update = () => {
+ attributeSelection.val(material.activeAttributeName).selectmenu('refresh');
};
+ this.addVolatileListener(material, "point_color_type_changed", update);
+ this.addVolatileListener(material, "active_attribute_changed", update);
- let start = Date.now();
+ update();
+ updateMaterialPanel();
+ }
- while(true){
- let response = await fetch(url);
- let jsResponse = await response.json();
+ {
+ const schemes = Object.keys(Potree.Gradients).map(name => ({name: name, values: Gradients[name]}));
+
+ let elSchemeContainer = panel.find("#elevation_gradient_scheme_selection");
+
+ for(let scheme of schemes){
+ let elScheme = $(`
+
+
+ `);
+
+ const svg = Potree.Utils.createSvgGradient(scheme.values);
+ svg.setAttributeNS(null, "class", `button-icon`);
+
+ elScheme.append($(svg));
+
+ elScheme.click( () => {
+ material.gradient = Gradients[scheme.name];
+ });
+
+ elSchemeContainer.append(elScheme);
+ }
+ }
+
+ {
+ let matcaps = [
+ {name: "Normals", icon: `${Potree.resourcePath}/icons/matcap/check_normal+y.jpg`},
+ {name: "Basic 1", icon: `${Potree.resourcePath}/icons/matcap/basic_1.jpg`},
+ {name: "Basic 2", icon: `${Potree.resourcePath}/icons/matcap/basic_2.jpg`},
+ {name: "Basic Dark", icon: `${Potree.resourcePath}/icons/matcap/basic_dark.jpg`},
+ {name: "Basic Side", icon: `${Potree.resourcePath}/icons/matcap/basic_side.jpg`},
+ {name: "Ceramic Dark", icon: `${Potree.resourcePath}/icons/matcap/ceramic_dark.jpg`},
+ {name: "Ceramic Lightbulb", icon: `${Potree.resourcePath}/icons/matcap/ceramic_lightbulb.jpg`},
+ {name: "Clay Brown", icon: `${Potree.resourcePath}/icons/matcap/clay_brown.jpg`},
+ {name: "Clay Muddy", icon: `${Potree.resourcePath}/icons/matcap/clay_muddy.jpg`},
+ {name: "Clay Studio", icon: `${Potree.resourcePath}/icons/matcap/clay_studio.jpg`},
+ {name: "Resin", icon: `${Potree.resourcePath}/icons/matcap/resin.jpg`},
+ {name: "Skin", icon: `${Potree.resourcePath}/icons/matcap/skin.jpg`},
+ {name: "Jade", icon: `${Potree.resourcePath}/icons/matcap/jade.jpg`},
+ {name: "Metal_ Anisotropic", icon: `${Potree.resourcePath}/icons/matcap/metal_anisotropic.jpg`},
+ {name: "Metal Carpaint", icon: `${Potree.resourcePath}/icons/matcap/metal_carpaint.jpg`},
+ {name: "Metal Lead", icon: `${Potree.resourcePath}/icons/matcap/metal_lead.jpg`},
+ {name: "Metal Shiny", icon: `${Potree.resourcePath}/icons/matcap/metal_shiny.jpg`},
+ {name: "Pearl", icon: `${Potree.resourcePath}/icons/matcap/pearl.jpg`},
+ {name: "Toon", icon: `${Potree.resourcePath}/icons/matcap/toon.jpg`},
+ {name: "Check Rim Light", icon: `${Potree.resourcePath}/icons/matcap/check_rim_light.jpg`},
+ {name: "Check Rim Dark", icon: `${Potree.resourcePath}/icons/matcap/check_rim_dark.jpg`},
+ {name: "Contours 1", icon: `${Potree.resourcePath}/icons/matcap/contours_1.jpg`},
+ {name: "Contours 2", icon: `${Potree.resourcePath}/icons/matcap/contours_2.jpg`},
+ {name: "Contours 3", icon: `${Potree.resourcePath}/icons/matcap/contours_3.jpg`},
+ {name: "Reflection Check Horizontal", icon: `${Potree.resourcePath}/icons/matcap/reflection_check_horizontal.jpg`},
+ {name: "Reflection Check Vertical", icon: `${Potree.resourcePath}/icons/matcap/reflection_check_vertical.jpg`},
+ ];
- if(jsResponse.status === "ERROR"){
- handleError(jsResponse);
- }else if(jsResponse.status === "FILTERING"){
- handleFiltering(jsResponse);
- }else if(jsResponse.status === "FINISHED"){
- handleFinish(jsResponse);
+ let elMatcapContainer = panel.find("#matcap_scheme_selection");
- break;
- }else {
- handleUnexpected(jsResponse);
- }
+ for(let matcap of matcaps){
+ let elMatcap = $(`
+
+ `);
- let durationS = (Date.now() - start) / 1000;
- let sleepAmountMS = durationS < 10 ? 100 : 1000;
+ elMatcap.click( () => {
+ material.matcap = matcap.icon.substring(matcap.icon.lastIndexOf('/'));
+ });
- await sleep(sleepAmountMS);
+ elMatcapContainer.append(elMatcap);
}
}
- }
- };
+ {
+ panel.find('#sldRGBGamma').slider({
+ value: material.rgbGamma,
+ min: 0, max: 4, step: 0.01,
+ slide: (event, ui) => {material.rgbGamma = ui.value;}
+ });
- class CameraPanel{
- constructor(viewer, propertiesPanel){
- this.viewer = viewer;
- this.propertiesPanel = propertiesPanel;
+ panel.find('#sldRGBContrast').slider({
+ value: material.rgbContrast,
+ min: -1, max: 1, step: 0.01,
+ slide: (event, ui) => {material.rgbContrast = ui.value;}
+ });
- this._update = () => { this.update(); };
+ panel.find('#sldRGBBrightness').slider({
+ value: material.rgbBrightness,
+ min: -1, max: 1, step: 0.01,
+ slide: (event, ui) => {material.rgbBrightness = ui.value;}
+ });
- let copyIconPath = Potree.resourcePath + '/icons/copy.svg';
- this.elContent = $(`
-
-
-
- position
-
-
-
-
-
-
- target
-
-
-
-
-
-
-
- `);
+ panel.find('#sldExtraGamma').slider({
+ value: material.extraGamma,
+ min: 0, max: 4, step: 0.01,
+ slide: (event, ui) => {material.extraGamma = ui.value;}
+ });
- this.elCopyPosition = this.elContent.find("img[name=copyPosition]");
- this.elCopyPosition.click( () => {
- let pos = this.viewer.scene.getActiveCamera().position.toArray();
- let msg = pos.map(c => c.toFixed(3)).join(", ");
- Utils.clipboardCopy(msg);
+ panel.find('#sldExtraBrightness').slider({
+ value: material.extraBrightness,
+ min: -1, max: 1, step: 0.01,
+ slide: (event, ui) => {material.extraBrightness = ui.value;}
+ });
- this.viewer.postMessage(
- `Copied value to clipboard:
'${msg}'`,
- {duration: 3000});
- });
+ panel.find('#sldExtraContrast').slider({
+ value: material.extraContrast,
+ min: -1, max: 1, step: 0.01,
+ slide: (event, ui) => {material.extraContrast = ui.value;}
+ });
- this.elCopyTarget = this.elContent.find("img[name=copyTarget]");
- this.elCopyTarget.click( () => {
- let pos = this.viewer.scene.view.getPivot().toArray();
- let msg = pos.map(c => c.toFixed(3)).join(", ");
- Utils.clipboardCopy(msg);
+ panel.find('#sldHeightRange').slider({
+ range: true,
+ min: 0, max: 1000, step: 0.01,
+ values: [0, 1000],
+ slide: (event, ui) => {
+ material.heightMin = ui.values[0];
+ material.heightMax = ui.values[1];
+ }
+ });
- this.viewer.postMessage(
- `Copied value to clipboard:
'${msg}'`,
- {duration: 3000});
- });
+ panel.find('#sldIntensityGamma').slider({
+ value: material.intensityGamma,
+ min: 0, max: 4, step: 0.01,
+ slide: (event, ui) => {material.intensityGamma = ui.value;}
+ });
- this.propertiesPanel.addVolatileListener(viewer, "camera_changed", this._update);
+ panel.find('#sldIntensityContrast').slider({
+ value: material.intensityContrast,
+ min: -1, max: 1, step: 0.01,
+ slide: (event, ui) => {material.intensityContrast = ui.value;}
+ });
- this.update();
- }
+ panel.find('#sldIntensityBrightness').slider({
+ value: material.intensityBrightness,
+ min: -1, max: 1, step: 0.01,
+ slide: (event, ui) => {material.intensityBrightness = ui.value;}
+ });
- update(){
- //console.log("updating camera panel");
+ panel.find('#sldWeightRGB').slider({
+ value: material.weightRGB,
+ min: 0, max: 1, step: 0.01,
+ slide: (event, ui) => {material.weightRGB = ui.value;}
+ });
- let camera = this.viewer.scene.getActiveCamera();
- let view = this.viewer.scene.view;
+ panel.find('#sldWeightIntensity').slider({
+ value: material.weightIntensity,
+ min: 0, max: 1, step: 0.01,
+ slide: (event, ui) => {material.weightIntensity = ui.value;}
+ });
- let pos = camera.position.toArray().map(c => Utils.addCommas(c.toFixed(3)));
- this.elContent.find("#camera_position_x").html(pos[0]);
- this.elContent.find("#camera_position_y").html(pos[1]);
- this.elContent.find("#camera_position_z").html(pos[2]);
+ panel.find('#sldWeightElevation').slider({
+ value: material.weightElevation,
+ min: 0, max: 1, step: 0.01,
+ slide: (event, ui) => {material.weightElevation = ui.value;}
+ });
- let target = view.getPivot().toArray().map(c => Utils.addCommas(c.toFixed(3)));
- this.elContent.find("#camera_target_x").html(target[0]);
- this.elContent.find("#camera_target_y").html(target[1]);
- this.elContent.find("#camera_target_z").html(target[2]);
- }
- };
+ panel.find('#sldWeightClassification').slider({
+ value: material.weightClassification,
+ min: 0, max: 1, step: 0.01,
+ slide: (event, ui) => {material.weightClassification = ui.value;}
+ });
- class AnnotationPanel{
- constructor(viewer, propertiesPanel, annotation){
- this.viewer = viewer;
- this.propertiesPanel = propertiesPanel;
- this.annotation = annotation;
+ panel.find('#sldWeightReturnNumber').slider({
+ value: material.weightReturnNumber,
+ min: 0, max: 1, step: 0.01,
+ slide: (event, ui) => {material.weightReturnNumber = ui.value;}
+ });
- this._update = () => { this.update(); };
+ panel.find('#sldWeightSourceID').slider({
+ value: material.weightSourceID,
+ min: 0, max: 1, step: 0.01,
+ slide: (event, ui) => {material.weightSourceID = ui.value;}
+ });
- let copyIconPath = `${Potree.resourcePath}/icons/copy.svg`;
- this.elContent = $(`
-
-
-
- position
-
-
-
-
-
+ panel.find(`#materials\\.color\\.picker`).spectrum({
+ flat: true,
+ showInput: true,
+ preferredFormat: 'rgb',
+ cancelText: '',
+ chooseText: 'Apply',
+ color: `#${material.color.getHexString()}`,
+ move: color => {
+ let cRGB = color.toRgb();
+ let tc = new Color().setRGB(cRGB.r / 255, cRGB.g / 255, cRGB.b / 255);
+ material.color = tc;
+ },
+ change: color => {
+ let cRGB = color.toRgb();
+ let tc = new Color().setRGB(cRGB.r / 255, cRGB.g / 255, cRGB.b / 255);
+ material.color = tc;
+ }
+ });
-
+ this.addVolatileListener(material, "color_changed", () => {
+ panel.find(`#materials\\.color\\.picker`)
+ .spectrum('set', `#${material.color.getHexString()}`);
+ });
-
+ let updateHeightRange = function () {
+
-
Title
-
- Annotation Title
-
+ let aPosition = pointcloud.getAttribute("position");
-
Description
-
- A longer description of this annotation.
- Can be multiple lines long. TODO: the user should be able
- to modify title and description.
-
+ let bMin, bMax;
-
+ if(aPosition){
+ // for new format 2.0 and loader that contain precomputed min/max of attributes
+ let min = aPosition.range[0][2];
+ let max = aPosition.range[1][2];
+ let width = max - min;
-
- `);
+ bMin = min - 0.2 * width;
+ bMax = max + 0.2 * width;
+ }else {
+ // for format up until exlusive 2.0
+ let box = [pointcloud.pcoGeometry.tightBoundingBox, pointcloud.getBoundingBoxWorld()]
+ .find(v => v !== undefined);
- this.elCopyPosition = this.elContent.find("img[name=copyPosition]");
- this.elCopyPosition.click( () => {
- let pos = this.annotation.position.toArray();
- let msg = pos.map(c => c.toFixed(3)).join(", ");
- Utils.clipboardCopy(msg);
+ pointcloud.updateMatrixWorld(true);
+ box = Utils.computeTransformedBoundingBox(box, pointcloud.matrixWorld);
- this.viewer.postMessage(
- `Copied value to clipboard:
'${msg}'`,
- {duration: 3000});
- });
+ let bWidth = box.max.z - box.min.z;
+ bMin = box.min.z - 0.2 * bWidth;
+ bMax = box.max.z + 0.2 * bWidth;
+ }
- this.elTitle = this.elContent.find("#annotation_title").html(annotation.title);
- this.elDescription = this.elContent.find("#annotation_description").html(annotation.description);
+ let range = material.elevationRange;
- this.elTitle[0].addEventListener("input", () => {
- const title = this.elTitle.html();
- annotation.title = title;
+ panel.find('#lblHeightRange').html(`${range[0].toFixed(2)} to ${range[1].toFixed(2)}`);
+ panel.find('#sldHeightRange').slider({min: bMin, max: bMax, values: range});
+ };
- }, false);
+ let updateExtraRange = function () {
- this.elDescription[0].addEventListener("input", () => {
- const description = this.elDescription.html();
- annotation.description = description;
- }, false);
+ let attributeName = material.activeAttributeName;
+ let attribute = pointcloud.getAttribute(attributeName);
- this.update();
- }
+ if(attribute == null){
+ return;
+ }
+
+ let range = material.getRange(attributeName);
- update(){
- const {annotation, elContent, elTitle, elDescription} = this;
+ if(range == null){
+ range = attribute.range;
+ }
- let pos = annotation.position.toArray().map(c => Utils.addCommas(c.toFixed(3)));
- elContent.find("#annotation_position_x").html(pos[0]);
- elContent.find("#annotation_position_y").html(pos[1]);
- elContent.find("#annotation_position_z").html(pos[2]);
+ // currently only supporting scalar ranges.
+ // rgba, normals, positions, etc have vector ranges, however
+ let isValidRange = (typeof range[0] === "number") && (typeof range[1] === "number");
+ if(!isValidRange){
+ return;
+ }
- elTitle.html(annotation.title);
- elDescription.html(annotation.description);
+ if(range){
+ let msg = `${range[0].toFixed(2)} to ${range[1].toFixed(2)}`;
+ panel.find('#lblExtraRange').html(msg);
+ }else {
+ panel.find("could not deduce range");
+ }
+ };
+ let updateIntensityRange = function () {
+ let range = material.intensityRange;
- }
- };
+ panel.find('#lblIntensityRange').html(`${parseInt(range[0])} to ${parseInt(range[1])}`);
+ };
- class CameraAnimationPanel{
- constructor(viewer, propertiesPanel, animation){
- this.viewer = viewer;
- this.propertiesPanel = propertiesPanel;
- this.animation = animation;
+ {
+ updateHeightRange();
+ panel.find(`#sldHeightRange`).slider('option', 'min');
+ panel.find(`#sldHeightRange`).slider('option', 'max');
+ }
- this.elContent = $(`
-
- `);
+ updateIntensityRange();
- const elPlay = this.elContent.find("input[name=play]");
- elPlay.click( () => {
- animation.play();
- });
+ panel.find('#lblIntensityGamma').html(gamma.toFixed(2));
+ panel.find('#lblIntensityContrast').html(contrast.toFixed(2));
+ panel.find('#lblIntensityBrightness').html(brightness.toFixed(2));
- const elSlider = this.elContent.find('#sldTime');
- elSlider.slider({
- value: 0,
- min: 0,
- max: 1,
- step: 0.001,
- slide: (event, ui) => {
- animation.set(ui.value);
- }
- });
+ panel.find('#sldIntensityGamma').slider({value: gamma});
+ panel.find('#sldIntensityContrast').slider({value: contrast});
+ panel.find('#sldIntensityBrightness').slider({value: brightness});
+ };
- let elDuration = this.elContent.find(`input[name=spnDuration]`);
- elDuration.spinner({
- min: 0, max: 300, step: 0.01,
- numberFormat: 'n',
- start: () => {},
- spin: (event, ui) => {
- let value = elDuration.spinner('value');
- animation.setDuration(value);
- },
- change: (event, ui) => {
- let value = elDuration.spinner('value');
- animation.setDuration(value);
- },
- stop: (event, ui) => {
- let value = elDuration.spinner('value');
- animation.setDuration(value);
- },
- incremental: (count) => {
- let value = elDuration.spinner('value');
- let step = elDuration.spinner('option', 'step');
+ let onRGBChange = () => {
+ let gamma = material.rgbGamma;
+ let contrast = material.rgbContrast;
+ let brightness = material.rgbBrightness;
- let delta = value * 0.05;
- let increments = Math.max(1, parseInt(delta / step));
+ panel.find('#lblRGBGamma').html(gamma.toFixed(2));
+ panel.find('#lblRGBContrast').html(contrast.toFixed(2));
+ panel.find('#lblRGBBrightness').html(brightness.toFixed(2));
- return increments;
- }
- });
- elDuration.spinner('value', animation.getDuration());
- elDuration.spinner('widget').css('width', '100%');
+ panel.find('#sldRGBGamma').slider({value: gamma});
+ panel.find('#sldRGBContrast').slider({value: contrast});
+ panel.find('#sldRGBBrightness').slider({value: brightness});
+ };
- const elKeyframes = this.elContent.find("#animation_keyframes");
+ this.addVolatileListener(material, "material_property_changed", updateExtraRange);
+ this.addVolatileListener(material, "material_property_changed", updateHeightRange);
+ this.addVolatileListener(material, "material_property_changed", onIntensityChange);
+ this.addVolatileListener(material, "material_property_changed", onRGBChange);
- const updateKeyframes = () => {
- elKeyframes.empty();
+ updateExtraRange();
+ updateHeightRange();
+ onIntensityChange();
+ onRGBChange();
+ }
- //let index = 0;
+ }
- //
- //
+
- const addNewKeyframeItem = (index) => {
- let elNewKeyframe = $(`
-
-
- `);
+ setMeasurement(object){
- const elAdd = elNewKeyframe.find("input[name=add]");
- elAdd.click( () => {
- animation.createControlPoint(index);
- });
+ let TYPE = {
+ DISTANCE: {panel: DistancePanel},
+ AREA: {panel: AreaPanel},
+ POINT: {panel: PointPanel},
+ ANGLE: {panel: AnglePanel},
+ HEIGHT: {panel: HeightPanel},
+ PROFILE: {panel: ProfilePanel},
+ VOLUME: {panel: VolumePanel},
+ CIRCLE: {panel: CirclePanel},
+ OTHER: {panel: PointPanel},
+ };
- elKeyframes.append(elNewKeyframe);
- };
+ let getType = (measurement) => {
+ if (measurement instanceof Measure) {
+ if (measurement.showDistances && !measurement.showArea && !measurement.showAngles) {
+ return TYPE.DISTANCE;
+ } else if (measurement.showDistances && measurement.showArea && !measurement.showAngles) {
+ return TYPE.AREA;
+ } else if (measurement.maxMarkers === 1) {
+ return TYPE.POINT;
+ } else if (!measurement.showDistances && !measurement.showArea && measurement.showAngles) {
+ return TYPE.ANGLE;
+ } else if (measurement.showHeight) {
+ return TYPE.HEIGHT;
+ } else if (measurement.showCircle) {
+ return TYPE.CIRCLE;
+ } else {
+ return TYPE.OTHER;
+ }
+ } else if (measurement instanceof Profile) {
+ return TYPE.PROFILE;
+ } else if (measurement instanceof Volume) {
+ return TYPE.VOLUME;
+ }
+ };
+
+ //this.container.html("measurement");
- const addKeyframeItem = (index) => {
- let elKeyframe = $(`
-
-
-
-
-
-
-
keyframe
-
-
-
-
- `);
+ let type = getType(object);
+ let Panel = type.panel;
- const elAssign = elKeyframe.find("img[name=assign]");
- const elMove = elKeyframe.find("img[name=move]");
- const elDelete = elKeyframe.find("img[name=delete]");
+ let panel = new Panel(this.viewer, object, this);
+ this.container.append(panel.elContent);
+ }
- elAssign.click( () => {
- const cp = animation.controlPoints[index];
+ setCamera(camera){
+ let panel = new CameraPanel(this.viewer, this);
+ this.container.append(panel.elContent);
+ }
- cp.position.copy(viewer.scene.view.position);
- cp.target.copy(viewer.scene.view.getPivot());
- });
+ setAnnotation(annotation){
+ let panel = new AnnotationPanel(this.viewer, this, annotation);
+ this.container.append(panel.elContent);
+ }
- elMove.click( () => {
- const cp = animation.controlPoints[index];
+ setCameraAnimation(animation){
+ let panel = new CameraAnimationPanel(this.viewer, this, animation);
+ this.container.append(panel.elContent);
+ }
- viewer.scene.view.position.copy(cp.position);
- viewer.scene.view.lookAt(cp.target);
- });
+ }
- elDelete.click( () => {
- const cp = animation.controlPoints[index];
- animation.removeControlPoint(cp);
- });
+ function addCommas(nStr){
+ nStr += '';
+ let x = nStr.split('.');
+ let x1 = x[0];
+ let x2 = x.length > 1 ? '.' + x[1] : '';
+ let rgx = /(\d+)(\d{3})/;
+ while (rgx.test(x1)) {
+ x1 = x1.replace(rgx, '$1' + ',' + '$2');
+ }
+ return x1 + x2;
+ };
- elKeyframes.append(elKeyframe);
- };
+ function format(value){
+ return addCommas(value.toFixed(3));
+ };
- let index = 0;
+ class HierarchicalSlider{
- addNewKeyframeItem(index);
+ constructor(params = {}){
+
+ this.element = document.createElement("div");
- for(const cp of animation.controlPoints){
-
- addKeyframeItem(index);
- index++;
- addNewKeyframeItem(index);
+ this.labels = [];
+ this.sliders = [];
+ this.range = params.range != null ? params.range : [0, 1];
+ this.slide = params.slide != null ? params.slide : null;
+ this.step = params.step != null ? params.step : 0.0001;
- }
- };
+ let levels = params.levels != null ? params.levels : 1;
- updateKeyframes();
+ for(let level = 0; level < levels; level++){
+ this.addLevel();
+ }
- animation.addEventListener("controlpoint_added", updateKeyframes);
- animation.addEventListener("controlpoint_removed", updateKeyframes);
+ }
+ setRange(range){
+ this.range = [...range];
+ { // root slider
+ let slider = this.sliders[0];
+ $(slider).slider({
+ min: range[0],
+ max: range[1],
+ });
+ }
- // this._update = () => { this.update(); };
+ for(let i = 1; i < this.sliders.length; i++){
+ let parentSlider = this.sliders[i - 1];
+ let slider = this.sliders[i];
- // this.update();
- }
+ let parentValues = $(parentSlider).slider("option", "values");
+ let childRange = [...parentValues];
- update(){
+ $(slider).slider({
+ min: childRange[0],
+ max: childRange[1],
+ });
+ }
+ this.updateLabels();
}
- };
-
- class PropertiesPanel{
- constructor(container, viewer){
- this.container = container;
- this.viewer = viewer;
- this.object = null;
- this.cleanupTasks = [];
- this.scene = null;
- }
+ setValues(values){
+ for(let slider of this.sliders){
+ $(slider).slider({
+ values: [...values],
+ });
+ }
- setScene(scene){
- this.scene = scene;
+ this.updateLabels();
}
- set(object){
- if(this.object === object){
- return;
- }
+ addLevel(){
+ const elLevel = document.createElement("li");
+ const elRange = document.createTextNode("Range: ");
+ const label = document.createElement("span");
+ const slider = document.createElement("div");
- this.object = object;
-
- for(let task of this.cleanupTasks){
- task();
- }
- this.cleanupTasks = [];
- this.container.empty();
+ let level = this.sliders.length;
+ let [min, max] = [0, 0];
- if(object instanceof PointCloudTree){
- this.setPointCloud(object);
- }else if(object instanceof Measure || object instanceof Profile || object instanceof Volume){
- this.setMeasurement(object);
- }else if(object instanceof Camera){
- this.setCamera(object);
- }else if(object instanceof Annotation){
- this.setAnnotation(object);
- }else if(object instanceof CameraAnimation){
- this.setCameraAnimation(object);
+ if(this.sliders.length === 0){
+ [min, max] = this.range;
+ }else {
+ let parentSlider = this.sliders[this.sliders.length - 1];
+ [min, max] = $(parentSlider).slider("option", "values");
}
- }
+ $(slider).slider({
+ range: true,
+ min: min,
+ max: max,
+ step: this.step,
+ values: [min, max],
+ slide: (event, ui) => {
+
+ // set all descendants to same range
+ let levels = this.sliders.length;
+ for(let i = level + 1; i < levels; i++){
+ let descendant = this.sliders[i];
- //
- // Used for events that should be removed when the property object changes.
- // This is for listening to materials, scene, point clouds, etc.
- // not required for DOM listeners, since they are automatically cleared by removing the DOM subtree.
- //
- addVolatileListener(target, type, callback){
- target.addEventListener(type, callback);
- this.cleanupTasks.push(() => {
- target.removeEventListener(type, callback);
- });
- }
+ $(descendant).slider({
+ range: true,
+ min: ui.values[0],
+ max: ui.values[1],
+ values: [...ui.values],
+ });
+ }
- setPointCloud(pointcloud){
+ if(this.slide){
+ let values = [...ui.values];
- let material = pointcloud.material;
+ this.slide({
+ target: this,
+ range: this.range,
+ values: values,
+ });
+ }
- let panel = $(`
-
-
-
- `);
+ this.scene = null;
+ this.sceneControls = new Scene();
- panel.i18n();
- this.container.append(panel);
+ let scroll = (e) => {
+ this.fovDelta += -e.delta * 1.0;
+ };
- { // POINT SIZE
- let sldPointSize = panel.find(`#sldPointSize`);
- let lblPointSize = panel.find(`#lblPointSize`);
+ this.addEventListener('mousewheel', scroll);
+ //this.addEventListener("mousemove", onMove);
+ }
- sldPointSize.slider({
- value: material.size,
- min: 0,
- max: 3,
- step: 0.01,
- slide: function (event, ui) { material.size = ui.value; }
- });
+ hasSomethingCaptured(){
+ return this.image !== null;
+ }
- let update = (e) => {
- lblPointSize.html(material.size.toFixed(2));
- sldPointSize.slider({value: material.size});
- };
- this.addVolatileListener(material, "point_size_changed", update);
-
- update();
+ capture(image){
+ if(this.hasSomethingCaptured()){
+ return;
}
- { // MINIMUM POINT SIZE
- let sldMinPointSize = panel.find(`#sldMinPointSize`);
- let lblMinPointSize = panel.find(`#lblMinPointSize`);
+ this.image = image;
- sldMinPointSize.slider({
- value: material.size,
- min: 0,
- max: 3,
- step: 0.01,
- slide: function (event, ui) { material.minSize = ui.value; }
- });
+ this.originalFOV = this.viewer.getFOV();
+ this.originalControls = this.viewer.getControls();
- let update = (e) => {
- lblMinPointSize.html(material.minSize.toFixed(2));
- sldMinPointSize.slider({value: material.minSize});
- };
- this.addVolatileListener(material, "point_size_changed", update);
-
- update();
- }
+ this.viewer.setControls(this);
+ this.viewer.scene.overrideCamera = this.shearCam;
- { // POINT SIZING
- let strSizeType = Object.keys(PointSizeType)[material.pointSizeType];
+ const elCanvas = this.viewer.renderer.domElement;
+ const elRoot = $(elCanvas.parentElement);
- let opt = panel.find(`#optPointSizing`);
- opt.selectmenu();
- opt.val(strSizeType).selectmenu('refresh');
+ this.shear = [0, 0];
- opt.selectmenu({
- change: (event, ui) => {
- material.pointSizeType = PointSizeType[ui.item.value];
- }
- });
- }
- { // SHAPE
- let opt = panel.find(`#optShape`);
+ elRoot.append(this.elUp);
+ elRoot.append(this.elRight);
+ elRoot.append(this.elDown);
+ elRoot.append(this.elLeft);
+ elRoot.append(this.elExit);
+ }
- opt.selectmenu({
- change: (event, ui) => {
- let value = ui.item.value;
+ release(){
+ this.image = null;
- material.shape = PointShape[value];
- }
- });
+ this.viewer.scene.overrideCamera = null;
- let update = () => {
- let typename = Object.keys(PointShape)[material.shape];
+ this.elUp.detach();
+ this.elRight.detach();
+ this.elDown.detach();
+ this.elLeft.detach();
+ this.elExit.detach();
- opt.selectmenu().val(typename).selectmenu('refresh');
- };
- this.addVolatileListener(material, "point_shape_changed", update);
+ this.viewer.setFOV(this.originalFOV);
+ this.viewer.setControls(this.originalControls);
+ }
- update();
- }
+ setScene (scene) {
+ this.scene = scene;
+ }
- { // BACKFACE CULLING
-
- let opt = panel.find(`#set_backface_culling`);
- opt.click(() => {
- material.backfaceCulling = opt.prop("checked");
- });
- let update = () => {
- let value = material.backfaceCulling;
- opt.prop("checked", value);
- };
- this.addVolatileListener(material, "backface_changed", update);
- update();
+ update (delta) {
+ // const view = this.scene.view;
- let blockBackface = $('#materials_backface_container');
- blockBackface.css('display', 'none');
+ // let prevTotal = this.shearCam.projectionMatrix.elements.reduce( (a, i) => a + i, 0);
- const pointAttributes = pointcloud.pcoGeometry.pointAttributes;
- const hasNormals = pointAttributes.hasNormals ? pointAttributes.hasNormals() : false;
- if(hasNormals) {
- blockBackface.css('display', 'block');
- }
- /*
- opt.checkboxradio({
- clicked: (event, ui) => {
- // let value = ui.item.value;
- let value = ui.item.checked;
- console.log(value);
- material.backfaceCulling = value; // $('#set_freeze').prop("checked");
- }
- });
- */
- }
+ //const progression = Math.min(1, this.fadeFactor * delta);
+ //const attenuation = Math.max(0, 1 - this.fadeFactor * delta);
+ const progression = 1;
+ const attenuation = 0;
- { // OPACITY
- let sldOpacity = panel.find(`#sldOpacity`);
- let lblOpacity = panel.find(`#lblOpacity`);
+ const oldFov = this.viewer.getFOV();
+ let fovProgression = progression * this.fovDelta;
+ let newFov = oldFov * ((1 + fovProgression / 10));
- sldOpacity.slider({
- value: material.opacity,
- min: 0,
- max: 1,
- step: 0.001,
- slide: function (event, ui) {
- material.opacity = ui.value;
- }
- });
+ newFov = Math.max(this.fovMin, newFov);
+ newFov = Math.min(this.fovMax, newFov);
- let update = (e) => {
- lblOpacity.html(material.opacity.toFixed(2));
- sldOpacity.slider({value: material.opacity});
- };
- this.addVolatileListener(material, "opacity_changed", update);
+ let diff = newFov / oldFov;
- update();
- }
+ const mouse = this.viewer.inputHandler.mouse;
+ const canvasSize = this.viewer.renderer.getSize(new Vector2());
+ const uv = [
+ (mouse.x / canvasSize.x),
+ ((canvasSize.y - mouse.y) / canvasSize.y)
+ ];
+
+ const fovY = newFov;
+ const aspect = canvasSize.x / canvasSize.y;
+ const top = Math.tan(MathUtils.degToRad(fovY / 2));
+ const height = 2 * top;
+ const width = aspect * height;
+
+ const shearRangeX = [
+ this.shear[0] - 0.5 * width,
+ this.shear[0] + 0.5 * width,
+ ];
+
+ const shearRangeY = [
+ this.shear[1] - 0.5 * height,
+ this.shear[1] + 0.5 * height,
+ ];
- {
+ const shx = (1 - uv[0]) * shearRangeX[0] + uv[0] * shearRangeX[1];
+ const shy = (1 - uv[1]) * shearRangeY[0] + uv[1] * shearRangeY[1];
- const attributes = pointcloud.pcoGeometry.pointAttributes.attributes;
+ const shu = (1 - diff);
- let options = [];
+ const newShear = [
+ (1 - shu) * this.shear[0] + shu * shx,
+ (1 - shu) * this.shear[1] + shu * shy,
+ ];
+
+ this.shear = newShear;
+ this.viewer.setFOV(newFov);
+
+ const {originalCam, shearCam} = this;
- options.push(...attributes.map(a => a.name));
+ originalCam.fov = newFov;
+ originalCam.updateMatrixWorld();
+ originalCam.updateProjectionMatrix();
+ shearCam.copy(originalCam);
+ shearCam.rotation.set(...originalCam.rotation.toArray());
- const intensityIndex = options.indexOf("intensity");
- if(intensityIndex >= 0){
- options.splice(intensityIndex + 1, 0, "intensity gradient");
- }
+ shearCam.updateMatrixWorld();
+ shearCam.projectionMatrix.copy(originalCam.projectionMatrix);
- options.push(
- "elevation",
- "color",
- 'matcap',
- 'indices',
- 'level of detail',
- 'composite'
- );
+ const [sx, sy] = this.shear;
+ const mShear = new Matrix4().set(
+ 1, 0, sx, 0,
+ 0, 1, sy, 0,
+ 0, 0, 1, 0,
+ 0, 0, 0, 1,
+ );
- const blacklist = [
- "POSITION_CARTESIAN",
- "position",
- ];
+ const proj = shearCam.projectionMatrix;
+ proj.multiply(mShear);
+ shearCam.projectionMatrixInverse.copy(proj).invert();
- options = options.filter(o => !blacklist.includes(o));
+ let total = shearCam.projectionMatrix.elements.reduce( (a, i) => a + i, 0);
- let attributeSelection = panel.find('#optMaterial');
- for(let option of options){
- let elOption = $(`
${option} `);
- attributeSelection.append(elOption);
- }
+ this.fovDelta *= attenuation;
+ }
+ };
- let updateMaterialPanel = (event, ui) => {
- let selectedValue = attributeSelection.selectmenu().val();
- material.activeAttributeName = selectedValue;
+ // https://support.pix4d.com/hc/en-us/articles/205675256-How-are-yaw-pitch-roll-defined
+ // https://support.pix4d.com/hc/en-us/articles/202558969-How-are-omega-phi-kappa-defined
- let attribute = pointcloud.getAttribute(selectedValue);
+ function createMaterial(){
- if(selectedValue === "intensity gradient"){
- attribute = pointcloud.getAttribute("intensity");
- }
+ let vertexShader = `
+ uniform float uNear;
+ varying vec2 vUV;
+ varying vec4 vDebug;
+
+ void main(){
+ vDebug = vec4(0.0, 1.0, 0.0, 1.0);
+ vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
+ // make sure that this mesh is at least in front of the near plane
+ modelViewPosition.xyz += normalize(modelViewPosition.xyz) * uNear;
+ gl_Position = projectionMatrix * modelViewPosition;
+ vUV = uv;
+ }
+ `;
- const isIntensity = attribute ? ["intensity", "intensity gradient"].includes(attribute.name) : false;
+ let fragmentShader = `
+ uniform sampler2D tColor;
+ uniform float uOpacity;
+ varying vec2 vUV;
+ varying vec4 vDebug;
+ void main(){
+ vec4 color = texture2D(tColor, vUV);
+ gl_FragColor = color;
+ gl_FragColor.a = uOpacity;
+ }
+ `;
+ const material = new ShaderMaterial( {
+ uniforms: {
+ // time: { value: 1.0 },
+ // resolution: { value: new THREE.Vector2() }
+ tColor: {value: new Texture() },
+ uNear: {value: 0.0},
+ uOpacity: {value: 1.0},
+ },
+ vertexShader: vertexShader,
+ fragmentShader: fragmentShader,
+ side: DoubleSide,
+ } );
- if(isIntensity){
- if(pointcloud.material.intensityRange[0] === Infinity){
- pointcloud.material.intensityRange = attribute.range;
- }
+ material.side = DoubleSide;
- const [min, max] = attribute.range;
+ return material;
+ }
- panel.find('#sldIntensityRange').slider({
- range: true,
- min: min, max: max, step: 0.01,
- values: [min, max],
- slide: (event, ui) => {
- let min = ui.values[0];
- let max = ui.values[1];
- material.intensityRange = [min, max];
- }
- });
- } else if(attribute){
- const [min, max] = attribute.range;
+ const planeGeometry = new PlaneGeometry(1, 1);
+ const lineGeometry = new Geometry();
- let selectedRange = material.getRange(attribute.name);
+ lineGeometry.vertices.push(
+ new Vector3(-0.5, -0.5, 0),
+ new Vector3( 0.5, -0.5, 0),
+ new Vector3( 0.5, 0.5, 0),
+ new Vector3(-0.5, 0.5, 0),
+ new Vector3(-0.5, -0.5, 0),
+ );
- if(!selectedRange){
- selectedRange = [...attribute.range];
- }
+ class OrientedImage{
- let minMaxAreNumbers = typeof min === "number" && typeof max === "number";
+ constructor(id){
- if(minMaxAreNumbers){
- panel.find('#sldExtraRange').slider({
- range: true,
- min: min,
- max: max,
- step: 0.01,
- values: selectedRange,
- slide: (event, ui) => {
- let [a, b] = ui.values;
+ this.id = id;
+ this.fov = 1.0;
+ this.position = new Vector3();
+ this.rotation = new Vector3();
+ this.width = 0;
+ this.height = 0;
+ this.fov = 1.0;
- material.setRange(attribute.name, [a, b]);
- }
- });
- }
+ const material = createMaterial();
+ const lineMaterial = new LineBasicMaterial( { color: 0x00ff00 } );
+ this.mesh = new Mesh(planeGeometry, material);
+ this.line = new Line(lineGeometry, lineMaterial);
+ this.texture = null;
- }
+ this.mesh.orientedImage = this;
+ }
- let blockWeights = $('#materials\\.composite_weight_container');
- let blockElevation = $('#materials\\.elevation_container');
- let blockRGB = $('#materials\\.rgb_container');
- let blockExtra = $('#materials\\.extra_container');
- let blockColor = $('#materials\\.color_container');
- let blockIntensity = $('#materials\\.intensity_container');
- let blockIndex = $('#materials\\.index_container');
- let blockTransition = $('#materials\\.transition_container');
- let blockGps = $('#materials\\.gpstime_container');
- let blockMatcap = $('#materials\\.matcap_container');
+ set(position, rotation, dimension, fov){
- blockIndex.css('display', 'none');
- blockIntensity.css('display', 'none');
- blockElevation.css('display', 'none');
- blockRGB.css('display', 'none');
- blockExtra.css('display', 'none');
- blockColor.css('display', 'none');
- blockWeights.css('display', 'none');
- blockTransition.css('display', 'none');
- blockMatcap.css('display', 'none');
- blockGps.css('display', 'none');
+ let radians = rotation.map(MathUtils.degToRad);
- if (selectedValue === 'composite') {
- blockWeights.css('display', 'block');
- blockElevation.css('display', 'block');
- blockRGB.css('display', 'block');
- blockIntensity.css('display', 'block');
- } else if (selectedValue === 'elevation') {
- blockElevation.css('display', 'block');
- } else if (selectedValue === 'RGB and Elevation') {
- blockRGB.css('display', 'block');
- blockElevation.css('display', 'block');
- } else if (selectedValue === 'rgba') {
- blockRGB.css('display', 'block');
- } else if (selectedValue === 'color') {
- blockColor.css('display', 'block');
- } else if (selectedValue === 'intensity') {
- blockIntensity.css('display', 'block');
- } else if (selectedValue === 'intensity gradient') {
- blockIntensity.css('display', 'block');
- } else if (selectedValue === "indices" ){
- blockIndex.css('display', 'block');
- } else if (selectedValue === "matcap" ){
- blockMatcap.css('display', 'block');
- } else if (selectedValue === "classification" ){
- // add classification color selctor?
- } else if (selectedValue === "gps-time" ){
- blockGps.css('display', 'block');
- } else if(selectedValue === "number of returns"){
-
- } else if(selectedValue === "return number"){
-
- } else if(["source id", "point source id"].includes(selectedValue)){
-
- } else {
- blockExtra.css('display', 'block');
- }
- };
+ this.position.set(...position);
+ this.mesh.position.set(...position);
- attributeSelection.selectmenu({change: updateMaterialPanel});
+ this.rotation.set(...radians);
+ this.mesh.rotation.set(...radians);
- let update = () => {
- attributeSelection.val(material.activeAttributeName).selectmenu('refresh');
- };
- this.addVolatileListener(material, "point_color_type_changed", update);
- this.addVolatileListener(material, "active_attribute_changed", update);
+ [this.width, this.height] = dimension;
+ this.mesh.scale.set(this.width / this.height, 1, 1);
- update();
- updateMaterialPanel();
- }
+ this.fov = fov;
- {
- const schemes = Object.keys(Potree.Gradients).map(name => ({name: name, values: Gradients[name]}));
+ this.updateTransform();
+ }
- let elSchemeContainer = panel.find("#elevation_gradient_scheme_selection");
+ updateTransform(){
+ let {mesh, line, fov} = this;
- for(let scheme of schemes){
- let elScheme = $(`
-
-
- `);
+ mesh.updateMatrixWorld();
+ const dir = mesh.getWorldDirection();
+ const alpha = MathUtils.degToRad(fov / 2);
+ const d = -0.5 / Math.tan(alpha);
+ const move = dir.clone().multiplyScalar(d);
+ mesh.position.add(move);
- const svg = Potree.Utils.createSvgGradient(scheme.values);
- svg.setAttributeNS(null, "class", `button-icon`);
+ line.position.copy(mesh.position);
+ line.scale.copy(mesh.scale);
+ line.rotation.copy(mesh.rotation);
+ }
- elScheme.append($(svg));
+ };
- elScheme.click( () => {
- material.gradient = Gradients[scheme.name];
- });
+ class OrientedImages extends EventDispatcher{
- elSchemeContainer.append(elScheme);
- }
- }
+ constructor(){
+ super();
- {
- let matcaps = [
- {name: "Normals", icon: `${Potree.resourcePath}/icons/matcap/check_normal+y.jpg`},
- {name: "Basic 1", icon: `${Potree.resourcePath}/icons/matcap/basic_1.jpg`},
- {name: "Basic 2", icon: `${Potree.resourcePath}/icons/matcap/basic_2.jpg`},
- {name: "Basic Dark", icon: `${Potree.resourcePath}/icons/matcap/basic_dark.jpg`},
- {name: "Basic Side", icon: `${Potree.resourcePath}/icons/matcap/basic_side.jpg`},
- {name: "Ceramic Dark", icon: `${Potree.resourcePath}/icons/matcap/ceramic_dark.jpg`},
- {name: "Ceramic Lightbulb", icon: `${Potree.resourcePath}/icons/matcap/ceramic_lightbulb.jpg`},
- {name: "Clay Brown", icon: `${Potree.resourcePath}/icons/matcap/clay_brown.jpg`},
- {name: "Clay Muddy", icon: `${Potree.resourcePath}/icons/matcap/clay_muddy.jpg`},
- {name: "Clay Studio", icon: `${Potree.resourcePath}/icons/matcap/clay_studio.jpg`},
- {name: "Resin", icon: `${Potree.resourcePath}/icons/matcap/resin.jpg`},
- {name: "Skin", icon: `${Potree.resourcePath}/icons/matcap/skin.jpg`},
- {name: "Jade", icon: `${Potree.resourcePath}/icons/matcap/jade.jpg`},
- {name: "Metal_ Anisotropic", icon: `${Potree.resourcePath}/icons/matcap/metal_anisotropic.jpg`},
- {name: "Metal Carpaint", icon: `${Potree.resourcePath}/icons/matcap/metal_carpaint.jpg`},
- {name: "Metal Lead", icon: `${Potree.resourcePath}/icons/matcap/metal_lead.jpg`},
- {name: "Metal Shiny", icon: `${Potree.resourcePath}/icons/matcap/metal_shiny.jpg`},
- {name: "Pearl", icon: `${Potree.resourcePath}/icons/matcap/pearl.jpg`},
- {name: "Toon", icon: `${Potree.resourcePath}/icons/matcap/toon.jpg`},
- {name: "Check Rim Light", icon: `${Potree.resourcePath}/icons/matcap/check_rim_light.jpg`},
- {name: "Check Rim Dark", icon: `${Potree.resourcePath}/icons/matcap/check_rim_dark.jpg`},
- {name: "Contours 1", icon: `${Potree.resourcePath}/icons/matcap/contours_1.jpg`},
- {name: "Contours 2", icon: `${Potree.resourcePath}/icons/matcap/contours_2.jpg`},
- {name: "Contours 3", icon: `${Potree.resourcePath}/icons/matcap/contours_3.jpg`},
- {name: "Reflection Check Horizontal", icon: `${Potree.resourcePath}/icons/matcap/reflection_check_horizontal.jpg`},
- {name: "Reflection Check Vertical", icon: `${Potree.resourcePath}/icons/matcap/reflection_check_vertical.jpg`},
- ];
+ this.node = null;
+ this.cameraParams = null;
+ this.imageParams = null;
+ this.images = null;
+ this._visible = true;
+ }
- let elMatcapContainer = panel.find("#matcap_scheme_selection");
+ set visible(visible){
+ if(this._visible === visible){
+ return;
+ }
- for(let matcap of matcaps){
- let elMatcap = $(`
-
- `);
+ for(const image of this.images){
+ image.mesh.visible = visible;
+ image.line.visible = visible;
+ }
- elMatcap.click( () => {
- material.matcap = matcap.icon.substring(matcap.icon.lastIndexOf('/'));
- });
+ this._visible = visible;
+ this.dispatchEvent({
+ type: "visibility_changed",
+ images: this,
+ });
+ }
- elMatcapContainer.append(elMatcap);
- }
- }
+ get visible(){
+ return this._visible;
+ }
- {
- panel.find('#sldRGBGamma').slider({
- value: material.rgbGamma,
- min: 0, max: 4, step: 0.01,
- slide: (event, ui) => {material.rgbGamma = ui.value;}
- });
- panel.find('#sldRGBContrast').slider({
- value: material.rgbContrast,
- min: -1, max: 1, step: 0.01,
- slide: (event, ui) => {material.rgbContrast = ui.value;}
- });
+ };
- panel.find('#sldRGBBrightness').slider({
- value: material.rgbBrightness,
- min: -1, max: 1, step: 0.01,
- slide: (event, ui) => {material.rgbBrightness = ui.value;}
- });
+ class OrientedImageLoader{
- panel.find('#sldExtraGamma').slider({
- value: material.extraGamma,
- min: 0, max: 4, step: 0.01,
- slide: (event, ui) => {material.extraGamma = ui.value;}
- });
+ static async loadCameraParams(path){
+ const res = await fetch(path);
+ const text = await res.text();
- panel.find('#sldExtraBrightness').slider({
- value: material.extraBrightness,
- min: -1, max: 1, step: 0.01,
- slide: (event, ui) => {material.extraBrightness = ui.value;}
- });
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(text, "application/xml");
- panel.find('#sldExtraContrast').slider({
- value: material.extraContrast,
- min: -1, max: 1, step: 0.01,
- slide: (event, ui) => {material.extraContrast = ui.value;}
- });
+ const width = parseInt(doc.getElementsByTagName("width")[0].textContent);
+ const height = parseInt(doc.getElementsByTagName("height")[0].textContent);
+ const f = parseFloat(doc.getElementsByTagName("f")[0].textContent);
- panel.find('#sldHeightRange').slider({
- range: true,
- min: 0, max: 1000, step: 0.01,
- values: [0, 1000],
- slide: (event, ui) => {
- material.heightMin = ui.values[0];
- material.heightMax = ui.values[1];
- }
- });
+ let a = (height / 2) / f;
+ let fov = 2 * MathUtils.radToDeg(Math.atan(a));
- panel.find('#sldIntensityGamma').slider({
- value: material.intensityGamma,
- min: 0, max: 4, step: 0.01,
- slide: (event, ui) => {material.intensityGamma = ui.value;}
- });
+ const params = {
+ path: path,
+ width: width,
+ height: height,
+ f: f,
+ fov: fov,
+ };
- panel.find('#sldIntensityContrast').slider({
- value: material.intensityContrast,
- min: -1, max: 1, step: 0.01,
- slide: (event, ui) => {material.intensityContrast = ui.value;}
- });
+ return params;
+ }
- panel.find('#sldIntensityBrightness').slider({
- value: material.intensityBrightness,
- min: -1, max: 1, step: 0.01,
- slide: (event, ui) => {material.intensityBrightness = ui.value;}
- });
+ static async loadImageParams(path){
- panel.find('#sldWeightRGB').slider({
- value: material.weightRGB,
- min: 0, max: 1, step: 0.01,
- slide: (event, ui) => {material.weightRGB = ui.value;}
- });
+ const response = await fetch(path);
+ if(!response.ok){
+ console.error(`failed to load ${path}`);
+ return;
+ }
- panel.find('#sldWeightIntensity').slider({
- value: material.weightIntensity,
- min: 0, max: 1, step: 0.01,
- slide: (event, ui) => {material.weightIntensity = ui.value;}
- });
+ const content = await response.text();
+ const lines = content.split(/\r?\n/);
+ const imageParams = [];
- panel.find('#sldWeightElevation').slider({
- value: material.weightElevation,
- min: 0, max: 1, step: 0.01,
- slide: (event, ui) => {material.weightElevation = ui.value;}
- });
+ for(let i = 1; i < lines.length; i++){
+ const line = lines[i];
- panel.find('#sldWeightClassification').slider({
- value: material.weightClassification,
- min: 0, max: 1, step: 0.01,
- slide: (event, ui) => {material.weightClassification = ui.value;}
- });
+ if(line.startsWith("#")){
+ continue;
+ }
- panel.find('#sldWeightReturnNumber').slider({
- value: material.weightReturnNumber,
- min: 0, max: 1, step: 0.01,
- slide: (event, ui) => {material.weightReturnNumber = ui.value;}
- });
+ const tokens = line.split(/\s+/);
- panel.find('#sldWeightSourceID').slider({
- value: material.weightSourceID,
- min: 0, max: 1, step: 0.01,
- slide: (event, ui) => {material.weightSourceID = ui.value;}
- });
+ if(tokens.length < 6){
+ continue;
+ }
- panel.find(`#materials\\.color\\.picker`).spectrum({
- flat: true,
- showInput: true,
- preferredFormat: 'rgb',
- cancelText: '',
- chooseText: 'Apply',
- color: `#${material.color.getHexString()}`,
- move: color => {
- let cRGB = color.toRgb();
- let tc = new Color().setRGB(cRGB.r / 255, cRGB.g / 255, cRGB.b / 255);
- material.color = tc;
- },
- change: color => {
- let cRGB = color.toRgb();
- let tc = new Color().setRGB(cRGB.r / 255, cRGB.g / 255, cRGB.b / 255);
- material.color = tc;
- }
- });
+ const params = {
+ id: tokens[0],
+ x: Number.parseFloat(tokens[1]),
+ y: Number.parseFloat(tokens[2]),
+ z: Number.parseFloat(tokens[3]),
+ omega: Number.parseFloat(tokens[4]),
+ phi: Number.parseFloat(tokens[5]),
+ kappa: Number.parseFloat(tokens[6]),
+ };
- this.addVolatileListener(material, "color_changed", () => {
- panel.find(`#materials\\.color\\.picker`)
- .spectrum('set', `#${material.color.getHexString()}`);
- });
+ // const whitelist = ["47518.jpg"];
+ // if(whitelist.includes(params.id)){
+ // imageParams.push(params);
+ // }
+ imageParams.push(params);
+ }
- let updateHeightRange = function () {
-
+ // debug
+ //return [imageParams[50]];
- let aPosition = pointcloud.getAttribute("position");
+ return imageParams;
+ }
- let bMin, bMax;
+ static async load(cameraParamsPath, imageParamsPath, viewer){
- if(aPosition){
- // for new format 2.0 and loader that contain precomputed min/max of attributes
- let min = aPosition.range[0][2];
- let max = aPosition.range[1][2];
- let width = max - min;
+ const tStart = performance.now();
- bMin = min - 0.2 * width;
- bMax = max + 0.2 * width;
- }else {
- // for format up until exlusive 2.0
- let box = [pointcloud.pcoGeometry.tightBoundingBox, pointcloud.getBoundingBoxWorld()]
- .find(v => v !== undefined);
+ const [cameraParams, imageParams] = await Promise.all([
+ OrientedImageLoader.loadCameraParams(cameraParamsPath),
+ OrientedImageLoader.loadImageParams(imageParamsPath),
+ ]);
- pointcloud.updateMatrixWorld(true);
- box = Utils.computeTransformedBoundingBox(box, pointcloud.matrixWorld);
+ const orientedImageControls = new OrientedImageControls(viewer);
+ const raycaster = new Raycaster();
- let bWidth = box.max.z - box.min.z;
- bMin = box.min.z - 0.2 * bWidth;
- bMax = box.max.z + 0.2 * bWidth;
- }
+ const tEnd = performance.now();
+ console.log(tEnd - tStart);
- let range = material.elevationRange;
+ // const sp = new THREE.PlaneGeometry(1, 1);
+ // const lg = new THREE.Geometry();
- panel.find('#lblHeightRange').html(`${range[0].toFixed(2)} to ${range[1].toFixed(2)}`);
- panel.find('#sldHeightRange').slider({min: bMin, max: bMax, values: range});
- };
+ // lg.vertices.push(
+ // new THREE.Vector3(-0.5, -0.5, 0),
+ // new THREE.Vector3( 0.5, -0.5, 0),
+ // new THREE.Vector3( 0.5, 0.5, 0),
+ // new THREE.Vector3(-0.5, 0.5, 0),
+ // new THREE.Vector3(-0.5, -0.5, 0),
+ // );
- let updateExtraRange = function () {
+ const {width, height} = cameraParams;
+ const orientedImages = [];
+ const sceneNode = new Object3D();
+ sceneNode.name = "oriented_images";
- let attributeName = material.activeAttributeName;
- let attribute = pointcloud.getAttribute(attributeName);
+ for(const params of imageParams){
- if(attribute == null){
- return;
- }
-
- let range = material.getRange(attributeName);
+ // const material = createMaterial();
+ // const lm = new THREE.LineBasicMaterial( { color: 0x00ff00 } );
+ // const mesh = new THREE.Mesh(sp, material);
- if(range == null){
- range = attribute.range;
- }
+ const {x, y, z, omega, phi, kappa} = params;
+ // const [rx, ry, rz] = [omega, phi, kappa]
+ // .map(THREE.Math.degToRad);
+
+ // mesh.position.set(x, y, z);
+ // mesh.scale.set(width / height, 1, 1);
+ // mesh.rotation.set(rx, ry, rz);
+ // {
+ // mesh.updateMatrixWorld();
+ // const dir = mesh.getWorldDirection();
+ // const alpha = THREE.Math.degToRad(cameraParams.fov / 2);
+ // const d = -0.5 / Math.tan(alpha);
+ // const move = dir.clone().multiplyScalar(d);
+ // mesh.position.add(move);
+ // }
+ // sceneNode.add(mesh);
+
+ // const line = new THREE.Line(lg, lm);
+ // line.position.copy(mesh.position);
+ // line.scale.copy(mesh.scale);
+ // line.rotation.copy(mesh.rotation);
+ // sceneNode.add(line);
+
+ let orientedImage = new OrientedImage(params.id);
+ // orientedImage.setPosition(x, y, z);
+ // orientedImage.setRotation(omega, phi, kappa);
+ // orientedImage.setDimension(width, height);
+ let position = [x, y, z];
+ let rotation = [omega, phi, kappa];
+ let dimension = [width, height];
+ orientedImage.set(position, rotation, dimension, cameraParams.fov);
+
+ sceneNode.add(orientedImage.mesh);
+ sceneNode.add(orientedImage.line);
+
+ orientedImages.push(orientedImage);
+ }
- // currently only supporting scalar ranges.
- // rgba, normals, positions, etc have vector ranges, however
- let isValidRange = (typeof range[0] === "number") && (typeof range[1] === "number");
- if(!isValidRange){
- return;
- }
+ let hoveredElement = null;
+ let clipVolume = null;
- if(range){
- let msg = `${range[0].toFixed(2)} to ${range[1].toFixed(2)}`;
- panel.find('#lblExtraRange').html(msg);
- }else {
- panel.find("could not deduce range");
- }
- };
+ const onMouseMove = (evt) => {
+ const tStart = performance.now();
+ if(hoveredElement){
+ hoveredElement.line.material.color.setRGB(0, 1, 0);
+ }
+ evt.preventDefault();
- let updateIntensityRange = function () {
- let range = material.intensityRange;
+ //var array = getMousePosition( container, evt.clientX, evt.clientY );
+ const rect = viewer.renderer.domElement.getBoundingClientRect();
+ const [x, y] = [evt.clientX, evt.clientY];
+ const array = [
+ ( x - rect.left ) / rect.width,
+ ( y - rect.top ) / rect.height
+ ];
+ const onClickPosition = new Vector2(...array);
+ //const intersects = getIntersects(onClickPosition, scene.children);
+ const camera = viewer.scene.getActiveCamera();
+ const mouse = new Vector3(
+ + ( onClickPosition.x * 2 ) - 1,
+ - ( onClickPosition.y * 2 ) + 1 );
+ const objects = orientedImages.map(i => i.mesh);
+ raycaster.setFromCamera( mouse, camera );
+ const intersects = raycaster.intersectObjects( objects );
+ let selectionChanged = false;
+
+ if ( intersects.length > 0){
+ //console.log(intersects);
+ const intersection = intersects[0];
+ const orientedImage = intersection.object.orientedImage;
+ orientedImage.line.material.color.setRGB(1, 0, 0);
+ selectionChanged = hoveredElement !== orientedImage;
+ hoveredElement = orientedImage;
+ }else {
+ hoveredElement = null;
+ }
- panel.find('#lblIntensityRange').html(`${parseInt(range[0])} to ${parseInt(range[1])}`);
- };
+ let shouldRemoveClipVolume = clipVolume !== null && hoveredElement === null;
+ let shouldAddClipVolume = clipVolume === null && hoveredElement !== null;
- {
- updateHeightRange();
- panel.find(`#sldHeightRange`).slider('option', 'min');
- panel.find(`#sldHeightRange`).slider('option', 'max');
+ if(clipVolume !== null && (hoveredElement === null || selectionChanged)){
+ // remove existing
+ viewer.scene.removePolygonClipVolume(clipVolume);
+ clipVolume = null;
+ }
+
+ if(shouldAddClipVolume || selectionChanged){
+ const img = hoveredElement;
+ const fov = cameraParams.fov;
+ const aspect = cameraParams.width / cameraParams.height;
+ const near = 1.0;
+ const far = 1000 * 1000;
+ const camera = new PerspectiveCamera(fov, aspect, near, far);
+ camera.rotation.order = viewer.scene.getActiveCamera().rotation.order;
+ camera.rotation.copy(img.mesh.rotation);
+ {
+ const mesh = img.mesh;
+ const dir = mesh.getWorldDirection();
+ const pos = mesh.position;
+ const alpha = MathUtils.degToRad(fov / 2);
+ const d = 0.5 / Math.tan(alpha);
+ const newCamPos = pos.clone().add(dir.clone().multiplyScalar(d));
+ const newCamDir = pos.clone().sub(newCamPos);
+ const newCamTarget = new Vector3().addVectors(
+ newCamPos,
+ newCamDir.clone().multiplyScalar(viewer.getMoveSpeed()));
+ camera.position.copy(newCamPos);
+ }
+ let volume = new Potree.PolygonClipVolume(camera);
+ let m0 = new Mesh();
+ let m1 = new Mesh();
+ let m2 = new Mesh();
+ let m3 = new Mesh();
+ m0.position.set(-1, -1, 0);
+ m1.position.set( 1, -1, 0);
+ m2.position.set( 1, 1, 0);
+ m3.position.set(-1, 1, 0);
+ volume.markers.push(m0, m1, m2, m3);
+ volume.initialized = true;
+
+ viewer.scene.addPolygonClipVolume(volume);
+ clipVolume = volume;
}
+ const tEnd = performance.now();
+ //console.log(tEnd - tStart);
+ };
- {
- let elGradientRepeat = panel.find("#gradient_repeat_option");
- elGradientRepeat.selectgroup({title: "Gradient"});
+ const moveToImage = (image) => {
+ console.log("move to image " + image.id);
- elGradientRepeat.find("input").click( (e) => {
- this.viewer.setElevationGradientRepeat(ElevationGradientRepeat[e.target.value]);
- });
+ const mesh = image.mesh;
+ const newCamPos = image.position.clone();
+ const newCamTarget = mesh.position.clone();
- let current = Object.keys(ElevationGradientRepeat)
- .filter(key => ElevationGradientRepeat[key] === this.viewer.elevationGradientRepeat);
- elGradientRepeat.find(`input[value=${current}]`).trigger("click");
- }
+ viewer.scene.view.setView(newCamPos, newCamTarget, 500, () => {
+ orientedImageControls.capture(image);
+ });
- let onIntensityChange = () => {
- let gamma = material.intensityGamma;
- let contrast = material.intensityContrast;
- let brightness = material.intensityBrightness;
+ if(image.texture === null){
- updateIntensityRange();
+ const target = image;
- panel.find('#lblIntensityGamma').html(gamma.toFixed(2));
- panel.find('#lblIntensityContrast').html(contrast.toFixed(2));
- panel.find('#lblIntensityBrightness').html(brightness.toFixed(2));
+ const tmpImagePath = `${Potree.resourcePath}/images/loading.jpg`;
+ new TextureLoader().load(tmpImagePath,
+ (texture) => {
+ if(target.texture === null){
+ target.texture = texture;
+ target.mesh.material.uniforms.tColor.value = texture;
+ mesh.material.needsUpdate = true;
+ }
+ }
+ );
- panel.find('#sldIntensityGamma').slider({value: gamma});
- panel.find('#sldIntensityContrast').slider({value: contrast});
- panel.find('#sldIntensityBrightness').slider({value: brightness});
- };
+ const imagePath = `${imageParamsPath}/../${target.id}`;
+ new TextureLoader().load(imagePath,
+ (texture) => {
+ target.texture = texture;
+ target.mesh.material.uniforms.tColor.value = texture;
+ mesh.material.needsUpdate = true;
+ }
+ );
+
- let onRGBChange = () => {
- let gamma = material.rgbGamma;
- let contrast = material.rgbContrast;
- let brightness = material.rgbBrightness;
+ }
+ };
- panel.find('#lblRGBGamma').html(gamma.toFixed(2));
- panel.find('#lblRGBContrast').html(contrast.toFixed(2));
- panel.find('#lblRGBBrightness').html(brightness.toFixed(2));
+ const onMouseClick = (evt) => {
- panel.find('#sldRGBGamma').slider({value: gamma});
- panel.find('#sldRGBContrast').slider({value: contrast});
- panel.find('#sldRGBBrightness').slider({value: brightness});
- };
+ if(orientedImageControls.hasSomethingCaptured()){
+ return;
+ }
- this.addVolatileListener(material, "material_property_changed", updateExtraRange);
- this.addVolatileListener(material, "material_property_changed", updateHeightRange);
- this.addVolatileListener(material, "material_property_changed", onIntensityChange);
- this.addVolatileListener(material, "material_property_changed", onRGBChange);
+ if(hoveredElement){
+ moveToImage(hoveredElement);
+ }
+ };
+ viewer.renderer.domElement.addEventListener( 'mousemove', onMouseMove, false );
+ viewer.renderer.domElement.addEventListener( 'mousedown', onMouseClick, false );
- updateExtraRange();
- updateHeightRange();
- onIntensityChange();
- onRGBChange();
- }
+ viewer.addEventListener("update", () => {
+
+ for(const image of orientedImages){
+ const world = image.mesh.matrixWorld;
+ const {width, height} = image;
+ const aspect = width / height;
- }
+ const camera = viewer.scene.getActiveCamera();
-
+ const imgPos = image.mesh.getWorldPosition(new Vector3());
+ const camPos = camera.position;
+ const d = camPos.distanceTo(imgPos);
- setMeasurement(object){
+ const minSize = 1; // in degrees of fov
+ const a = MathUtils.degToRad(minSize);
+ let r = d * Math.tan(a);
+ r = Math.max(r, 1);
- let TYPE = {
- DISTANCE: {panel: DistancePanel},
- AREA: {panel: AreaPanel},
- POINT: {panel: PointPanel},
- ANGLE: {panel: AnglePanel},
- HEIGHT: {panel: HeightPanel},
- PROFILE: {panel: ProfilePanel},
- VOLUME: {panel: VolumePanel},
- CIRCLE: {panel: CirclePanel},
- OTHER: {panel: PointPanel},
- };
- let getType = (measurement) => {
- if (measurement instanceof Measure) {
- if (measurement.showDistances && !measurement.showArea && !measurement.showAngles) {
- return TYPE.DISTANCE;
- } else if (measurement.showDistances && measurement.showArea && !measurement.showAngles) {
- return TYPE.AREA;
- } else if (measurement.maxMarkers === 1) {
- return TYPE.POINT;
- } else if (!measurement.showDistances && !measurement.showArea && measurement.showAngles) {
- return TYPE.ANGLE;
- } else if (measurement.showHeight) {
- return TYPE.HEIGHT;
- } else if (measurement.showCircle) {
- return TYPE.CIRCLE;
- } else {
- return TYPE.OTHER;
- }
- } else if (measurement instanceof Profile) {
- return TYPE.PROFILE;
- } else if (measurement instanceof Volume) {
- return TYPE.VOLUME;
+ image.mesh.scale.set(r * aspect, r, 1);
+ image.line.scale.set(r * aspect, r, 1);
+
+ image.mesh.material.uniforms.uNear.value = camera.near;
+
}
- };
- //this.container.html("measurement");
+ });
- let type = getType(object);
- let Panel = type.panel;
+ const images = new OrientedImages();
+ images.node = sceneNode;
+ images.cameraParamsPath = cameraParamsPath;
+ images.imageParamsPath = imageParamsPath;
+ images.cameraParams = cameraParams;
+ images.imageParams = imageParams;
+ images.images = orientedImages;
- let panel = new Panel(this.viewer, object, this);
- this.container.append(panel.elContent);
- }
+ Potree.debug.moveToImage = moveToImage;
- setCamera(camera){
- let panel = new CameraPanel(this.viewer, this);
- this.container.append(panel.elContent);
+ return images;
}
+ }
- setAnnotation(annotation){
- let panel = new AnnotationPanel(this.viewer, this, annotation);
- this.container.append(panel.elContent);
- }
+ let sg = new SphereGeometry(1, 8, 8);
+ let sgHigh = new SphereGeometry(1, 128, 128);
- setCameraAnimation(animation){
- let panel = new CameraAnimationPanel(this.viewer, this, animation);
- this.container.append(panel.elContent);
- }
+ let sm = new MeshBasicMaterial({side: BackSide});
+ let smHovered = new MeshBasicMaterial({side: BackSide, color: 0xff0000});
- }
+ let raycaster = new Raycaster();
+ let currentlyHovered = null;
- function addCommas(nStr){
- nStr += '';
- let x = nStr.split('.');
- let x1 = x[0];
- let x2 = x.length > 1 ? '.' + x[1] : '';
- let rgx = /(\d+)(\d{3})/;
- while (rgx.test(x1)) {
- x1 = x1.replace(rgx, '$1' + ',' + '$2');
- }
- return x1 + x2;
- };
-
- function format(value){
- return addCommas(value.toFixed(3));
- };
-
- class HierarchicalSlider{
-
- constructor(params = {}){
-
- this.element = document.createElement("div");
-
- this.labels = [];
- this.sliders = [];
- this.range = params.range != null ? params.range : [0, 1];
- this.slide = params.slide != null ? params.slide : null;
- this.step = params.step != null ? params.step : 0.0001;
-
- let levels = params.levels != null ? params.levels : 1;
-
- for(let level = 0; level < levels; level++){
- this.addLevel();
- }
-
- }
-
- setRange(range){
- this.range = [...range];
-
- { // root slider
- let slider = this.sliders[0];
-
- $(slider).slider({
- min: range[0],
- max: range[1],
- });
- }
-
- for(let i = 1; i < this.sliders.length; i++){
- let parentSlider = this.sliders[i - 1];
- let slider = this.sliders[i];
-
- let parentValues = $(parentSlider).slider("option", "values");
- let childRange = [...parentValues];
-
- $(slider).slider({
- min: childRange[0],
- max: childRange[1],
- });
- }
-
- this.updateLabels();
- }
-
- setValues(values){
- for(let slider of this.sliders){
- $(slider).slider({
- values: [...values],
- });
- }
-
- this.updateLabels();
- }
-
- addLevel(){
- const elLevel = document.createElement("li");
- const elRange = document.createTextNode("Range: ");
- const label = document.createElement("span");
- const slider = document.createElement("div");
-
- let level = this.sliders.length;
- let [min, max] = [0, 0];
-
- if(this.sliders.length === 0){
- [min, max] = this.range;
- }else {
- let parentSlider = this.sliders[this.sliders.length - 1];
- [min, max] = $(parentSlider).slider("option", "values");
- }
-
- $(slider).slider({
- range: true,
- min: min,
- max: max,
- step: this.step,
- values: [min, max],
- slide: (event, ui) => {
-
- // set all descendants to same range
- let levels = this.sliders.length;
- for(let i = level + 1; i < levels; i++){
- let descendant = this.sliders[i];
-
- $(descendant).slider({
- range: true,
- min: ui.values[0],
- max: ui.values[1],
- values: [...ui.values],
- });
- }
-
- if(this.slide){
- let values = [...ui.values];
-
- this.slide({
- target: this,
- range: this.range,
- values: values,
- });
- }
-
- this.updateLabels();
- },
- });
-
- elLevel.append(elRange, label, slider);
-
- this.sliders.push(slider);
- this.labels.push(label);
- this.element.append(elLevel);
-
- this.updateLabels();
- }
-
- removeLevel(){
-
- }
-
- updateSliders(){
-
- }
-
- updateLabels(){
-
- let levels = this.sliders.length;
-
- for(let i = 0; i < levels; i++){
-
- let slider = this.sliders[i];
- let label = this.labels[i];
-
- let [min, max] = $(slider).slider("option", "values");
- let strMin = format(min);
- let strMax = format(max);
- let strLabel = `${strMin} to ${strMax}`;
-
- label.innerHTML = strLabel;
- }
-
- }
-
-
- }
+ let previousView = {
+ controls: null,
+ position: null,
+ target: null,
+ };
+
+ class Image360{
+
+ constructor(file, time, longitude, latitude, altitude, course, pitch, roll){
+ this.file = file;
+ this.time = time;
+ this.longitude = longitude;
+ this.latitude = latitude;
+ this.altitude = altitude;
+ this.course = course;
+ this.pitch = pitch;
+ this.roll = roll;
+ this.mesh = null;
+ }
+ };
+
+ class Images360 extends EventDispatcher{
- class OrientedImageControls extends EventDispatcher{
-
constructor(viewer){
super();
-
+
this.viewer = viewer;
- this.renderer = viewer.renderer;
- this.originalCam = viewer.scene.getActiveCamera();
- this.shearCam = viewer.scene.getActiveCamera().clone();
- this.shearCam.rotation.set(this.originalCam.rotation.toArray());
- this.shearCam.updateProjectionMatrix();
- this.shearCam.updateProjectionMatrix = () => {
- return this.shearCam.projectionMatrix;
- };
+ this.selectingEnabled = true;
- this.image = null;
+ this.images = [];
+ this.node = new Object3D();
- this.fadeFactor = 20;
- this.fovDelta = 0;
+ this.sphere = new Mesh(sgHigh, sm);
+ this.sphere.visible = false;
+ this.sphere.scale.set(1000, 1000, 1000);
+ this.node.add(this.sphere);
+ this._visible = true;
+ // this.node.add(label);
+
+ this.focusedImage = null;
+
+ let elUnfocus = document.createElement("input");
+ elUnfocus.type = "button";
+ elUnfocus.value = "unfocus";
+ elUnfocus.style.position = "absolute";
+ elUnfocus.style.right = "10px";
+ elUnfocus.style.bottom = "10px";
+ elUnfocus.style.zIndex = "10000";
+ elUnfocus.style.fontSize = "2em";
+ elUnfocus.addEventListener("click", () => this.unfocus());
+ this.elUnfocus = elUnfocus;
+
+ this.domRoot = viewer.renderer.domElement.parentElement;
+ this.domRoot.appendChild(elUnfocus);
+ this.elUnfocus.style.display = "none";
+
+ viewer.addEventListener("update", () => {
+ this.update(viewer);
+ });
+ viewer.inputHandler.addInputListener(this);
- this.fovMin = 0.1;
- this.fovMax = 120;
+ this.addEventListener("mousedown", () => {
+ if(currentlyHovered){
+ this.focus(currentlyHovered.image360);
+ }
+ });
+
+ };
- this.shear = [0, 0];
+ set visible(visible){
+ if(this._visible === visible){
+ return;
+ }
- // const style = ``;
- this.elUp = $(`
`);
- this.elRight = $(`
`);
- this.elDown = $(`
`);
- this.elLeft = $(`
`);
- this.elExit = $(`
`);
- this.elExit.click( () => {
- this.release();
- });
+ for(const image of this.images){
+ image.mesh.visible = visible && (this.focusedImage == null);
+ }
- this.elUp.click(() => {
- const fovY = viewer.getFOV();
- const top = Math.tan(MathUtils.degToRad(fovY / 2));
- this.shear[1] += 0.1 * top;
+ this.sphere.visible = visible && (this.focusedImage != null);
+ this._visible = visible;
+ this.dispatchEvent({
+ type: "visibility_changed",
+ images: this,
});
+ }
- this.elRight.click(() => {
- const fovY = viewer.getFOV();
- const top = Math.tan(MathUtils.degToRad(fovY / 2));
- this.shear[0] += 0.1 * top;
- });
+ get visible(){
+ return this._visible;
+ }
- this.elDown.click(() => {
- const fovY = viewer.getFOV();
- const top = Math.tan(MathUtils.degToRad(fovY / 2));
- this.shear[1] -= 0.1 * top;
- });
+ focus(image360){
+ if(this.focusedImage !== null){
+ this.unfocus();
+ }
- this.elLeft.click(() => {
- const fovY = viewer.getFOV();
- const top = Math.tan(MathUtils.degToRad(fovY / 2));
- this.shear[0] -= 0.1 * top;
+ previousView = {
+ controls: this.viewer.controls,
+ position: this.viewer.scene.view.position.clone(),
+ target: viewer.scene.view.getPivot(),
+ };
+
+ this.viewer.setControls(this.viewer.orbitControls);
+ this.viewer.orbitControls.doubleClockZoomEnabled = false;
+
+ for(let image of this.images){
+ image.mesh.visible = false;
+ }
+
+ this.selectingEnabled = false;
+
+ this.sphere.visible = false;
+
+ this.load(image360).then( () => {
+ this.sphere.visible = true;
+ this.sphere.material.map = image360.texture;
+ this.sphere.material.needsUpdate = true;
});
- this.scene = null;
- this.sceneControls = new Scene();
+ { // orientation
+ let {course, pitch, roll} = image360;
+ this.sphere.rotation.set(
+ MathUtils.degToRad(+roll + 90),
+ MathUtils.degToRad(-pitch),
+ MathUtils.degToRad(-course + 90),
+ "ZYX"
+ );
+ }
- let scroll = (e) => {
- this.fovDelta += -e.delta * 1.0;
- };
+ this.sphere.position.set(...image360.position);
- this.addEventListener('mousewheel', scroll);
- //this.addEventListener("mousemove", onMove);
- }
+ let target = new Vector3(...image360.position);
+ let dir = target.clone().sub(viewer.scene.view.position).normalize();
+ let move = dir.multiplyScalar(0.000001);
+ let newCamPos = target.clone().sub(move);
- hasSomethingCaptured(){
- return this.image !== null;
+ viewer.scene.view.setView(
+ newCamPos,
+ target,
+ 500
+ );
+
+ this.focusedImage = image360;
+
+ this.elUnfocus.style.display = "";
}
- capture(image){
- if(this.hasSomethingCaptured()){
+ unfocus(){
+ this.selectingEnabled = true;
+
+ for(let image of this.images){
+ image.mesh.visible = true;
+ }
+
+ let image = this.focusedImage;
+
+ if(image === null){
return;
}
- this.image = image;
- this.originalFOV = this.viewer.getFOV();
- this.originalControls = this.viewer.getControls();
+ this.sphere.material.map = null;
+ this.sphere.material.needsUpdate = true;
+ this.sphere.visible = false;
- this.viewer.setControls(this);
- this.viewer.scene.overrideCamera = this.shearCam;
+ let pos = viewer.scene.view.position;
+ let target = viewer.scene.view.getPivot();
+ let dir = target.clone().sub(pos).normalize();
+ let move = dir.multiplyScalar(10);
+ let newCamPos = target.clone().sub(move);
- const elCanvas = this.viewer.renderer.domElement;
- const elRoot = $(elCanvas.parentElement);
+ viewer.orbitControls.doubleClockZoomEnabled = true;
+ viewer.setControls(previousView.controls);
- this.shear = [0, 0];
+ viewer.scene.view.setView(
+ previousView.position,
+ previousView.target,
+ 500
+ );
- elRoot.append(this.elUp);
- elRoot.append(this.elRight);
- elRoot.append(this.elDown);
- elRoot.append(this.elLeft);
- elRoot.append(this.elExit);
+ this.focusedImage = null;
+
+ this.elUnfocus.style.display = "none";
}
- release(){
- this.image = null;
+ load(image360){
- this.viewer.scene.overrideCamera = null;
+ return new Promise(resolve => {
+ let texture = new TextureLoader().load(image360.file, resolve);
+ texture.wrapS = RepeatWrapping;
+ texture.repeat.x = -1;
- this.elUp.detach();
- this.elRight.detach();
- this.elDown.detach();
- this.elLeft.detach();
- this.elExit.detach();
+ image360.texture = texture;
+ });
- this.viewer.setFOV(this.originalFOV);
- this.viewer.setControls(this.originalControls);
}
- setScene (scene) {
- this.scene = scene;
- }
+ handleHovering(){
+ let mouse = viewer.inputHandler.mouse;
+ let camera = viewer.scene.getActiveCamera();
+ let domElement = viewer.renderer.domElement;
- update (delta) {
- // const view = this.scene.view;
+ let ray = Potree.Utils.mouseToRay(mouse, camera, domElement.clientWidth, domElement.clientHeight);
- // let prevTotal = this.shearCam.projectionMatrix.elements.reduce( (a, i) => a + i, 0);
+ // let tStart = performance.now();
+ raycaster.ray.copy(ray);
+ let intersections = raycaster.intersectObjects(this.node.children);
- //const progression = Math.min(1, this.fadeFactor * delta);
- //const attenuation = Math.max(0, 1 - this.fadeFactor * delta);
- const progression = 1;
- const attenuation = 0;
+ if(intersections.length === 0){
+ // label.visible = false;
- const oldFov = this.viewer.getFOV();
- let fovProgression = progression * this.fovDelta;
- let newFov = oldFov * ((1 + fovProgression / 10));
+ return;
+ }
- newFov = Math.max(this.fovMin, newFov);
- newFov = Math.min(this.fovMax, newFov);
+ let intersection = intersections[0];
+ currentlyHovered = intersection.object;
+ currentlyHovered.material = smHovered;
- let diff = newFov / oldFov;
+ //label.visible = true;
+ //label.setText(currentlyHovered.image360.file);
+ //currentlyHovered.getWorldPosition(label.position);
+ }
- const mouse = this.viewer.inputHandler.mouse;
- const canvasSize = this.viewer.renderer.getSize(new Vector2());
- const uv = [
- (mouse.x / canvasSize.x),
- ((canvasSize.y - mouse.y) / canvasSize.y)
- ];
+ update(){
- const fovY = newFov;
- const aspect = canvasSize.x / canvasSize.y;
- const top = Math.tan(MathUtils.degToRad(fovY / 2));
- const height = 2 * top;
- const width = aspect * height;
+ let {viewer} = this;
- const shearRangeX = [
- this.shear[0] - 0.5 * width,
- this.shear[0] + 0.5 * width,
- ];
+ if(currentlyHovered){
+ currentlyHovered.material = sm;
+ currentlyHovered = null;
+ }
- const shearRangeY = [
- this.shear[1] - 0.5 * height,
- this.shear[1] + 0.5 * height,
- ];
+ if(this.selectingEnabled){
+ this.handleHovering();
+ }
- const shx = (1 - uv[0]) * shearRangeX[0] + uv[0] * shearRangeX[1];
- const shy = (1 - uv[1]) * shearRangeY[0] + uv[1] * shearRangeY[1];
+ }
- const shu = (1 - diff);
+ };
- const newShear = [
- (1 - shu) * this.shear[0] + shu * shx,
- (1 - shu) * this.shear[1] + shu * shy,
- ];
-
- this.shear = newShear;
- this.viewer.setFOV(newFov);
+
+ class Images360Loader{
+
+ static async load(url, viewer, params = {}){
+
+ if(!params.transform){
+ params.transform = {
+ forward: a => a,
+ };
+ }
- const {originalCam, shearCam} = this;
+ let response = await fetch(`${url}/coordinates.txt`);
+ let text = await response.text();
+
+ let lines = text.split(/\r?\n/);
+ let coordinateLines = lines.slice(1);
+
+ let images360 = new Images360(viewer);
+
+ for(let line of coordinateLines){
+
+ if(line.trim().length === 0){
+ continue;
+ }
+
+ let tokens = line.split(/\t/);
+
+ let [filename, time, long, lat, alt, course, pitch, roll] = tokens;
+ time = parseFloat(time);
+ long = parseFloat(long);
+ lat = parseFloat(lat);
+ alt = parseFloat(alt);
+ course = parseFloat(course);
+ pitch = parseFloat(pitch);
+ roll = parseFloat(roll);
+
+ filename = filename.replace(/"/g, "");
+ let file = `${url}/${filename}`;
+
+ let image360 = new Image360(file, time, long, lat, alt, course, pitch, roll);
+
+ let xy = params.transform.forward([long, lat]);
+ let position = [...xy, alt];
+ image360.position = position;
+
+ images360.images.push(image360);
+ }
- originalCam.fov = newFov;
- originalCam.updateMatrixWorld();
- originalCam.updateProjectionMatrix();
- shearCam.copy(originalCam);
- shearCam.rotation.set(...originalCam.rotation.toArray());
+ Images360Loader.createSceneNodes(images360, params.transform);
- shearCam.updateMatrixWorld();
- shearCam.projectionMatrix.copy(originalCam.projectionMatrix);
+ return images360;
- const [sx, sy] = this.shear;
- const mShear = new Matrix4().set(
- 1, 0, sx, 0,
- 0, 1, sy, 0,
- 0, 0, 1, 0,
- 0, 0, 0, 1,
- );
+ }
- const proj = shearCam.projectionMatrix;
- proj.multiply(mShear);
- shearCam.projectionMatrixInverse.copy(proj).invert();
+ static createSceneNodes(images360, transform){
- let total = shearCam.projectionMatrix.elements.reduce( (a, i) => a + i, 0);
+ for(let image360 of images360.images){
+ let {longitude, latitude, altitude} = image360;
+ let xy = transform.forward([longitude, latitude]);
- this.fovDelta *= attenuation;
+ let mesh = new Mesh(sg, sm);
+ mesh.position.set(...xy, altitude);
+ mesh.scale.set(1, 1, 1);
+ mesh.material.transparent = true;
+ mesh.material.opacity = 0.75;
+ mesh.image360 = image360;
+
+ { // orientation
+ var {course, pitch, roll} = image360;
+ mesh.rotation.set(
+ MathUtils.degToRad(+roll + 90),
+ MathUtils.degToRad(-pitch),
+ MathUtils.degToRad(-course + 90),
+ "ZYX"
+ );
+ }
+
+ images360.node.add(mesh);
+
+ image360.mesh = mesh;
+ }
}
- };
- // https://support.pix4d.com/hc/en-us/articles/205675256-How-are-yaw-pitch-roll-defined
- // https://support.pix4d.com/hc/en-us/articles/202558969-How-are-omega-phi-kappa-defined
-
- function createMaterial(){
-
- let vertexShader = `
- uniform float uNear;
- varying vec2 vUV;
- varying vec4 vDebug;
-
- void main(){
- vDebug = vec4(0.0, 1.0, 0.0, 1.0);
- vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
- // make sure that this mesh is at least in front of the near plane
- modelViewPosition.xyz += normalize(modelViewPosition.xyz) * uNear;
- gl_Position = projectionMatrix * modelViewPosition;
- vUV = uv;
- }
- `;
-
- let fragmentShader = `
- uniform sampler2D tColor;
- uniform float uOpacity;
- varying vec2 vUV;
- varying vec4 vDebug;
- void main(){
- vec4 color = texture2D(tColor, vUV);
- gl_FragColor = color;
- gl_FragColor.a = uOpacity;
- }
- `;
- const material = new ShaderMaterial( {
- uniforms: {
- // time: { value: 1.0 },
- // resolution: { value: new THREE.Vector2() }
- tColor: {value: new Texture() },
- uNear: {value: 0.0},
- uOpacity: {value: 1.0},
- },
- vertexShader: vertexShader,
- fragmentShader: fragmentShader,
- side: DoubleSide,
- } );
-
- material.side = DoubleSide;
-
- return material;
- }
-
- const planeGeometry = new PlaneGeometry(1, 1);
- const lineGeometry = new Geometry();
-
- lineGeometry.vertices.push(
- new Vector3(-0.5, -0.5, 0),
- new Vector3( 0.5, -0.5, 0),
- new Vector3( 0.5, 0.5, 0),
- new Vector3(-0.5, 0.5, 0),
- new Vector3(-0.5, -0.5, 0),
- );
-
- class OrientedImage{
-
- constructor(id){
-
- this.id = id;
- this.fov = 1.0;
- this.position = new Vector3();
- this.rotation = new Vector3();
- this.width = 0;
- this.height = 0;
- this.fov = 1.0;
-
- const material = createMaterial();
- const lineMaterial = new LineBasicMaterial( { color: 0x00ff00 } );
- this.mesh = new Mesh(planeGeometry, material);
- this.line = new Line(lineGeometry, lineMaterial);
- this.texture = null;
-
- this.mesh.orientedImage = this;
- }
-
- set(position, rotation, dimension, fov){
-
- let radians = rotation.map(MathUtils.degToRad);
-
- this.position.set(...position);
- this.mesh.position.set(...position);
-
- this.rotation.set(...radians);
- this.mesh.rotation.set(...radians);
-
- [this.width, this.height] = dimension;
- this.mesh.scale.set(this.width / this.height, 1, 1);
-
- this.fov = fov;
-
- this.updateTransform();
- }
-
- updateTransform(){
- let {mesh, line, fov} = this;
-
- mesh.updateMatrixWorld();
- const dir = mesh.getWorldDirection();
- const alpha = MathUtils.degToRad(fov / 2);
- const d = -0.5 / Math.tan(alpha);
- const move = dir.clone().multiplyScalar(d);
- mesh.position.add(move);
-
- line.position.copy(mesh.position);
- line.scale.copy(mesh.scale);
- line.rotation.copy(mesh.rotation);
- }
-
- };
-
- class OrientedImages extends EventDispatcher{
-
- constructor(){
- super();
-
- this.node = null;
- this.cameraParams = null;
- this.imageParams = null;
- this.images = null;
- this._visible = true;
- }
-
- set visible(visible){
- if(this._visible === visible){
- return;
- }
-
- for(const image of this.images){
- image.mesh.visible = visible;
- image.line.visible = visible;
- }
-
- this._visible = visible;
- this.dispatchEvent({
- type: "visibility_changed",
- images: this,
- });
- }
-
- get visible(){
- return this._visible;
- }
-
-
- };
-
- class OrientedImageLoader{
-
- static async loadCameraParams(path){
- const res = await fetch(path);
- const text = await res.text();
-
- const parser = new DOMParser();
- const doc = parser.parseFromString(text, "application/xml");
-
- const width = parseInt(doc.getElementsByTagName("width")[0].textContent);
- const height = parseInt(doc.getElementsByTagName("height")[0].textContent);
- const f = parseFloat(doc.getElementsByTagName("f")[0].textContent);
-
- let a = (height / 2) / f;
- let fov = 2 * MathUtils.radToDeg(Math.atan(a));
-
- const params = {
- path: path,
- width: width,
- height: height,
- f: f,
- fov: fov,
- };
-
- return params;
- }
-
- static async loadImageParams(path){
-
- const response = await fetch(path);
- if(!response.ok){
- console.error(`failed to load ${path}`);
- return;
- }
-
- const content = await response.text();
- const lines = content.split(/\r?\n/);
- const imageParams = [];
-
- for(let i = 1; i < lines.length; i++){
- const line = lines[i];
-
- if(line.startsWith("#")){
- continue;
- }
-
- const tokens = line.split(/\s+/);
-
- if(tokens.length < 6){
- continue;
- }
-
- const params = {
- id: tokens[0],
- x: Number.parseFloat(tokens[1]),
- y: Number.parseFloat(tokens[2]),
- z: Number.parseFloat(tokens[3]),
- omega: Number.parseFloat(tokens[4]),
- phi: Number.parseFloat(tokens[5]),
- kappa: Number.parseFloat(tokens[6]),
- };
-
- // const whitelist = ["47518.jpg"];
- // if(whitelist.includes(params.id)){
- // imageParams.push(params);
- // }
- imageParams.push(params);
- }
-
- // debug
- //return [imageParams[50]];
-
- return imageParams;
- }
-
- static async load(cameraParamsPath, imageParamsPath, viewer){
-
- const tStart = performance.now();
-
- const [cameraParams, imageParams] = await Promise.all([
- OrientedImageLoader.loadCameraParams(cameraParamsPath),
- OrientedImageLoader.loadImageParams(imageParamsPath),
- ]);
-
- const orientedImageControls = new OrientedImageControls(viewer);
- const raycaster = new Raycaster();
-
- const tEnd = performance.now();
- console.log(tEnd - tStart);
-
- // const sp = new THREE.PlaneGeometry(1, 1);
- // const lg = new THREE.Geometry();
-
- // lg.vertices.push(
- // new THREE.Vector3(-0.5, -0.5, 0),
- // new THREE.Vector3( 0.5, -0.5, 0),
- // new THREE.Vector3( 0.5, 0.5, 0),
- // new THREE.Vector3(-0.5, 0.5, 0),
- // new THREE.Vector3(-0.5, -0.5, 0),
- // );
-
- const {width, height} = cameraParams;
- const orientedImages = [];
- const sceneNode = new Object3D();
- sceneNode.name = "oriented_images";
-
- for(const params of imageParams){
-
- // const material = createMaterial();
- // const lm = new THREE.LineBasicMaterial( { color: 0x00ff00 } );
- // const mesh = new THREE.Mesh(sp, material);
-
- const {x, y, z, omega, phi, kappa} = params;
- // const [rx, ry, rz] = [omega, phi, kappa]
- // .map(THREE.Math.degToRad);
-
- // mesh.position.set(x, y, z);
- // mesh.scale.set(width / height, 1, 1);
- // mesh.rotation.set(rx, ry, rz);
- // {
- // mesh.updateMatrixWorld();
- // const dir = mesh.getWorldDirection();
- // const alpha = THREE.Math.degToRad(cameraParams.fov / 2);
- // const d = -0.5 / Math.tan(alpha);
- // const move = dir.clone().multiplyScalar(d);
- // mesh.position.add(move);
- // }
- // sceneNode.add(mesh);
-
- // const line = new THREE.Line(lg, lm);
- // line.position.copy(mesh.position);
- // line.scale.copy(mesh.scale);
- // line.rotation.copy(mesh.rotation);
- // sceneNode.add(line);
-
- let orientedImage = new OrientedImage(params.id);
- // orientedImage.setPosition(x, y, z);
- // orientedImage.setRotation(omega, phi, kappa);
- // orientedImage.setDimension(width, height);
- let position = [x, y, z];
- let rotation = [omega, phi, kappa];
- let dimension = [width, height];
- orientedImage.set(position, rotation, dimension, cameraParams.fov);
-
- sceneNode.add(orientedImage.mesh);
- sceneNode.add(orientedImage.line);
-
- orientedImages.push(orientedImage);
- }
-
- let hoveredElement = null;
- let clipVolume = null;
-
- const onMouseMove = (evt) => {
- const tStart = performance.now();
- if(hoveredElement){
- hoveredElement.line.material.color.setRGB(0, 1, 0);
- }
- evt.preventDefault();
-
- //var array = getMousePosition( container, evt.clientX, evt.clientY );
- const rect = viewer.renderer.domElement.getBoundingClientRect();
- const [x, y] = [evt.clientX, evt.clientY];
- const array = [
- ( x - rect.left ) / rect.width,
- ( y - rect.top ) / rect.height
- ];
- const onClickPosition = new Vector2(...array);
- //const intersects = getIntersects(onClickPosition, scene.children);
- const camera = viewer.scene.getActiveCamera();
- const mouse = new Vector3(
- + ( onClickPosition.x * 2 ) - 1,
- - ( onClickPosition.y * 2 ) + 1 );
- const objects = orientedImages.map(i => i.mesh);
- raycaster.setFromCamera( mouse, camera );
- const intersects = raycaster.intersectObjects( objects );
- let selectionChanged = false;
-
- if ( intersects.length > 0){
- //console.log(intersects);
- const intersection = intersects[0];
- const orientedImage = intersection.object.orientedImage;
- orientedImage.line.material.color.setRGB(1, 0, 0);
- selectionChanged = hoveredElement !== orientedImage;
- hoveredElement = orientedImage;
- }else {
- hoveredElement = null;
- }
-
- let shouldRemoveClipVolume = clipVolume !== null && hoveredElement === null;
- let shouldAddClipVolume = clipVolume === null && hoveredElement !== null;
-
- if(clipVolume !== null && (hoveredElement === null || selectionChanged)){
- // remove existing
- viewer.scene.removePolygonClipVolume(clipVolume);
- clipVolume = null;
- }
-
- if(shouldAddClipVolume || selectionChanged){
- const img = hoveredElement;
- const fov = cameraParams.fov;
- const aspect = cameraParams.width / cameraParams.height;
- const near = 1.0;
- const far = 1000 * 1000;
- const camera = new PerspectiveCamera(fov, aspect, near, far);
- camera.rotation.order = viewer.scene.getActiveCamera().rotation.order;
- camera.rotation.copy(img.mesh.rotation);
- {
- const mesh = img.mesh;
- const dir = mesh.getWorldDirection();
- const pos = mesh.position;
- const alpha = MathUtils.degToRad(fov / 2);
- const d = 0.5 / Math.tan(alpha);
- const newCamPos = pos.clone().add(dir.clone().multiplyScalar(d));
- const newCamDir = pos.clone().sub(newCamPos);
- const newCamTarget = new Vector3().addVectors(
- newCamPos,
- newCamDir.clone().multiplyScalar(viewer.getMoveSpeed()));
- camera.position.copy(newCamPos);
- }
- let volume = new Potree.PolygonClipVolume(camera);
- let m0 = new Mesh();
- let m1 = new Mesh();
- let m2 = new Mesh();
- let m3 = new Mesh();
- m0.position.set(-1, -1, 0);
- m1.position.set( 1, -1, 0);
- m2.position.set( 1, 1, 0);
- m3.position.set(-1, 1, 0);
- volume.markers.push(m0, m1, m2, m3);
- volume.initialized = true;
-
- viewer.scene.addPolygonClipVolume(volume);
- clipVolume = volume;
- }
- const tEnd = performance.now();
- //console.log(tEnd - tStart);
- };
-
- const moveToImage = (image) => {
- console.log("move to image " + image.id);
-
- const mesh = image.mesh;
- const newCamPos = image.position.clone();
- const newCamTarget = mesh.position.clone();
-
- viewer.scene.view.setView(newCamPos, newCamTarget, 500, () => {
- orientedImageControls.capture(image);
- });
-
- if(image.texture === null){
-
- const target = image;
-
- const tmpImagePath = `${Potree.resourcePath}/images/loading.jpg`;
- new TextureLoader().load(tmpImagePath,
- (texture) => {
- if(target.texture === null){
- target.texture = texture;
- target.mesh.material.uniforms.tColor.value = texture;
- mesh.material.needsUpdate = true;
- }
- }
- );
-
- const imagePath = `${imageParamsPath}/../${target.id}`;
- new TextureLoader().load(imagePath,
- (texture) => {
- target.texture = texture;
- target.mesh.material.uniforms.tColor.value = texture;
- mesh.material.needsUpdate = true;
- }
- );
-
-
- }
- };
-
- const onMouseClick = (evt) => {
-
- if(orientedImageControls.hasSomethingCaptured()){
- return;
- }
-
- if(hoveredElement){
- moveToImage(hoveredElement);
- }
- };
- viewer.renderer.domElement.addEventListener( 'mousemove', onMouseMove, false );
- viewer.renderer.domElement.addEventListener( 'mousedown', onMouseClick, false );
-
- viewer.addEventListener("update", () => {
-
- for(const image of orientedImages){
- const world = image.mesh.matrixWorld;
- const {width, height} = image;
- const aspect = width / height;
-
- const camera = viewer.scene.getActiveCamera();
-
- const imgPos = image.mesh.getWorldPosition(new Vector3());
- const camPos = camera.position;
- const d = camPos.distanceTo(imgPos);
-
- const minSize = 1; // in degrees of fov
- const a = MathUtils.degToRad(minSize);
- let r = d * Math.tan(a);
- r = Math.max(r, 1);
-
-
- image.mesh.scale.set(r * aspect, r, 1);
- image.line.scale.set(r * aspect, r, 1);
-
- image.mesh.material.uniforms.uNear.value = camera.near;
-
- }
-
- });
-
- const images = new OrientedImages();
- images.node = sceneNode;
- images.cameraParamsPath = cameraParamsPath;
- images.imageParamsPath = imageParamsPath;
- images.cameraParams = cameraParams;
- images.imageParams = imageParams;
- images.images = orientedImages;
-
- Potree.debug.moveToImage = moveToImage;
-
- return images;
- }
- }
-
- let sg = new SphereGeometry(1, 8, 8);
- let sgHigh = new SphereGeometry(1, 128, 128);
-
- let sm = new MeshBasicMaterial({side: BackSide});
- let smHovered = new MeshBasicMaterial({side: BackSide, color: 0xff0000});
-
- let raycaster = new Raycaster();
- let currentlyHovered = null;
-
- let previousView = {
- controls: null,
- position: null,
- target: null,
- };
-
- class Image360{
-
- constructor(file, time, longitude, latitude, altitude, course, pitch, roll){
- this.file = file;
- this.time = time;
- this.longitude = longitude;
- this.latitude = latitude;
- this.altitude = altitude;
- this.course = course;
- this.pitch = pitch;
- this.roll = roll;
- this.mesh = null;
- }
- };
-
- class Images360 extends EventDispatcher{
-
- constructor(viewer){
- super();
-
- this.viewer = viewer;
-
- this.selectingEnabled = true;
-
- this.images = [];
- this.node = new Object3D();
-
- this.sphere = new Mesh(sgHigh, sm);
- this.sphere.visible = false;
- this.sphere.scale.set(1000, 1000, 1000);
- this.node.add(this.sphere);
- this._visible = true;
- // this.node.add(label);
-
- this.focusedImage = null;
-
- let elUnfocus = document.createElement("input");
- elUnfocus.type = "button";
- elUnfocus.value = "unfocus";
- elUnfocus.style.position = "absolute";
- elUnfocus.style.right = "10px";
- elUnfocus.style.bottom = "10px";
- elUnfocus.style.zIndex = "10000";
- elUnfocus.style.fontSize = "2em";
- elUnfocus.addEventListener("click", () => this.unfocus());
- this.elUnfocus = elUnfocus;
-
- this.domRoot = viewer.renderer.domElement.parentElement;
- this.domRoot.appendChild(elUnfocus);
- this.elUnfocus.style.display = "none";
-
- viewer.addEventListener("update", () => {
- this.update(viewer);
- });
- viewer.inputHandler.addInputListener(this);
-
- this.addEventListener("mousedown", () => {
- if(currentlyHovered){
- this.focus(currentlyHovered.image360);
- }
- });
-
- };
-
- set visible(visible){
- if(this._visible === visible){
- return;
- }
-
-
- for(const image of this.images){
- image.mesh.visible = visible && (this.focusedImage == null);
- }
-
- this.sphere.visible = visible && (this.focusedImage != null);
- this._visible = visible;
- this.dispatchEvent({
- type: "visibility_changed",
- images: this,
- });
- }
-
- get visible(){
- return this._visible;
- }
-
- focus(image360){
- if(this.focusedImage !== null){
- this.unfocus();
- }
-
- previousView = {
- controls: this.viewer.controls,
- position: this.viewer.scene.view.position.clone(),
- target: viewer.scene.view.getPivot(),
- };
-
- this.viewer.setControls(this.viewer.orbitControls);
- this.viewer.orbitControls.doubleClockZoomEnabled = false;
-
- for(let image of this.images){
- image.mesh.visible = false;
- }
-
- this.selectingEnabled = false;
-
- this.sphere.visible = false;
-
- this.load(image360).then( () => {
- this.sphere.visible = true;
- this.sphere.material.map = image360.texture;
- this.sphere.material.needsUpdate = true;
- });
-
- { // orientation
- let {course, pitch, roll} = image360;
- this.sphere.rotation.set(
- MathUtils.degToRad(+roll + 90),
- MathUtils.degToRad(-pitch),
- MathUtils.degToRad(-course + 90),
- "ZYX"
- );
- }
-
- this.sphere.position.set(...image360.position);
-
- let target = new Vector3(...image360.position);
- let dir = target.clone().sub(viewer.scene.view.position).normalize();
- let move = dir.multiplyScalar(0.000001);
- let newCamPos = target.clone().sub(move);
-
- viewer.scene.view.setView(
- newCamPos,
- target,
- 500
- );
-
- this.focusedImage = image360;
-
- this.elUnfocus.style.display = "";
- }
-
- unfocus(){
- this.selectingEnabled = true;
-
- for(let image of this.images){
- image.mesh.visible = true;
- }
-
- let image = this.focusedImage;
-
- if(image === null){
- return;
- }
-
-
- this.sphere.material.map = null;
- this.sphere.material.needsUpdate = true;
- this.sphere.visible = false;
-
- let pos = viewer.scene.view.position;
- let target = viewer.scene.view.getPivot();
- let dir = target.clone().sub(pos).normalize();
- let move = dir.multiplyScalar(10);
- let newCamPos = target.clone().sub(move);
-
- viewer.orbitControls.doubleClockZoomEnabled = true;
- viewer.setControls(previousView.controls);
-
- viewer.scene.view.setView(
- previousView.position,
- previousView.target,
- 500
- );
-
-
- this.focusedImage = null;
-
- this.elUnfocus.style.display = "none";
- }
-
- load(image360){
-
- return new Promise(resolve => {
- let texture = new TextureLoader().load(image360.file, resolve);
- texture.wrapS = RepeatWrapping;
- texture.repeat.x = -1;
-
- image360.texture = texture;
- });
-
- }
-
- handleHovering(){
- let mouse = viewer.inputHandler.mouse;
- let camera = viewer.scene.getActiveCamera();
- let domElement = viewer.renderer.domElement;
-
- let ray = Potree.Utils.mouseToRay(mouse, camera, domElement.clientWidth, domElement.clientHeight);
-
- // let tStart = performance.now();
- raycaster.ray.copy(ray);
- let intersections = raycaster.intersectObjects(this.node.children);
-
- if(intersections.length === 0){
- // label.visible = false;
-
- return;
- }
-
- let intersection = intersections[0];
- currentlyHovered = intersection.object;
- currentlyHovered.material = smHovered;
-
- //label.visible = true;
- //label.setText(currentlyHovered.image360.file);
- //currentlyHovered.getWorldPosition(label.position);
- }
-
- update(){
-
- let {viewer} = this;
-
- if(currentlyHovered){
- currentlyHovered.material = sm;
- currentlyHovered = null;
- }
-
- if(this.selectingEnabled){
- this.handleHovering();
- }
-
- }
-
- };
-
-
- class Images360Loader{
-
- static async load(url, viewer, params = {}){
-
- if(!params.transform){
- params.transform = {
- forward: a => a,
- };
- }
-
- let response = await fetch(`${url}/coordinates.txt`);
- let text = await response.text();
-
- let lines = text.split(/\r?\n/);
- let coordinateLines = lines.slice(1);
-
- let images360 = new Images360(viewer);
-
- for(let line of coordinateLines){
-
- if(line.trim().length === 0){
- continue;
- }
-
- let tokens = line.split(/\t/);
-
- let [filename, time, long, lat, alt, course, pitch, roll] = tokens;
- time = parseFloat(time);
- long = parseFloat(long);
- lat = parseFloat(lat);
- alt = parseFloat(alt);
- course = parseFloat(course);
- pitch = parseFloat(pitch);
- roll = parseFloat(roll);
-
- filename = filename.replace(/"/g, "");
- let file = `${url}/${filename}`;
-
- let image360 = new Image360(file, time, long, lat, alt, course, pitch, roll);
-
- let xy = params.transform.forward([long, lat]);
- let position = [...xy, alt];
- image360.position = position;
-
- images360.images.push(image360);
- }
-
- Images360Loader.createSceneNodes(images360, params.transform);
-
- return images360;
-
- }
-
- static createSceneNodes(images360, transform){
-
- for(let image360 of images360.images){
- let {longitude, latitude, altitude} = image360;
- let xy = transform.forward([longitude, latitude]);
-
- let mesh = new Mesh(sg, sm);
- mesh.position.set(...xy, altitude);
- mesh.scale.set(1, 1, 1);
- mesh.material.transparent = true;
- mesh.material.opacity = 0.75;
- mesh.image360 = image360;
-
- { // orientation
- var {course, pitch, roll} = image360;
- mesh.rotation.set(
- MathUtils.degToRad(+roll + 90),
- MathUtils.degToRad(-pitch),
- MathUtils.degToRad(-course + 90),
- "ZYX"
- );
- }
-
- images360.node.add(mesh);
-
- image360.mesh = mesh;
- }
- }
-
-
-
+
+
};
// This is a generated file. Do not edit.
@@ -80592,8 +80592,10 @@ ENDSEC
let annotation = new Annotation({
position: [589748.270, 231444.540, 753.675],
- title: "Annotation Title",
- description: `Annotation Description`
+ title: args.title || "Annotation Title",
+ description: args.description || `Annotation Description`,
+ cameraPosition: args.cameraPosition || undefined,
+ cameraTarget: args.cameraTarget || undefined
});
this.dispatchEvent({type: 'start_inserting_annotation', annotation: annotation});
@@ -82892,4746 +82894,4746 @@ ENDSEC
lightNode.add( lightNode.target );
break;
- default:
- throw new Error( 'THREE.GLTFLoader: Unexpected light type: ' + lightDef.type );
+ default:
+ throw new Error( 'THREE.GLTFLoader: Unexpected light type: ' + lightDef.type );
+
+ }
+
+ // Some lights (e.g. spot) default to a position other than the origin. Reset the position
+ // here, because node-level parsing will only override position if explicitly specified.
+ lightNode.position.set( 0, 0, 0 );
+
+ lightNode.decay = 2;
+
+ if ( lightDef.intensity !== undefined ) lightNode.intensity = lightDef.intensity;
+
+ lightNode.name = parser.createUniqueName( lightDef.name || ( 'light_' + lightIndex ) );
+
+ dependency = Promise.resolve( lightNode );
+
+ parser.cache.add( cacheKey, dependency );
+
+ return dependency;
+
+ };
+
+ GLTFLightsExtension.prototype.createNodeAttachment = function ( nodeIndex ) {
+
+ var self = this;
+ var parser = this.parser;
+ var json = parser.json;
+ var nodeDef = json.nodes[ nodeIndex ];
+ var lightDef = ( nodeDef.extensions && nodeDef.extensions[ this.name ] ) || {};
+ var lightIndex = lightDef.light;
+
+ if ( lightIndex === undefined ) return null;
+
+ return this._loadLight( lightIndex ).then( function ( light ) {
+
+ return parser._getNodeRef( self.cache, lightIndex, light );
+
+ } );
+
+ };
+
+ /**
+ * Unlit Materials Extension
+ *
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_unlit
+ */
+ function GLTFMaterialsUnlitExtension() {
+
+ this.name = EXTENSIONS.KHR_MATERIALS_UNLIT;
+
+ }
+
+ GLTFMaterialsUnlitExtension.prototype.getMaterialType = function () {
+
+ return MeshBasicMaterial;
+
+ };
+
+ GLTFMaterialsUnlitExtension.prototype.extendParams = function ( materialParams, materialDef, parser ) {
+
+ var pending = [];
+
+ materialParams.color = new Color( 1.0, 1.0, 1.0 );
+ materialParams.opacity = 1.0;
+
+ var metallicRoughness = materialDef.pbrMetallicRoughness;
+
+ if ( metallicRoughness ) {
+
+ if ( Array.isArray( metallicRoughness.baseColorFactor ) ) {
+
+ var array = metallicRoughness.baseColorFactor;
+
+ materialParams.color.fromArray( array );
+ materialParams.opacity = array[ 3 ];
+
+ }
+
+ if ( metallicRoughness.baseColorTexture !== undefined ) {
+
+ pending.push( parser.assignTexture( materialParams, 'map', metallicRoughness.baseColorTexture ) );
+
+ }
+
+ }
+
+ return Promise.all( pending );
+
+ };
+
+ /**
+ * Clearcoat Materials Extension
+ *
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_clearcoat
+ */
+ function GLTFMaterialsClearcoatExtension( parser ) {
+
+ this.parser = parser;
+ this.name = EXTENSIONS.KHR_MATERIALS_CLEARCOAT;
+
+ }
+
+ GLTFMaterialsClearcoatExtension.prototype.getMaterialType = function ( materialIndex ) {
+
+ var parser = this.parser;
+ var materialDef = parser.json.materials[ materialIndex ];
+
+ if ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) return null;
+
+ return MeshPhysicalMaterial;
+
+ };
+
+ GLTFMaterialsClearcoatExtension.prototype.extendMaterialParams = function ( materialIndex, materialParams ) {
+
+ var parser = this.parser;
+ var materialDef = parser.json.materials[ materialIndex ];
+
+ if ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) {
+
+ return Promise.resolve();
+
+ }
+
+ var pending = [];
+
+ var extension = materialDef.extensions[ this.name ];
+
+ if ( extension.clearcoatFactor !== undefined ) {
+
+ materialParams.clearcoat = extension.clearcoatFactor;
+
+ }
+
+ if ( extension.clearcoatTexture !== undefined ) {
+
+ pending.push( parser.assignTexture( materialParams, 'clearcoatMap', extension.clearcoatTexture ) );
+
+ }
+
+ if ( extension.clearcoatRoughnessFactor !== undefined ) {
+
+ materialParams.clearcoatRoughness = extension.clearcoatRoughnessFactor;
+
+ }
+
+ if ( extension.clearcoatRoughnessTexture !== undefined ) {
+
+ pending.push( parser.assignTexture( materialParams, 'clearcoatRoughnessMap', extension.clearcoatRoughnessTexture ) );
+
+ }
+
+ if ( extension.clearcoatNormalTexture !== undefined ) {
+
+ pending.push( parser.assignTexture( materialParams, 'clearcoatNormalMap', extension.clearcoatNormalTexture ) );
+
+ if ( extension.clearcoatNormalTexture.scale !== undefined ) {
+
+ var scale = extension.clearcoatNormalTexture.scale;
+
+ materialParams.clearcoatNormalScale = new Vector2( scale, scale );
+
+ }
+
+ }
+
+ return Promise.all( pending );
+
+ };
+
+ /**
+ * Transmission Materials Extension
+ *
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_transmission
+ * Draft: https://github.com/KhronosGroup/glTF/pull/1698
+ */
+ function GLTFMaterialsTransmissionExtension( parser ) {
+
+ this.parser = parser;
+ this.name = EXTENSIONS.KHR_MATERIALS_TRANSMISSION;
+
+ }
+
+ GLTFMaterialsTransmissionExtension.prototype.getMaterialType = function ( materialIndex ) {
+
+ var parser = this.parser;
+ var materialDef = parser.json.materials[ materialIndex ];
+
+ if ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) return null;
+
+ return MeshPhysicalMaterial;
+
+ };
+
+ GLTFMaterialsTransmissionExtension.prototype.extendMaterialParams = function ( materialIndex, materialParams ) {
+
+ var parser = this.parser;
+ var materialDef = parser.json.materials[ materialIndex ];
+
+ if ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) {
+
+ return Promise.resolve();
+
+ }
+
+ var pending = [];
+
+ var extension = materialDef.extensions[ this.name ];
+
+ if ( extension.transmissionFactor !== undefined ) {
+
+ materialParams.transmission = extension.transmissionFactor;
+
+ }
+
+ if ( extension.transmissionTexture !== undefined ) {
+
+ pending.push( parser.assignTexture( materialParams, 'transmissionMap', extension.transmissionTexture ) );
+
+ }
+
+ return Promise.all( pending );
+
+ };
+
+ /**
+ * BasisU Texture Extension
+ *
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_texture_basisu
+ */
+ function GLTFTextureBasisUExtension( parser ) {
+
+ this.parser = parser;
+ this.name = EXTENSIONS.KHR_TEXTURE_BASISU;
- }
+ }
- // Some lights (e.g. spot) default to a position other than the origin. Reset the position
- // here, because node-level parsing will only override position if explicitly specified.
- lightNode.position.set( 0, 0, 0 );
+ GLTFTextureBasisUExtension.prototype.loadTexture = function ( textureIndex ) {
- lightNode.decay = 2;
+ var parser = this.parser;
+ var json = parser.json;
- if ( lightDef.intensity !== undefined ) lightNode.intensity = lightDef.intensity;
+ var textureDef = json.textures[ textureIndex ];
- lightNode.name = parser.createUniqueName( lightDef.name || ( 'light_' + lightIndex ) );
+ if ( ! textureDef.extensions || ! textureDef.extensions[ this.name ] ) {
- dependency = Promise.resolve( lightNode );
+ return null;
- parser.cache.add( cacheKey, dependency );
+ }
- return dependency;
+ var extension = textureDef.extensions[ this.name ];
+ var source = json.images[ extension.source ];
+ var loader = parser.options.ktx2Loader;
- };
+ if ( ! loader ) {
- GLTFLightsExtension.prototype.createNodeAttachment = function ( nodeIndex ) {
+ if ( json.extensionsRequired && json.extensionsRequired.indexOf( this.name ) >= 0 ) {
- var self = this;
- var parser = this.parser;
- var json = parser.json;
- var nodeDef = json.nodes[ nodeIndex ];
- var lightDef = ( nodeDef.extensions && nodeDef.extensions[ this.name ] ) || {};
- var lightIndex = lightDef.light;
+ throw new Error( 'THREE.GLTFLoader: setKTX2Loader must be called before loading KTX2 textures' );
- if ( lightIndex === undefined ) return null;
+ } else {
- return this._loadLight( lightIndex ).then( function ( light ) {
+ // Assumes that the extension is optional and that a fallback texture is present
+ return null;
- return parser._getNodeRef( self.cache, lightIndex, light );
+ }
- } );
+ }
+
+ return parser.loadTextureImage( textureIndex, source, loader );
};
/**
- * Unlit Materials Extension
+ * WebP Texture Extension
*
- * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_unlit
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/EXT_texture_webp
*/
- function GLTFMaterialsUnlitExtension() {
+ function GLTFTextureWebPExtension( parser ) {
- this.name = EXTENSIONS.KHR_MATERIALS_UNLIT;
+ this.parser = parser;
+ this.name = EXTENSIONS.EXT_TEXTURE_WEBP;
+ this.isSupported = null;
}
- GLTFMaterialsUnlitExtension.prototype.getMaterialType = function () {
+ GLTFTextureWebPExtension.prototype.loadTexture = function ( textureIndex ) {
- return MeshBasicMaterial;
+ var name = this.name;
+ var parser = this.parser;
+ var json = parser.json;
- };
+ var textureDef = json.textures[ textureIndex ];
- GLTFMaterialsUnlitExtension.prototype.extendParams = function ( materialParams, materialDef, parser ) {
+ if ( ! textureDef.extensions || ! textureDef.extensions[ name ] ) {
- var pending = [];
+ return null;
- materialParams.color = new Color( 1.0, 1.0, 1.0 );
- materialParams.opacity = 1.0;
+ }
- var metallicRoughness = materialDef.pbrMetallicRoughness;
+ var extension = textureDef.extensions[ name ];
+ var source = json.images[ extension.source ];
+ var loader = source.uri ? parser.options.manager.getHandler( source.uri ) : parser.textureLoader;
- if ( metallicRoughness ) {
+ return this.detectSupport().then( function ( isSupported ) {
- if ( Array.isArray( metallicRoughness.baseColorFactor ) ) {
+ if ( isSupported ) return parser.loadTextureImage( textureIndex, source, loader );
- var array = metallicRoughness.baseColorFactor;
+ if ( json.extensionsRequired && json.extensionsRequired.indexOf( name ) >= 0 ) {
- materialParams.color.fromArray( array );
- materialParams.opacity = array[ 3 ];
+ throw new Error( 'THREE.GLTFLoader: WebP required by asset but unsupported.' );
}
- if ( metallicRoughness.baseColorTexture !== undefined ) {
+ // Fall back to PNG or JPEG.
+ return parser.loadTexture( textureIndex );
- pending.push( parser.assignTexture( materialParams, 'map', metallicRoughness.baseColorTexture ) );
+ } );
- }
+ };
+
+ GLTFTextureWebPExtension.prototype.detectSupport = function () {
+
+ if ( ! this.isSupported ) {
+
+ this.isSupported = new Promise( function ( resolve ) {
+
+ var image = new Image();
+
+ // Lossy test image. Support for lossy images doesn't guarantee support for all
+ // WebP images, unfortunately.
+ image.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
+
+ image.onload = image.onerror = function () {
+
+ resolve( image.height === 1 );
+
+ };
+
+ } );
}
- return Promise.all( pending );
+ return this.isSupported;
};
/**
- * Clearcoat Materials Extension
- *
- * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_clearcoat
- */
- function GLTFMaterialsClearcoatExtension( parser ) {
+ * meshopt BufferView Compression Extension
+ *
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/EXT_meshopt_compression
+ */
+ function GLTFMeshoptCompression( parser ) {
+ this.name = EXTENSIONS.EXT_MESHOPT_COMPRESSION;
this.parser = parser;
- this.name = EXTENSIONS.KHR_MATERIALS_CLEARCOAT;
}
- GLTFMaterialsClearcoatExtension.prototype.getMaterialType = function ( materialIndex ) {
+ GLTFMeshoptCompression.prototype.loadBufferView = function ( index ) {
- var parser = this.parser;
- var materialDef = parser.json.materials[ materialIndex ];
+ var json = this.parser.json;
+ var bufferView = json.bufferViews[ index ];
- if ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) return null;
+ if ( bufferView.extensions && bufferView.extensions[ this.name ] ) {
- return MeshPhysicalMaterial;
+ var extensionDef = bufferView.extensions[ this.name ];
- };
+ var buffer = this.parser.getDependency( 'buffer', extensionDef.buffer );
+ var decoder = this.parser.options.meshoptDecoder;
- GLTFMaterialsClearcoatExtension.prototype.extendMaterialParams = function ( materialIndex, materialParams ) {
+ if ( ! decoder || ! decoder.supported ) {
- var parser = this.parser;
- var materialDef = parser.json.materials[ materialIndex ];
+ if ( json.extensionsRequired && json.extensionsRequired.indexOf( this.name ) >= 0 ) {
- if ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) {
+ throw new Error( 'THREE.GLTFLoader: setMeshoptDecoder must be called before loading compressed files' );
- return Promise.resolve();
+ } else {
- }
+ // Assumes that the extension is optional and that fallback buffer data is present
+ return null;
- var pending = [];
+ }
- var extension = materialDef.extensions[ this.name ];
+ }
- if ( extension.clearcoatFactor !== undefined ) {
+ return Promise.all( [ buffer, decoder.ready ] ).then( function ( res ) {
- materialParams.clearcoat = extension.clearcoatFactor;
+ var byteOffset = extensionDef.byteOffset || 0;
+ var byteLength = extensionDef.byteLength || 0;
- }
+ var count = extensionDef.count;
+ var stride = extensionDef.byteStride;
- if ( extension.clearcoatTexture !== undefined ) {
+ var result = new ArrayBuffer( count * stride );
+ var source = new Uint8Array( res[ 0 ], byteOffset, byteLength );
- pending.push( parser.assignTexture( materialParams, 'clearcoatMap', extension.clearcoatTexture ) );
+ decoder.decodeGltfBuffer( new Uint8Array( result ), count, stride, source, extensionDef.mode, extensionDef.filter );
+ return result;
- }
+ } );
- if ( extension.clearcoatRoughnessFactor !== undefined ) {
+ } else {
- materialParams.clearcoatRoughness = extension.clearcoatRoughnessFactor;
+ return null;
}
- if ( extension.clearcoatRoughnessTexture !== undefined ) {
+ };
- pending.push( parser.assignTexture( materialParams, 'clearcoatRoughnessMap', extension.clearcoatRoughnessTexture ) );
+ /* BINARY EXTENSION */
+ var BINARY_EXTENSION_HEADER_MAGIC = 'glTF';
+ var BINARY_EXTENSION_HEADER_LENGTH = 12;
+ var BINARY_EXTENSION_CHUNK_TYPES = { JSON: 0x4E4F534A, BIN: 0x004E4942 };
+
+ function GLTFBinaryExtension( data ) {
+
+ this.name = EXTENSIONS.KHR_BINARY_GLTF;
+ this.content = null;
+ this.body = null;
+
+ var headerView = new DataView( data, 0, BINARY_EXTENSION_HEADER_LENGTH );
+
+ this.header = {
+ magic: LoaderUtils.decodeText( new Uint8Array( data.slice( 0, 4 ) ) ),
+ version: headerView.getUint32( 4, true ),
+ length: headerView.getUint32( 8, true )
+ };
+
+ if ( this.header.magic !== BINARY_EXTENSION_HEADER_MAGIC ) {
+
+ throw new Error( 'THREE.GLTFLoader: Unsupported glTF-Binary header.' );
+
+ } else if ( this.header.version < 2.0 ) {
+
+ throw new Error( 'THREE.GLTFLoader: Legacy binary file detected.' );
}
- if ( extension.clearcoatNormalTexture !== undefined ) {
+ var chunkView = new DataView( data, BINARY_EXTENSION_HEADER_LENGTH );
+ var chunkIndex = 0;
- pending.push( parser.assignTexture( materialParams, 'clearcoatNormalMap', extension.clearcoatNormalTexture ) );
+ while ( chunkIndex < chunkView.byteLength ) {
- if ( extension.clearcoatNormalTexture.scale !== undefined ) {
+ var chunkLength = chunkView.getUint32( chunkIndex, true );
+ chunkIndex += 4;
- var scale = extension.clearcoatNormalTexture.scale;
+ var chunkType = chunkView.getUint32( chunkIndex, true );
+ chunkIndex += 4;
- materialParams.clearcoatNormalScale = new Vector2( scale, scale );
+ if ( chunkType === BINARY_EXTENSION_CHUNK_TYPES.JSON ) {
+
+ var contentArray = new Uint8Array( data, BINARY_EXTENSION_HEADER_LENGTH + chunkIndex, chunkLength );
+ this.content = LoaderUtils.decodeText( contentArray );
+
+ } else if ( chunkType === BINARY_EXTENSION_CHUNK_TYPES.BIN ) {
+
+ var byteOffset = BINARY_EXTENSION_HEADER_LENGTH + chunkIndex;
+ this.body = data.slice( byteOffset, byteOffset + chunkLength );
}
+ // Clients must ignore chunks with unknown types.
+
+ chunkIndex += chunkLength;
+
}
- return Promise.all( pending );
+ if ( this.content === null ) {
- };
+ throw new Error( 'THREE.GLTFLoader: JSON content not found.' );
+
+ }
+
+ }
/**
- * Transmission Materials Extension
+ * DRACO Mesh Compression Extension
*
- * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_transmission
- * Draft: https://github.com/KhronosGroup/glTF/pull/1698
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_draco_mesh_compression
*/
- function GLTFMaterialsTransmissionExtension( parser ) {
+ function GLTFDracoMeshCompressionExtension( json, dracoLoader ) {
+
+ if ( ! dracoLoader ) {
+
+ throw new Error( 'THREE.GLTFLoader: No DRACOLoader instance provided.' );
+
+ }
- this.parser = parser;
- this.name = EXTENSIONS.KHR_MATERIALS_TRANSMISSION;
+ this.name = EXTENSIONS.KHR_DRACO_MESH_COMPRESSION;
+ this.json = json;
+ this.dracoLoader = dracoLoader;
+ this.dracoLoader.preload();
}
- GLTFMaterialsTransmissionExtension.prototype.getMaterialType = function ( materialIndex ) {
+ GLTFDracoMeshCompressionExtension.prototype.decodePrimitive = function ( primitive, parser ) {
- var parser = this.parser;
- var materialDef = parser.json.materials[ materialIndex ];
+ var json = this.json;
+ var dracoLoader = this.dracoLoader;
+ var bufferViewIndex = primitive.extensions[ this.name ].bufferView;
+ var gltfAttributeMap = primitive.extensions[ this.name ].attributes;
+ var threeAttributeMap = {};
+ var attributeNormalizedMap = {};
+ var attributeTypeMap = {};
- if ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) return null;
+ for ( var attributeName in gltfAttributeMap ) {
- return MeshPhysicalMaterial;
+ var threeAttributeName = ATTRIBUTES[ attributeName ] || attributeName.toLowerCase();
- };
+ threeAttributeMap[ threeAttributeName ] = gltfAttributeMap[ attributeName ];
- GLTFMaterialsTransmissionExtension.prototype.extendMaterialParams = function ( materialIndex, materialParams ) {
+ }
- var parser = this.parser;
- var materialDef = parser.json.materials[ materialIndex ];
+ for ( attributeName in primitive.attributes ) {
- if ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) {
+ var threeAttributeName = ATTRIBUTES[ attributeName ] || attributeName.toLowerCase();
- return Promise.resolve();
+ if ( gltfAttributeMap[ attributeName ] !== undefined ) {
+
+ var accessorDef = json.accessors[ primitive.attributes[ attributeName ] ];
+ var componentType = WEBGL_COMPONENT_TYPES[ accessorDef.componentType ];
+
+ attributeTypeMap[ threeAttributeName ] = componentType;
+ attributeNormalizedMap[ threeAttributeName ] = accessorDef.normalized === true;
+
+ }
}
- var pending = [];
+ return parser.getDependency( 'bufferView', bufferViewIndex ).then( function ( bufferView ) {
- var extension = materialDef.extensions[ this.name ];
+ return new Promise( function ( resolve ) {
- if ( extension.transmissionFactor !== undefined ) {
+ dracoLoader.decodeDracoFile( bufferView, function ( geometry ) {
- materialParams.transmission = extension.transmissionFactor;
+ for ( var attributeName in geometry.attributes ) {
- }
+ var attribute = geometry.attributes[ attributeName ];
+ var normalized = attributeNormalizedMap[ attributeName ];
- if ( extension.transmissionTexture !== undefined ) {
+ if ( normalized !== undefined ) attribute.normalized = normalized;
- pending.push( parser.assignTexture( materialParams, 'transmissionMap', extension.transmissionTexture ) );
+ }
- }
+ resolve( geometry );
- return Promise.all( pending );
+ }, threeAttributeMap, attributeTypeMap );
+
+ } );
+
+ } );
};
/**
- * BasisU Texture Extension
+ * Texture Transform Extension
*
- * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_texture_basisu
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_texture_transform
*/
- function GLTFTextureBasisUExtension( parser ) {
+ function GLTFTextureTransformExtension() {
- this.parser = parser;
- this.name = EXTENSIONS.KHR_TEXTURE_BASISU;
+ this.name = EXTENSIONS.KHR_TEXTURE_TRANSFORM;
}
- GLTFTextureBasisUExtension.prototype.loadTexture = function ( textureIndex ) {
-
- var parser = this.parser;
- var json = parser.json;
+ GLTFTextureTransformExtension.prototype.extendTexture = function ( texture, transform ) {
- var textureDef = json.textures[ textureIndex ];
+ texture = texture.clone();
- if ( ! textureDef.extensions || ! textureDef.extensions[ this.name ] ) {
+ if ( transform.offset !== undefined ) {
- return null;
+ texture.offset.fromArray( transform.offset );
}
- var extension = textureDef.extensions[ this.name ];
- var source = json.images[ extension.source ];
- var loader = parser.options.ktx2Loader;
+ if ( transform.rotation !== undefined ) {
- if ( ! loader ) {
+ texture.rotation = transform.rotation;
- if ( json.extensionsRequired && json.extensionsRequired.indexOf( this.name ) >= 0 ) {
+ }
- throw new Error( 'THREE.GLTFLoader: setKTX2Loader must be called before loading KTX2 textures' );
+ if ( transform.scale !== undefined ) {
- } else {
+ texture.repeat.fromArray( transform.scale );
- // Assumes that the extension is optional and that a fallback texture is present
- return null;
+ }
- }
+ if ( transform.texCoord !== undefined ) {
+
+ console.warn( 'THREE.GLTFLoader: Custom UV sets in "' + this.name + '" extension not yet supported.' );
}
- return parser.loadTextureImage( textureIndex, source, loader );
+ texture.needsUpdate = true;
+
+ return texture;
};
/**
- * WebP Texture Extension
+ * Specular-Glossiness Extension
*
- * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/EXT_texture_webp
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_pbrSpecularGlossiness
*/
- function GLTFTextureWebPExtension( parser ) {
-
- this.parser = parser;
- this.name = EXTENSIONS.EXT_TEXTURE_WEBP;
- this.isSupported = null;
-
- }
-
- GLTFTextureWebPExtension.prototype.loadTexture = function ( textureIndex ) {
-
- var name = this.name;
- var parser = this.parser;
- var json = parser.json;
-
- var textureDef = json.textures[ textureIndex ];
-
- if ( ! textureDef.extensions || ! textureDef.extensions[ name ] ) {
-
- return null;
-
- }
-
- var extension = textureDef.extensions[ name ];
- var source = json.images[ extension.source ];
- var loader = source.uri ? parser.options.manager.getHandler( source.uri ) : parser.textureLoader;
-
- return this.detectSupport().then( function ( isSupported ) {
- if ( isSupported ) return parser.loadTextureImage( textureIndex, source, loader );
+ /**
+ * A sub class of StandardMaterial with some of the functionality
+ * changed via the `onBeforeCompile` callback
+ * @pailhead
+ */
- if ( json.extensionsRequired && json.extensionsRequired.indexOf( name ) >= 0 ) {
+ function GLTFMeshStandardSGMaterial( params ) {
- throw new Error( 'THREE.GLTFLoader: WebP required by asset but unsupported.' );
+ MeshStandardMaterial.call( this );
- }
+ this.isGLTFSpecularGlossinessMaterial = true;
- // Fall back to PNG or JPEG.
- return parser.loadTexture( textureIndex );
+ //various chunks that need replacing
+ var specularMapParsFragmentChunk = [
+ '#ifdef USE_SPECULARMAP',
+ ' uniform sampler2D specularMap;',
+ '#endif'
+ ].join( '\n' );
- } );
+ var glossinessMapParsFragmentChunk = [
+ '#ifdef USE_GLOSSINESSMAP',
+ ' uniform sampler2D glossinessMap;',
+ '#endif'
+ ].join( '\n' );
- };
+ var specularMapFragmentChunk = [
+ 'vec3 specularFactor = specular;',
+ '#ifdef USE_SPECULARMAP',
+ ' vec4 texelSpecular = texture2D( specularMap, vUv );',
+ ' texelSpecular = sRGBToLinear( texelSpecular );',
+ ' // reads channel RGB, compatible with a glTF Specular-Glossiness (RGBA) texture',
+ ' specularFactor *= texelSpecular.rgb;',
+ '#endif'
+ ].join( '\n' );
- GLTFTextureWebPExtension.prototype.detectSupport = function () {
+ var glossinessMapFragmentChunk = [
+ 'float glossinessFactor = glossiness;',
+ '#ifdef USE_GLOSSINESSMAP',
+ ' vec4 texelGlossiness = texture2D( glossinessMap, vUv );',
+ ' // reads channel A, compatible with a glTF Specular-Glossiness (RGBA) texture',
+ ' glossinessFactor *= texelGlossiness.a;',
+ '#endif'
+ ].join( '\n' );
- if ( ! this.isSupported ) {
+ var lightPhysicalFragmentChunk = [
+ 'PhysicalMaterial material;',
+ 'material.diffuseColor = diffuseColor.rgb * ( 1. - max( specularFactor.r, max( specularFactor.g, specularFactor.b ) ) );',
+ 'vec3 dxy = max( abs( dFdx( geometryNormal ) ), abs( dFdy( geometryNormal ) ) );',
+ 'float geometryRoughness = max( max( dxy.x, dxy.y ), dxy.z );',
+ 'material.specularRoughness = max( 1.0 - glossinessFactor, 0.0525 ); // 0.0525 corresponds to the base mip of a 256 cubemap.',
+ 'material.specularRoughness += geometryRoughness;',
+ 'material.specularRoughness = min( material.specularRoughness, 1.0 );',
+ 'material.specularColor = specularFactor;',
+ ].join( '\n' );
- this.isSupported = new Promise( function ( resolve ) {
+ var uniforms = {
+ specular: { value: new Color().setHex( 0xffffff ) },
+ glossiness: { value: 1 },
+ specularMap: { value: null },
+ glossinessMap: { value: null }
+ };
- var image = new Image();
+ this._extraUniforms = uniforms;
- // Lossy test image. Support for lossy images doesn't guarantee support for all
- // WebP images, unfortunately.
- image.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
+ this.onBeforeCompile = function ( shader ) {
- image.onload = image.onerror = function () {
+ for ( var uniformName in uniforms ) {
- resolve( image.height === 1 );
+ shader.uniforms[ uniformName ] = uniforms[ uniformName ];
- };
+ }
- } );
+ shader.fragmentShader = shader.fragmentShader
+ .replace( 'uniform float roughness;', 'uniform vec3 specular;' )
+ .replace( 'uniform float metalness;', 'uniform float glossiness;' )
+ .replace( '#include
', specularMapParsFragmentChunk )
+ .replace( '#include ', glossinessMapParsFragmentChunk )
+ .replace( '#include ', specularMapFragmentChunk )
+ .replace( '#include ', glossinessMapFragmentChunk )
+ .replace( '#include ', lightPhysicalFragmentChunk );
- }
+ };
- return this.isSupported;
+ Object.defineProperties( this, {
- };
+ specular: {
+ get: function () {
- /**
- * meshopt BufferView Compression Extension
- *
- * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/EXT_meshopt_compression
- */
- function GLTFMeshoptCompression( parser ) {
+ return uniforms.specular.value;
- this.name = EXTENSIONS.EXT_MESHOPT_COMPRESSION;
- this.parser = parser;
+ },
+ set: function ( v ) {
- }
+ uniforms.specular.value = v;
- GLTFMeshoptCompression.prototype.loadBufferView = function ( index ) {
+ }
+ },
- var json = this.parser.json;
- var bufferView = json.bufferViews[ index ];
+ specularMap: {
+ get: function () {
- if ( bufferView.extensions && bufferView.extensions[ this.name ] ) {
+ return uniforms.specularMap.value;
- var extensionDef = bufferView.extensions[ this.name ];
+ },
+ set: function ( v ) {
- var buffer = this.parser.getDependency( 'buffer', extensionDef.buffer );
- var decoder = this.parser.options.meshoptDecoder;
+ uniforms.specularMap.value = v;
- if ( ! decoder || ! decoder.supported ) {
+ if ( v ) {
- if ( json.extensionsRequired && json.extensionsRequired.indexOf( this.name ) >= 0 ) {
+ this.defines.USE_SPECULARMAP = ''; // USE_UV is set by the renderer for specular maps
- throw new Error( 'THREE.GLTFLoader: setMeshoptDecoder must be called before loading compressed files' );
+ } else {
- } else {
+ delete this.defines.USE_SPECULARMAP;
- // Assumes that the extension is optional and that fallback buffer data is present
- return null;
+ }
}
+ },
- }
-
- return Promise.all( [ buffer, decoder.ready ] ).then( function ( res ) {
+ glossiness: {
+ get: function () {
- var byteOffset = extensionDef.byteOffset || 0;
- var byteLength = extensionDef.byteLength || 0;
+ return uniforms.glossiness.value;
- var count = extensionDef.count;
- var stride = extensionDef.byteStride;
+ },
+ set: function ( v ) {
- var result = new ArrayBuffer( count * stride );
- var source = new Uint8Array( res[ 0 ], byteOffset, byteLength );
+ uniforms.glossiness.value = v;
- decoder.decodeGltfBuffer( new Uint8Array( result ), count, stride, source, extensionDef.mode, extensionDef.filter );
- return result;
+ }
+ },
- } );
+ glossinessMap: {
+ get: function () {
- } else {
+ return uniforms.glossinessMap.value;
- return null;
+ },
+ set: function ( v ) {
- }
+ uniforms.glossinessMap.value = v;
- };
+ if ( v ) {
- /* BINARY EXTENSION */
- var BINARY_EXTENSION_HEADER_MAGIC = 'glTF';
- var BINARY_EXTENSION_HEADER_LENGTH = 12;
- var BINARY_EXTENSION_CHUNK_TYPES = { JSON: 0x4E4F534A, BIN: 0x004E4942 };
+ this.defines.USE_GLOSSINESSMAP = '';
+ this.defines.USE_UV = '';
- function GLTFBinaryExtension( data ) {
+ } else {
- this.name = EXTENSIONS.KHR_BINARY_GLTF;
- this.content = null;
- this.body = null;
+ delete this.defines.USE_GLOSSINESSMAP;
+ delete this.defines.USE_UV;
- var headerView = new DataView( data, 0, BINARY_EXTENSION_HEADER_LENGTH );
+ }
- this.header = {
- magic: LoaderUtils.decodeText( new Uint8Array( data.slice( 0, 4 ) ) ),
- version: headerView.getUint32( 4, true ),
- length: headerView.getUint32( 8, true )
- };
+ }
+ }
- if ( this.header.magic !== BINARY_EXTENSION_HEADER_MAGIC ) {
+ } );
- throw new Error( 'THREE.GLTFLoader: Unsupported glTF-Binary header.' );
+ delete this.metalness;
+ delete this.roughness;
+ delete this.metalnessMap;
+ delete this.roughnessMap;
- } else if ( this.header.version < 2.0 ) {
+ this.setValues( params );
- throw new Error( 'THREE.GLTFLoader: Legacy binary file detected.' );
+ }
- }
+ GLTFMeshStandardSGMaterial.prototype = Object.create( MeshStandardMaterial.prototype );
+ GLTFMeshStandardSGMaterial.prototype.constructor = GLTFMeshStandardSGMaterial;
- var chunkView = new DataView( data, BINARY_EXTENSION_HEADER_LENGTH );
- var chunkIndex = 0;
+ GLTFMeshStandardSGMaterial.prototype.copy = function ( source ) {
- while ( chunkIndex < chunkView.byteLength ) {
+ MeshStandardMaterial.prototype.copy.call( this, source );
+ this.specularMap = source.specularMap;
+ this.specular.copy( source.specular );
+ this.glossinessMap = source.glossinessMap;
+ this.glossiness = source.glossiness;
+ delete this.metalness;
+ delete this.roughness;
+ delete this.metalnessMap;
+ delete this.roughnessMap;
+ return this;
- var chunkLength = chunkView.getUint32( chunkIndex, true );
- chunkIndex += 4;
+ };
- var chunkType = chunkView.getUint32( chunkIndex, true );
- chunkIndex += 4;
+ function GLTFMaterialsPbrSpecularGlossinessExtension() {
- if ( chunkType === BINARY_EXTENSION_CHUNK_TYPES.JSON ) {
+ return {
- var contentArray = new Uint8Array( data, BINARY_EXTENSION_HEADER_LENGTH + chunkIndex, chunkLength );
- this.content = LoaderUtils.decodeText( contentArray );
+ name: EXTENSIONS.KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS,
- } else if ( chunkType === BINARY_EXTENSION_CHUNK_TYPES.BIN ) {
+ specularGlossinessParams: [
+ 'color',
+ 'map',
+ 'lightMap',
+ 'lightMapIntensity',
+ 'aoMap',
+ 'aoMapIntensity',
+ 'emissive',
+ 'emissiveIntensity',
+ 'emissiveMap',
+ 'bumpMap',
+ 'bumpScale',
+ 'normalMap',
+ 'normalMapType',
+ 'displacementMap',
+ 'displacementScale',
+ 'displacementBias',
+ 'specularMap',
+ 'specular',
+ 'glossinessMap',
+ 'glossiness',
+ 'alphaMap',
+ 'envMap',
+ 'envMapIntensity',
+ 'refractionRatio',
+ ],
- var byteOffset = BINARY_EXTENSION_HEADER_LENGTH + chunkIndex;
- this.body = data.slice( byteOffset, byteOffset + chunkLength );
+ getMaterialType: function () {
- }
+ return GLTFMeshStandardSGMaterial;
- // Clients must ignore chunks with unknown types.
+ },
- chunkIndex += chunkLength;
+ extendParams: function ( materialParams, materialDef, parser ) {
- }
+ var pbrSpecularGlossiness = materialDef.extensions[ this.name ];
- if ( this.content === null ) {
+ materialParams.color = new Color( 1.0, 1.0, 1.0 );
+ materialParams.opacity = 1.0;
- throw new Error( 'THREE.GLTFLoader: JSON content not found.' );
+ var pending = [];
- }
+ if ( Array.isArray( pbrSpecularGlossiness.diffuseFactor ) ) {
- }
+ var array = pbrSpecularGlossiness.diffuseFactor;
- /**
- * DRACO Mesh Compression Extension
- *
- * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_draco_mesh_compression
- */
- function GLTFDracoMeshCompressionExtension( json, dracoLoader ) {
+ materialParams.color.fromArray( array );
+ materialParams.opacity = array[ 3 ];
- if ( ! dracoLoader ) {
+ }
- throw new Error( 'THREE.GLTFLoader: No DRACOLoader instance provided.' );
+ if ( pbrSpecularGlossiness.diffuseTexture !== undefined ) {
- }
+ pending.push( parser.assignTexture( materialParams, 'map', pbrSpecularGlossiness.diffuseTexture ) );
- this.name = EXTENSIONS.KHR_DRACO_MESH_COMPRESSION;
- this.json = json;
- this.dracoLoader = dracoLoader;
- this.dracoLoader.preload();
+ }
- }
+ materialParams.emissive = new Color( 0.0, 0.0, 0.0 );
+ materialParams.glossiness = pbrSpecularGlossiness.glossinessFactor !== undefined ? pbrSpecularGlossiness.glossinessFactor : 1.0;
+ materialParams.specular = new Color( 1.0, 1.0, 1.0 );
- GLTFDracoMeshCompressionExtension.prototype.decodePrimitive = function ( primitive, parser ) {
+ if ( Array.isArray( pbrSpecularGlossiness.specularFactor ) ) {
- var json = this.json;
- var dracoLoader = this.dracoLoader;
- var bufferViewIndex = primitive.extensions[ this.name ].bufferView;
- var gltfAttributeMap = primitive.extensions[ this.name ].attributes;
- var threeAttributeMap = {};
- var attributeNormalizedMap = {};
- var attributeTypeMap = {};
+ materialParams.specular.fromArray( pbrSpecularGlossiness.specularFactor );
- for ( var attributeName in gltfAttributeMap ) {
+ }
- var threeAttributeName = ATTRIBUTES[ attributeName ] || attributeName.toLowerCase();
+ if ( pbrSpecularGlossiness.specularGlossinessTexture !== undefined ) {
- threeAttributeMap[ threeAttributeName ] = gltfAttributeMap[ attributeName ];
+ var specGlossMapDef = pbrSpecularGlossiness.specularGlossinessTexture;
+ pending.push( parser.assignTexture( materialParams, 'glossinessMap', specGlossMapDef ) );
+ pending.push( parser.assignTexture( materialParams, 'specularMap', specGlossMapDef ) );
- }
+ }
- for ( attributeName in primitive.attributes ) {
+ return Promise.all( pending );
- var threeAttributeName = ATTRIBUTES[ attributeName ] || attributeName.toLowerCase();
+ },
- if ( gltfAttributeMap[ attributeName ] !== undefined ) {
+ createMaterial: function ( materialParams ) {
- var accessorDef = json.accessors[ primitive.attributes[ attributeName ] ];
- var componentType = WEBGL_COMPONENT_TYPES[ accessorDef.componentType ];
+ var material = new GLTFMeshStandardSGMaterial( materialParams );
+ material.fog = true;
- attributeTypeMap[ threeAttributeName ] = componentType;
- attributeNormalizedMap[ threeAttributeName ] = accessorDef.normalized === true;
+ material.color = materialParams.color;
- }
+ material.map = materialParams.map === undefined ? null : materialParams.map;
- }
+ material.lightMap = null;
+ material.lightMapIntensity = 1.0;
- return parser.getDependency( 'bufferView', bufferViewIndex ).then( function ( bufferView ) {
+ material.aoMap = materialParams.aoMap === undefined ? null : materialParams.aoMap;
+ material.aoMapIntensity = 1.0;
- return new Promise( function ( resolve ) {
+ material.emissive = materialParams.emissive;
+ material.emissiveIntensity = 1.0;
+ material.emissiveMap = materialParams.emissiveMap === undefined ? null : materialParams.emissiveMap;
- dracoLoader.decodeDracoFile( bufferView, function ( geometry ) {
+ material.bumpMap = materialParams.bumpMap === undefined ? null : materialParams.bumpMap;
+ material.bumpScale = 1;
- for ( var attributeName in geometry.attributes ) {
+ material.normalMap = materialParams.normalMap === undefined ? null : materialParams.normalMap;
+ material.normalMapType = TangentSpaceNormalMap;
- var attribute = geometry.attributes[ attributeName ];
- var normalized = attributeNormalizedMap[ attributeName ];
+ if ( materialParams.normalScale ) material.normalScale = materialParams.normalScale;
- if ( normalized !== undefined ) attribute.normalized = normalized;
+ material.displacementMap = null;
+ material.displacementScale = 1;
+ material.displacementBias = 0;
- }
+ material.specularMap = materialParams.specularMap === undefined ? null : materialParams.specularMap;
+ material.specular = materialParams.specular;
- resolve( geometry );
+ material.glossinessMap = materialParams.glossinessMap === undefined ? null : materialParams.glossinessMap;
+ material.glossiness = materialParams.glossiness;
- }, threeAttributeMap, attributeTypeMap );
+ material.alphaMap = null;
- } );
+ material.envMap = materialParams.envMap === undefined ? null : materialParams.envMap;
+ material.envMapIntensity = 1.0;
- } );
+ material.refractionRatio = 0.98;
- };
+ return material;
- /**
- * Texture Transform Extension
- *
- * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_texture_transform
- */
- function GLTFTextureTransformExtension() {
+ },
- this.name = EXTENSIONS.KHR_TEXTURE_TRANSFORM;
+ };
}
- GLTFTextureTransformExtension.prototype.extendTexture = function ( texture, transform ) {
+ /**
+ * Mesh Quantization Extension
+ *
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_mesh_quantization
+ */
+ function GLTFMeshQuantizationExtension() {
- texture = texture.clone();
+ this.name = EXTENSIONS.KHR_MESH_QUANTIZATION;
- if ( transform.offset !== undefined ) {
+ }
- texture.offset.fromArray( transform.offset );
+ /*********************************/
+ /********** INTERPOLATION ********/
+ /*********************************/
- }
+ // Spline Interpolation
+ // Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#appendix-c-spline-interpolation
+ function GLTFCubicSplineInterpolant( parameterPositions, sampleValues, sampleSize, resultBuffer ) {
- if ( transform.rotation !== undefined ) {
+ Interpolant.call( this, parameterPositions, sampleValues, sampleSize, resultBuffer );
- texture.rotation = transform.rotation;
+ }
- }
+ GLTFCubicSplineInterpolant.prototype = Object.create( Interpolant.prototype );
+ GLTFCubicSplineInterpolant.prototype.constructor = GLTFCubicSplineInterpolant;
- if ( transform.scale !== undefined ) {
+ GLTFCubicSplineInterpolant.prototype.copySampleValue_ = function ( index ) {
- texture.repeat.fromArray( transform.scale );
+ // Copies a sample value to the result buffer. See description of glTF
+ // CUBICSPLINE values layout in interpolate_() function below.
- }
+ var result = this.resultBuffer,
+ values = this.sampleValues,
+ valueSize = this.valueSize,
+ offset = index * valueSize * 3 + valueSize;
- if ( transform.texCoord !== undefined ) {
+ for ( var i = 0; i !== valueSize; i ++ ) {
- console.warn( 'THREE.GLTFLoader: Custom UV sets in "' + this.name + '" extension not yet supported.' );
+ result[ i ] = values[ offset + i ];
}
- texture.needsUpdate = true;
-
- return texture;
+ return result;
};
- /**
- * Specular-Glossiness Extension
- *
- * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_pbrSpecularGlossiness
- */
+ GLTFCubicSplineInterpolant.prototype.beforeStart_ = GLTFCubicSplineInterpolant.prototype.copySampleValue_;
- /**
- * A sub class of StandardMaterial with some of the functionality
- * changed via the `onBeforeCompile` callback
- * @pailhead
- */
+ GLTFCubicSplineInterpolant.prototype.afterEnd_ = GLTFCubicSplineInterpolant.prototype.copySampleValue_;
- function GLTFMeshStandardSGMaterial( params ) {
+ GLTFCubicSplineInterpolant.prototype.interpolate_ = function ( i1, t0, t, t1 ) {
- MeshStandardMaterial.call( this );
+ var result = this.resultBuffer;
+ var values = this.sampleValues;
+ var stride = this.valueSize;
- this.isGLTFSpecularGlossinessMaterial = true;
+ var stride2 = stride * 2;
+ var stride3 = stride * 3;
- //various chunks that need replacing
- var specularMapParsFragmentChunk = [
- '#ifdef USE_SPECULARMAP',
- ' uniform sampler2D specularMap;',
- '#endif'
- ].join( '\n' );
+ var td = t1 - t0;
- var glossinessMapParsFragmentChunk = [
- '#ifdef USE_GLOSSINESSMAP',
- ' uniform sampler2D glossinessMap;',
- '#endif'
- ].join( '\n' );
+ var p = ( t - t0 ) / td;
+ var pp = p * p;
+ var ppp = pp * p;
- var specularMapFragmentChunk = [
- 'vec3 specularFactor = specular;',
- '#ifdef USE_SPECULARMAP',
- ' vec4 texelSpecular = texture2D( specularMap, vUv );',
- ' texelSpecular = sRGBToLinear( texelSpecular );',
- ' // reads channel RGB, compatible with a glTF Specular-Glossiness (RGBA) texture',
- ' specularFactor *= texelSpecular.rgb;',
- '#endif'
- ].join( '\n' );
+ var offset1 = i1 * stride3;
+ var offset0 = offset1 - stride3;
- var glossinessMapFragmentChunk = [
- 'float glossinessFactor = glossiness;',
- '#ifdef USE_GLOSSINESSMAP',
- ' vec4 texelGlossiness = texture2D( glossinessMap, vUv );',
- ' // reads channel A, compatible with a glTF Specular-Glossiness (RGBA) texture',
- ' glossinessFactor *= texelGlossiness.a;',
- '#endif'
- ].join( '\n' );
+ var s2 = - 2 * ppp + 3 * pp;
+ var s3 = ppp - pp;
+ var s0 = 1 - s2;
+ var s1 = s3 - pp + p;
- var lightPhysicalFragmentChunk = [
- 'PhysicalMaterial material;',
- 'material.diffuseColor = diffuseColor.rgb * ( 1. - max( specularFactor.r, max( specularFactor.g, specularFactor.b ) ) );',
- 'vec3 dxy = max( abs( dFdx( geometryNormal ) ), abs( dFdy( geometryNormal ) ) );',
- 'float geometryRoughness = max( max( dxy.x, dxy.y ), dxy.z );',
- 'material.specularRoughness = max( 1.0 - glossinessFactor, 0.0525 ); // 0.0525 corresponds to the base mip of a 256 cubemap.',
- 'material.specularRoughness += geometryRoughness;',
- 'material.specularRoughness = min( material.specularRoughness, 1.0 );',
- 'material.specularColor = specularFactor;',
- ].join( '\n' );
+ // Layout of keyframe output values for CUBICSPLINE animations:
+ // [ inTangent_1, splineVertex_1, outTangent_1, inTangent_2, splineVertex_2, ... ]
+ for ( var i = 0; i !== stride; i ++ ) {
- var uniforms = {
- specular: { value: new Color().setHex( 0xffffff ) },
- glossiness: { value: 1 },
- specularMap: { value: null },
- glossinessMap: { value: null }
- };
+ var p0 = values[ offset0 + i + stride ]; // splineVertex_k
+ var m0 = values[ offset0 + i + stride2 ] * td; // outTangent_k * (t_k+1 - t_k)
+ var p1 = values[ offset1 + i + stride ]; // splineVertex_k+1
+ var m1 = values[ offset1 + i ] * td; // inTangent_k+1 * (t_k+1 - t_k)
- this._extraUniforms = uniforms;
+ result[ i ] = s0 * p0 + s1 * m0 + s2 * p1 + s3 * m1;
- this.onBeforeCompile = function ( shader ) {
+ }
- for ( var uniformName in uniforms ) {
+ return result;
- shader.uniforms[ uniformName ] = uniforms[ uniformName ];
+ };
- }
+ /*********************************/
+ /********** INTERNALS ************/
+ /*********************************/
- shader.fragmentShader = shader.fragmentShader
- .replace( 'uniform float roughness;', 'uniform vec3 specular;' )
- .replace( 'uniform float metalness;', 'uniform float glossiness;' )
- .replace( '#include ', specularMapParsFragmentChunk )
- .replace( '#include ', glossinessMapParsFragmentChunk )
- .replace( '#include ', specularMapFragmentChunk )
- .replace( '#include ', glossinessMapFragmentChunk )
- .replace( '#include ', lightPhysicalFragmentChunk );
+ /* CONSTANTS */
- };
+ var WEBGL_CONSTANTS = {
+ FLOAT: 5126,
+ //FLOAT_MAT2: 35674,
+ FLOAT_MAT3: 35675,
+ FLOAT_MAT4: 35676,
+ FLOAT_VEC2: 35664,
+ FLOAT_VEC3: 35665,
+ FLOAT_VEC4: 35666,
+ LINEAR: 9729,
+ REPEAT: 10497,
+ SAMPLER_2D: 35678,
+ POINTS: 0,
+ LINES: 1,
+ LINE_LOOP: 2,
+ LINE_STRIP: 3,
+ TRIANGLES: 4,
+ TRIANGLE_STRIP: 5,
+ TRIANGLE_FAN: 6,
+ UNSIGNED_BYTE: 5121,
+ UNSIGNED_SHORT: 5123
+ };
- Object.defineProperties( this, {
+ var WEBGL_COMPONENT_TYPES = {
+ 5120: Int8Array,
+ 5121: Uint8Array,
+ 5122: Int16Array,
+ 5123: Uint16Array,
+ 5125: Uint32Array,
+ 5126: Float32Array
+ };
- specular: {
- get: function () {
+ var WEBGL_FILTERS = {
+ 9728: NearestFilter,
+ 9729: LinearFilter,
+ 9984: NearestMipmapNearestFilter,
+ 9985: LinearMipmapNearestFilter,
+ 9986: NearestMipmapLinearFilter,
+ 9987: LinearMipmapLinearFilter
+ };
- return uniforms.specular.value;
+ var WEBGL_WRAPPINGS = {
+ 33071: ClampToEdgeWrapping,
+ 33648: MirroredRepeatWrapping,
+ 10497: RepeatWrapping
+ };
- },
- set: function ( v ) {
+ var WEBGL_TYPE_SIZES = {
+ 'SCALAR': 1,
+ 'VEC2': 2,
+ 'VEC3': 3,
+ 'VEC4': 4,
+ 'MAT2': 4,
+ 'MAT3': 9,
+ 'MAT4': 16
+ };
- uniforms.specular.value = v;
+ var ATTRIBUTES = {
+ POSITION: 'position',
+ NORMAL: 'normal',
+ TANGENT: 'tangent',
+ TEXCOORD_0: 'uv',
+ TEXCOORD_1: 'uv2',
+ COLOR_0: 'color',
+ WEIGHTS_0: 'skinWeight',
+ JOINTS_0: 'skinIndex',
+ };
- }
- },
+ var PATH_PROPERTIES = {
+ scale: 'scale',
+ translation: 'position',
+ rotation: 'quaternion',
+ weights: 'morphTargetInfluences'
+ };
- specularMap: {
- get: function () {
+ var INTERPOLATION = {
+ CUBICSPLINE: undefined, // We use a custom interpolant (GLTFCubicSplineInterpolation) for CUBICSPLINE tracks. Each
+ // keyframe track will be initialized with a default interpolation type, then modified.
+ LINEAR: InterpolateLinear,
+ STEP: InterpolateDiscrete
+ };
- return uniforms.specularMap.value;
+ var ALPHA_MODES = {
+ OPAQUE: 'OPAQUE',
+ MASK: 'MASK',
+ BLEND: 'BLEND'
+ };
- },
- set: function ( v ) {
+ /* UTILITY FUNCTIONS */
- uniforms.specularMap.value = v;
+ function resolveURL( url, path ) {
- if ( v ) {
+ // Invalid URL
+ if ( typeof url !== 'string' || url === '' ) return '';
- this.defines.USE_SPECULARMAP = ''; // USE_UV is set by the renderer for specular maps
+ // Host Relative URL
+ if ( /^https?:\/\//i.test( path ) && /^\//.test( url ) ) {
- } else {
+ path = path.replace( /(^https?:\/\/[^\/]+).*/i, '$1' );
- delete this.defines.USE_SPECULARMAP;
+ }
- }
+ // Absolute URL http://,https://,//
+ if ( /^(https?:)?\/\//i.test( url ) ) return url;
- }
- },
+ // Data URI
+ if ( /^data:.*,.*$/i.test( url ) ) return url;
- glossiness: {
- get: function () {
+ // Blob URL
+ if ( /^blob:.*$/i.test( url ) ) return url;
- return uniforms.glossiness.value;
+ // Relative URL
+ return path + url;
- },
- set: function ( v ) {
+ }
- uniforms.glossiness.value = v;
+ /**
+ * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#default-material
+ */
+ function createDefaultMaterial( cache ) {
- }
- },
+ if ( cache[ 'DefaultMaterial' ] === undefined ) {
- glossinessMap: {
- get: function () {
+ cache[ 'DefaultMaterial' ] = new MeshStandardMaterial( {
+ color: 0xFFFFFF,
+ emissive: 0x000000,
+ metalness: 1,
+ roughness: 1,
+ transparent: false,
+ depthTest: true,
+ side: FrontSide
+ } );
- return uniforms.glossinessMap.value;
+ }
- },
- set: function ( v ) {
+ return cache[ 'DefaultMaterial' ];
- uniforms.glossinessMap.value = v;
+ }
- if ( v ) {
+ function addUnknownExtensionsToUserData( knownExtensions, object, objectDef ) {
- this.defines.USE_GLOSSINESSMAP = '';
- this.defines.USE_UV = '';
+ // Add unknown glTF extensions to an object's userData.
- } else {
+ for ( var name in objectDef.extensions ) {
- delete this.defines.USE_GLOSSINESSMAP;
- delete this.defines.USE_UV;
+ if ( knownExtensions[ name ] === undefined ) {
- }
+ object.userData.gltfExtensions = object.userData.gltfExtensions || {};
+ object.userData.gltfExtensions[ name ] = objectDef.extensions[ name ];
- }
}
- } );
+ }
- delete this.metalness;
- delete this.roughness;
- delete this.metalnessMap;
- delete this.roughnessMap;
+ }
- this.setValues( params );
+ /**
+ * @param {Object3D|Material|BufferGeometry} object
+ * @param {GLTF.definition} gltfDef
+ */
+ function assignExtrasToUserData( object, gltfDef ) {
- }
+ if ( gltfDef.extras !== undefined ) {
- GLTFMeshStandardSGMaterial.prototype = Object.create( MeshStandardMaterial.prototype );
- GLTFMeshStandardSGMaterial.prototype.constructor = GLTFMeshStandardSGMaterial;
+ if ( typeof gltfDef.extras === 'object' ) {
- GLTFMeshStandardSGMaterial.prototype.copy = function ( source ) {
+ Object.assign( object.userData, gltfDef.extras );
- MeshStandardMaterial.prototype.copy.call( this, source );
- this.specularMap = source.specularMap;
- this.specular.copy( source.specular );
- this.glossinessMap = source.glossinessMap;
- this.glossiness = source.glossiness;
- delete this.metalness;
- delete this.roughness;
- delete this.metalnessMap;
- delete this.roughnessMap;
- return this;
+ } else {
- };
+ console.warn( 'THREE.GLTFLoader: Ignoring primitive type .extras, ' + gltfDef.extras );
- function GLTFMaterialsPbrSpecularGlossinessExtension() {
+ }
- return {
+ }
- name: EXTENSIONS.KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS,
+ }
- specularGlossinessParams: [
- 'color',
- 'map',
- 'lightMap',
- 'lightMapIntensity',
- 'aoMap',
- 'aoMapIntensity',
- 'emissive',
- 'emissiveIntensity',
- 'emissiveMap',
- 'bumpMap',
- 'bumpScale',
- 'normalMap',
- 'normalMapType',
- 'displacementMap',
- 'displacementScale',
- 'displacementBias',
- 'specularMap',
- 'specular',
- 'glossinessMap',
- 'glossiness',
- 'alphaMap',
- 'envMap',
- 'envMapIntensity',
- 'refractionRatio',
- ],
+ /**
+ * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#morph-targets
+ *
+ * @param {BufferGeometry} geometry
+ * @param {Array} targets
+ * @param {GLTFParser} parser
+ * @return {Promise}
+ */
+ function addMorphTargets( geometry, targets, parser ) {
- getMaterialType: function () {
+ var hasMorphPosition = false;
+ var hasMorphNormal = false;
- return GLTFMeshStandardSGMaterial;
+ for ( var i = 0, il = targets.length; i < il; i ++ ) {
- },
+ var target = targets[ i ];
- extendParams: function ( materialParams, materialDef, parser ) {
+ if ( target.POSITION !== undefined ) hasMorphPosition = true;
+ if ( target.NORMAL !== undefined ) hasMorphNormal = true;
- var pbrSpecularGlossiness = materialDef.extensions[ this.name ];
+ if ( hasMorphPosition && hasMorphNormal ) break;
- materialParams.color = new Color( 1.0, 1.0, 1.0 );
- materialParams.opacity = 1.0;
+ }
- var pending = [];
+ if ( ! hasMorphPosition && ! hasMorphNormal ) return Promise.resolve( geometry );
- if ( Array.isArray( pbrSpecularGlossiness.diffuseFactor ) ) {
+ var pendingPositionAccessors = [];
+ var pendingNormalAccessors = [];
- var array = pbrSpecularGlossiness.diffuseFactor;
+ for ( var i = 0, il = targets.length; i < il; i ++ ) {
- materialParams.color.fromArray( array );
- materialParams.opacity = array[ 3 ];
+ var target = targets[ i ];
- }
+ if ( hasMorphPosition ) {
- if ( pbrSpecularGlossiness.diffuseTexture !== undefined ) {
+ var pendingAccessor = target.POSITION !== undefined
+ ? parser.getDependency( 'accessor', target.POSITION )
+ : geometry.attributes.position;
- pending.push( parser.assignTexture( materialParams, 'map', pbrSpecularGlossiness.diffuseTexture ) );
+ pendingPositionAccessors.push( pendingAccessor );
- }
+ }
- materialParams.emissive = new Color( 0.0, 0.0, 0.0 );
- materialParams.glossiness = pbrSpecularGlossiness.glossinessFactor !== undefined ? pbrSpecularGlossiness.glossinessFactor : 1.0;
- materialParams.specular = new Color( 1.0, 1.0, 1.0 );
+ if ( hasMorphNormal ) {
- if ( Array.isArray( pbrSpecularGlossiness.specularFactor ) ) {
+ var pendingAccessor = target.NORMAL !== undefined
+ ? parser.getDependency( 'accessor', target.NORMAL )
+ : geometry.attributes.normal;
- materialParams.specular.fromArray( pbrSpecularGlossiness.specularFactor );
+ pendingNormalAccessors.push( pendingAccessor );
- }
+ }
- if ( pbrSpecularGlossiness.specularGlossinessTexture !== undefined ) {
+ }
- var specGlossMapDef = pbrSpecularGlossiness.specularGlossinessTexture;
- pending.push( parser.assignTexture( materialParams, 'glossinessMap', specGlossMapDef ) );
- pending.push( parser.assignTexture( materialParams, 'specularMap', specGlossMapDef ) );
+ return Promise.all( [
+ Promise.all( pendingPositionAccessors ),
+ Promise.all( pendingNormalAccessors )
+ ] ).then( function ( accessors ) {
- }
+ var morphPositions = accessors[ 0 ];
+ var morphNormals = accessors[ 1 ];
- return Promise.all( pending );
+ if ( hasMorphPosition ) geometry.morphAttributes.position = morphPositions;
+ if ( hasMorphNormal ) geometry.morphAttributes.normal = morphNormals;
+ geometry.morphTargetsRelative = true;
- },
+ return geometry;
- createMaterial: function ( materialParams ) {
+ } );
- var material = new GLTFMeshStandardSGMaterial( materialParams );
- material.fog = true;
+ }
- material.color = materialParams.color;
+ /**
+ * @param {Mesh} mesh
+ * @param {GLTF.Mesh} meshDef
+ */
+ function updateMorphTargets( mesh, meshDef ) {
- material.map = materialParams.map === undefined ? null : materialParams.map;
+ mesh.updateMorphTargets();
- material.lightMap = null;
- material.lightMapIntensity = 1.0;
+ if ( meshDef.weights !== undefined ) {
- material.aoMap = materialParams.aoMap === undefined ? null : materialParams.aoMap;
- material.aoMapIntensity = 1.0;
+ for ( var i = 0, il = meshDef.weights.length; i < il; i ++ ) {
- material.emissive = materialParams.emissive;
- material.emissiveIntensity = 1.0;
- material.emissiveMap = materialParams.emissiveMap === undefined ? null : materialParams.emissiveMap;
+ mesh.morphTargetInfluences[ i ] = meshDef.weights[ i ];
- material.bumpMap = materialParams.bumpMap === undefined ? null : materialParams.bumpMap;
- material.bumpScale = 1;
+ }
- material.normalMap = materialParams.normalMap === undefined ? null : materialParams.normalMap;
- material.normalMapType = TangentSpaceNormalMap;
+ }
- if ( materialParams.normalScale ) material.normalScale = materialParams.normalScale;
+ // .extras has user-defined data, so check that .extras.targetNames is an array.
+ if ( meshDef.extras && Array.isArray( meshDef.extras.targetNames ) ) {
- material.displacementMap = null;
- material.displacementScale = 1;
- material.displacementBias = 0;
+ var targetNames = meshDef.extras.targetNames;
- material.specularMap = materialParams.specularMap === undefined ? null : materialParams.specularMap;
- material.specular = materialParams.specular;
+ if ( mesh.morphTargetInfluences.length === targetNames.length ) {
- material.glossinessMap = materialParams.glossinessMap === undefined ? null : materialParams.glossinessMap;
- material.glossiness = materialParams.glossiness;
+ mesh.morphTargetDictionary = {};
- material.alphaMap = null;
+ for ( var i = 0, il = targetNames.length; i < il; i ++ ) {
- material.envMap = materialParams.envMap === undefined ? null : materialParams.envMap;
- material.envMapIntensity = 1.0;
+ mesh.morphTargetDictionary[ targetNames[ i ] ] = i;
- material.refractionRatio = 0.98;
+ }
- return material;
+ } else {
- },
+ console.warn( 'THREE.GLTFLoader: Invalid extras.targetNames length. Ignoring names.' );
- };
+ }
+
+ }
}
- /**
- * Mesh Quantization Extension
- *
- * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_mesh_quantization
- */
- function GLTFMeshQuantizationExtension() {
+ function createPrimitiveKey( primitiveDef ) {
- this.name = EXTENSIONS.KHR_MESH_QUANTIZATION;
+ var dracoExtension = primitiveDef.extensions && primitiveDef.extensions[ EXTENSIONS.KHR_DRACO_MESH_COMPRESSION ];
+ var geometryKey;
- }
+ if ( dracoExtension ) {
- /*********************************/
- /********** INTERPOLATION ********/
- /*********************************/
+ geometryKey = 'draco:' + dracoExtension.bufferView
+ + ':' + dracoExtension.indices
+ + ':' + createAttributesKey( dracoExtension.attributes );
- // Spline Interpolation
- // Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#appendix-c-spline-interpolation
- function GLTFCubicSplineInterpolant( parameterPositions, sampleValues, sampleSize, resultBuffer ) {
+ } else {
- Interpolant.call( this, parameterPositions, sampleValues, sampleSize, resultBuffer );
+ geometryKey = primitiveDef.indices + ':' + createAttributesKey( primitiveDef.attributes ) + ':' + primitiveDef.mode;
- }
+ }
- GLTFCubicSplineInterpolant.prototype = Object.create( Interpolant.prototype );
- GLTFCubicSplineInterpolant.prototype.constructor = GLTFCubicSplineInterpolant;
+ return geometryKey;
- GLTFCubicSplineInterpolant.prototype.copySampleValue_ = function ( index ) {
+ }
- // Copies a sample value to the result buffer. See description of glTF
- // CUBICSPLINE values layout in interpolate_() function below.
+ function createAttributesKey( attributes ) {
- var result = this.resultBuffer,
- values = this.sampleValues,
- valueSize = this.valueSize,
- offset = index * valueSize * 3 + valueSize;
+ var attributesKey = '';
- for ( var i = 0; i !== valueSize; i ++ ) {
+ var keys = Object.keys( attributes ).sort();
- result[ i ] = values[ offset + i ];
+ for ( var i = 0, il = keys.length; i < il; i ++ ) {
+
+ attributesKey += keys[ i ] + ':' + attributes[ keys[ i ] ] + ';';
}
- return result;
+ return attributesKey;
- };
+ }
- GLTFCubicSplineInterpolant.prototype.beforeStart_ = GLTFCubicSplineInterpolant.prototype.copySampleValue_;
+ /* GLTF PARSER */
- GLTFCubicSplineInterpolant.prototype.afterEnd_ = GLTFCubicSplineInterpolant.prototype.copySampleValue_;
+ function GLTFParser( json, options ) {
- GLTFCubicSplineInterpolant.prototype.interpolate_ = function ( i1, t0, t, t1 ) {
+ this.json = json || {};
+ this.extensions = {};
+ this.plugins = {};
+ this.options = options || {};
- var result = this.resultBuffer;
- var values = this.sampleValues;
- var stride = this.valueSize;
+ // loader object cache
+ this.cache = new GLTFRegistry();
- var stride2 = stride * 2;
- var stride3 = stride * 3;
+ // associations between Three.js objects and glTF elements
+ this.associations = new Map();
- var td = t1 - t0;
+ // BufferGeometry caching
+ this.primitiveCache = {};
- var p = ( t - t0 ) / td;
- var pp = p * p;
- var ppp = pp * p;
+ // Object3D instance caches
+ this.meshCache = { refs: {}, uses: {} };
+ this.cameraCache = { refs: {}, uses: {} };
+ this.lightCache = { refs: {}, uses: {} };
- var offset1 = i1 * stride3;
- var offset0 = offset1 - stride3;
+ // Track node names, to ensure no duplicates
+ this.nodeNamesUsed = {};
- var s2 = - 2 * ppp + 3 * pp;
- var s3 = ppp - pp;
- var s0 = 1 - s2;
- var s1 = s3 - pp + p;
+ // Use an ImageBitmapLoader if imageBitmaps are supported. Moves much of the
+ // expensive work of uploading a texture to the GPU off the main thread.
+ if ( typeof createImageBitmap !== 'undefined' && /Firefox/.test( navigator.userAgent ) === false ) {
- // Layout of keyframe output values for CUBICSPLINE animations:
- // [ inTangent_1, splineVertex_1, outTangent_1, inTangent_2, splineVertex_2, ... ]
- for ( var i = 0; i !== stride; i ++ ) {
+ this.textureLoader = new ImageBitmapLoader( this.options.manager );
- var p0 = values[ offset0 + i + stride ]; // splineVertex_k
- var m0 = values[ offset0 + i + stride2 ] * td; // outTangent_k * (t_k+1 - t_k)
- var p1 = values[ offset1 + i + stride ]; // splineVertex_k+1
- var m1 = values[ offset1 + i ] * td; // inTangent_k+1 * (t_k+1 - t_k)
+ } else {
- result[ i ] = s0 * p0 + s1 * m0 + s2 * p1 + s3 * m1;
+ this.textureLoader = new TextureLoader( this.options.manager );
}
- return result;
-
- };
+ this.textureLoader.setCrossOrigin( this.options.crossOrigin );
- /*********************************/
- /********** INTERNALS ************/
- /*********************************/
+ this.fileLoader = new FileLoader( this.options.manager );
+ this.fileLoader.setResponseType( 'arraybuffer' );
- /* CONSTANTS */
+ if ( this.options.crossOrigin === 'use-credentials' ) {
- var WEBGL_CONSTANTS = {
- FLOAT: 5126,
- //FLOAT_MAT2: 35674,
- FLOAT_MAT3: 35675,
- FLOAT_MAT4: 35676,
- FLOAT_VEC2: 35664,
- FLOAT_VEC3: 35665,
- FLOAT_VEC4: 35666,
- LINEAR: 9729,
- REPEAT: 10497,
- SAMPLER_2D: 35678,
- POINTS: 0,
- LINES: 1,
- LINE_LOOP: 2,
- LINE_STRIP: 3,
- TRIANGLES: 4,
- TRIANGLE_STRIP: 5,
- TRIANGLE_FAN: 6,
- UNSIGNED_BYTE: 5121,
- UNSIGNED_SHORT: 5123
- };
+ this.fileLoader.setWithCredentials( true );
- var WEBGL_COMPONENT_TYPES = {
- 5120: Int8Array,
- 5121: Uint8Array,
- 5122: Int16Array,
- 5123: Uint16Array,
- 5125: Uint32Array,
- 5126: Float32Array
- };
+ }
- var WEBGL_FILTERS = {
- 9728: NearestFilter,
- 9729: LinearFilter,
- 9984: NearestMipmapNearestFilter,
- 9985: LinearMipmapNearestFilter,
- 9986: NearestMipmapLinearFilter,
- 9987: LinearMipmapLinearFilter
- };
+ }
- var WEBGL_WRAPPINGS = {
- 33071: ClampToEdgeWrapping,
- 33648: MirroredRepeatWrapping,
- 10497: RepeatWrapping
- };
+ GLTFParser.prototype.setExtensions = function ( extensions ) {
- var WEBGL_TYPE_SIZES = {
- 'SCALAR': 1,
- 'VEC2': 2,
- 'VEC3': 3,
- 'VEC4': 4,
- 'MAT2': 4,
- 'MAT3': 9,
- 'MAT4': 16
- };
+ this.extensions = extensions;
- var ATTRIBUTES = {
- POSITION: 'position',
- NORMAL: 'normal',
- TANGENT: 'tangent',
- TEXCOORD_0: 'uv',
- TEXCOORD_1: 'uv2',
- COLOR_0: 'color',
- WEIGHTS_0: 'skinWeight',
- JOINTS_0: 'skinIndex',
};
- var PATH_PROPERTIES = {
- scale: 'scale',
- translation: 'position',
- rotation: 'quaternion',
- weights: 'morphTargetInfluences'
- };
+ GLTFParser.prototype.setPlugins = function ( plugins ) {
- var INTERPOLATION = {
- CUBICSPLINE: undefined, // We use a custom interpolant (GLTFCubicSplineInterpolation) for CUBICSPLINE tracks. Each
- // keyframe track will be initialized with a default interpolation type, then modified.
- LINEAR: InterpolateLinear,
- STEP: InterpolateDiscrete
- };
+ this.plugins = plugins;
- var ALPHA_MODES = {
- OPAQUE: 'OPAQUE',
- MASK: 'MASK',
- BLEND: 'BLEND'
};
- /* UTILITY FUNCTIONS */
-
- function resolveURL( url, path ) {
+ GLTFParser.prototype.parse = function ( onLoad, onError ) {
- // Invalid URL
- if ( typeof url !== 'string' || url === '' ) return '';
+ var parser = this;
+ var json = this.json;
+ var extensions = this.extensions;
- // Host Relative URL
- if ( /^https?:\/\//i.test( path ) && /^\//.test( url ) ) {
+ // Clear the loader cache
+ this.cache.removeAll();
- path = path.replace( /(^https?:\/\/[^\/]+).*/i, '$1' );
+ // Mark the special nodes/meshes in json for efficient parse
+ this._invokeAll( function ( ext ) {
- }
+ return ext._markDefs && ext._markDefs();
- // Absolute URL http://,https://,//
- if ( /^(https?:)?\/\//i.test( url ) ) return url;
+ } );
- // Data URI
- if ( /^data:.*,.*$/i.test( url ) ) return url;
+ Promise.all( [
- // Blob URL
- if ( /^blob:.*$/i.test( url ) ) return url;
+ this.getDependencies( 'scene' ),
+ this.getDependencies( 'animation' ),
+ this.getDependencies( 'camera' ),
- // Relative URL
- return path + url;
+ ] ).then( function ( dependencies ) {
- }
+ var result = {
+ scene: dependencies[ 0 ][ json.scene || 0 ],
+ scenes: dependencies[ 0 ],
+ animations: dependencies[ 1 ],
+ cameras: dependencies[ 2 ],
+ asset: json.asset,
+ parser: parser,
+ userData: {}
+ };
- /**
- * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#default-material
- */
- function createDefaultMaterial( cache ) {
+ addUnknownExtensionsToUserData( extensions, result, json );
- if ( cache[ 'DefaultMaterial' ] === undefined ) {
+ assignExtrasToUserData( result, json );
- cache[ 'DefaultMaterial' ] = new MeshStandardMaterial( {
- color: 0xFFFFFF,
- emissive: 0x000000,
- metalness: 1,
- roughness: 1,
- transparent: false,
- depthTest: true,
- side: FrontSide
- } );
+ onLoad( result );
- }
+ } ).catch( onError );
- return cache[ 'DefaultMaterial' ];
+ };
- }
+ /**
+ * Marks the special nodes/meshes in json for efficient parse.
+ */
+ GLTFParser.prototype._markDefs = function () {
- function addUnknownExtensionsToUserData( knownExtensions, object, objectDef ) {
+ var nodeDefs = this.json.nodes || [];
+ var skinDefs = this.json.skins || [];
+ var meshDefs = this.json.meshes || [];
- // Add unknown glTF extensions to an object's userData.
+ // Nothing in the node definition indicates whether it is a Bone or an
+ // Object3D. Use the skins' joint references to mark bones.
+ for ( var skinIndex = 0, skinLength = skinDefs.length; skinIndex < skinLength; skinIndex ++ ) {
- for ( var name in objectDef.extensions ) {
+ var joints = skinDefs[ skinIndex ].joints;
- if ( knownExtensions[ name ] === undefined ) {
+ for ( var i = 0, il = joints.length; i < il; i ++ ) {
- object.userData.gltfExtensions = object.userData.gltfExtensions || {};
- object.userData.gltfExtensions[ name ] = objectDef.extensions[ name ];
+ nodeDefs[ joints[ i ] ].isBone = true;
}
}
- }
+ // Iterate over all nodes, marking references to shared resources,
+ // as well as skeleton joints.
+ for ( var nodeIndex = 0, nodeLength = nodeDefs.length; nodeIndex < nodeLength; nodeIndex ++ ) {
- /**
- * @param {Object3D|Material|BufferGeometry} object
- * @param {GLTF.definition} gltfDef
- */
- function assignExtrasToUserData( object, gltfDef ) {
+ var nodeDef = nodeDefs[ nodeIndex ];
- if ( gltfDef.extras !== undefined ) {
+ if ( nodeDef.mesh !== undefined ) {
- if ( typeof gltfDef.extras === 'object' ) {
+ this._addNodeRef( this.meshCache, nodeDef.mesh );
- Object.assign( object.userData, gltfDef.extras );
+ // Nothing in the mesh definition indicates whether it is
+ // a SkinnedMesh or Mesh. Use the node's mesh reference
+ // to mark SkinnedMesh if node has skin.
+ if ( nodeDef.skin !== undefined ) {
- } else {
+ meshDefs[ nodeDef.mesh ].isSkinnedMesh = true;
- console.warn( 'THREE.GLTFLoader: Ignoring primitive type .extras, ' + gltfDef.extras );
+ }
+
+ }
+
+ if ( nodeDef.camera !== undefined ) {
+
+ this._addNodeRef( this.cameraCache, nodeDef.camera );
}
}
- }
+ };
/**
- * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#morph-targets
+ * Counts references to shared node / Object3D resources. These resources
+ * can be reused, or "instantiated", at multiple nodes in the scene
+ * hierarchy. Mesh, Camera, and Light instances are instantiated and must
+ * be marked. Non-scenegraph resources (like Materials, Geometries, and
+ * Textures) can be reused directly and are not marked here.
*
- * @param {BufferGeometry} geometry
- * @param {Array} targets
- * @param {GLTFParser} parser
- * @return {Promise}
+ * Example: CesiumMilkTruck sample model reuses "Wheel" meshes.
*/
- function addMorphTargets( geometry, targets, parser ) {
-
- var hasMorphPosition = false;
- var hasMorphNormal = false;
-
- for ( var i = 0, il = targets.length; i < il; i ++ ) {
+ GLTFParser.prototype._addNodeRef = function ( cache, index ) {
- var target = targets[ i ];
+ if ( index === undefined ) return;
- if ( target.POSITION !== undefined ) hasMorphPosition = true;
- if ( target.NORMAL !== undefined ) hasMorphNormal = true;
+ if ( cache.refs[ index ] === undefined ) {
- if ( hasMorphPosition && hasMorphNormal ) break;
+ cache.refs[ index ] = cache.uses[ index ] = 0;
}
- if ( ! hasMorphPosition && ! hasMorphNormal ) return Promise.resolve( geometry );
+ cache.refs[ index ] ++;
- var pendingPositionAccessors = [];
- var pendingNormalAccessors = [];
+ };
- for ( var i = 0, il = targets.length; i < il; i ++ ) {
+ /** Returns a reference to a shared resource, cloning it if necessary. */
+ GLTFParser.prototype._getNodeRef = function ( cache, index, object ) {
- var target = targets[ i ];
+ if ( cache.refs[ index ] <= 1 ) return object;
- if ( hasMorphPosition ) {
+ var ref = object.clone();
- var pendingAccessor = target.POSITION !== undefined
- ? parser.getDependency( 'accessor', target.POSITION )
- : geometry.attributes.position;
+ ref.name += '_instance_' + ( cache.uses[ index ] ++ );
- pendingPositionAccessors.push( pendingAccessor );
+ return ref;
- }
+ };
- if ( hasMorphNormal ) {
+ GLTFParser.prototype._invokeOne = function ( func ) {
- var pendingAccessor = target.NORMAL !== undefined
- ? parser.getDependency( 'accessor', target.NORMAL )
- : geometry.attributes.normal;
+ var extensions = Object.values( this.plugins );
+ extensions.push( this );
- pendingNormalAccessors.push( pendingAccessor );
+ for ( var i = 0; i < extensions.length; i ++ ) {
- }
+ var result = func( extensions[ i ] );
+
+ if ( result ) return result;
}
- return Promise.all( [
- Promise.all( pendingPositionAccessors ),
- Promise.all( pendingNormalAccessors )
- ] ).then( function ( accessors ) {
+ };
- var morphPositions = accessors[ 0 ];
- var morphNormals = accessors[ 1 ];
+ GLTFParser.prototype._invokeAll = function ( func ) {
- if ( hasMorphPosition ) geometry.morphAttributes.position = morphPositions;
- if ( hasMorphNormal ) geometry.morphAttributes.normal = morphNormals;
- geometry.morphTargetsRelative = true;
+ var extensions = Object.values( this.plugins );
+ extensions.unshift( this );
- return geometry;
+ var pending = [];
- } );
+ for ( var i = 0; i < extensions.length; i ++ ) {
- }
+ var result = func( extensions[ i ] );
+
+ if ( result ) pending.push( result );
+
+ }
+
+ return pending;
+
+ };
/**
- * @param {Mesh} mesh
- * @param {GLTF.Mesh} meshDef
+ * Requests the specified dependency asynchronously, with caching.
+ * @param {string} type
+ * @param {number} index
+ * @return {Promise}
*/
- function updateMorphTargets( mesh, meshDef ) {
+ GLTFParser.prototype.getDependency = function ( type, index ) {
- mesh.updateMorphTargets();
+ var cacheKey = type + ':' + index;
+ var dependency = this.cache.get( cacheKey );
- if ( meshDef.weights !== undefined ) {
+ if ( ! dependency ) {
- for ( var i = 0, il = meshDef.weights.length; i < il; i ++ ) {
+ switch ( type ) {
- mesh.morphTargetInfluences[ i ] = meshDef.weights[ i ];
+ case 'scene':
+ dependency = this.loadScene( index );
+ break;
- }
+ case 'node':
+ dependency = this.loadNode( index );
+ break;
- }
+ case 'mesh':
+ dependency = this._invokeOne( function ( ext ) {
- // .extras has user-defined data, so check that .extras.targetNames is an array.
- if ( meshDef.extras && Array.isArray( meshDef.extras.targetNames ) ) {
+ return ext.loadMesh && ext.loadMesh( index );
- var targetNames = meshDef.extras.targetNames;
+ } );
+ break;
- if ( mesh.morphTargetInfluences.length === targetNames.length ) {
+ case 'accessor':
+ dependency = this.loadAccessor( index );
+ break;
- mesh.morphTargetDictionary = {};
+ case 'bufferView':
+ dependency = this._invokeOne( function ( ext ) {
- for ( var i = 0, il = targetNames.length; i < il; i ++ ) {
+ return ext.loadBufferView && ext.loadBufferView( index );
- mesh.morphTargetDictionary[ targetNames[ i ] ] = i;
+ } );
+ break;
- }
+ case 'buffer':
+ dependency = this.loadBuffer( index );
+ break;
- } else {
+ case 'material':
+ dependency = this._invokeOne( function ( ext ) {
- console.warn( 'THREE.GLTFLoader: Invalid extras.targetNames length. Ignoring names.' );
+ return ext.loadMaterial && ext.loadMaterial( index );
+
+ } );
+ break;
+
+ case 'texture':
+ dependency = this._invokeOne( function ( ext ) {
+
+ return ext.loadTexture && ext.loadTexture( index );
+
+ } );
+ break;
+
+ case 'skin':
+ dependency = this.loadSkin( index );
+ break;
+
+ case 'animation':
+ dependency = this.loadAnimation( index );
+ break;
+
+ case 'camera':
+ dependency = this.loadCamera( index );
+ break;
+
+ default:
+ throw new Error( 'Unknown type: ' + type );
}
+ this.cache.add( cacheKey, dependency );
+
}
- }
+ return dependency;
- function createPrimitiveKey( primitiveDef ) {
+ };
- var dracoExtension = primitiveDef.extensions && primitiveDef.extensions[ EXTENSIONS.KHR_DRACO_MESH_COMPRESSION ];
- var geometryKey;
+ /**
+ * Requests all dependencies of the specified type asynchronously, with caching.
+ * @param {string} type
+ * @return {Promise>}
+ */
+ GLTFParser.prototype.getDependencies = function ( type ) {
- if ( dracoExtension ) {
+ var dependencies = this.cache.get( type );
- geometryKey = 'draco:' + dracoExtension.bufferView
- + ':' + dracoExtension.indices
- + ':' + createAttributesKey( dracoExtension.attributes );
+ if ( ! dependencies ) {
- } else {
+ var parser = this;
+ var defs = this.json[ type + ( type === 'mesh' ? 'es' : 's' ) ] || [];
- geometryKey = primitiveDef.indices + ':' + createAttributesKey( primitiveDef.attributes ) + ':' + primitiveDef.mode;
+ dependencies = Promise.all( defs.map( function ( def, index ) {
+
+ return parser.getDependency( type, index );
+
+ } ) );
+
+ this.cache.add( type, dependencies );
}
- return geometryKey;
+ return dependencies;
- }
+ };
- function createAttributesKey( attributes ) {
+ /**
+ * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#buffers-and-buffer-views
+ * @param {number} bufferIndex
+ * @return {Promise}
+ */
+ GLTFParser.prototype.loadBuffer = function ( bufferIndex ) {
+
+ var bufferDef = this.json.buffers[ bufferIndex ];
+ var loader = this.fileLoader;
+
+ if ( bufferDef.type && bufferDef.type !== 'arraybuffer' ) {
- var attributesKey = '';
+ throw new Error( 'THREE.GLTFLoader: ' + bufferDef.type + ' buffer type is not supported.' );
- var keys = Object.keys( attributes ).sort();
+ }
- for ( var i = 0, il = keys.length; i < il; i ++ ) {
+ // If present, GLB container is required to be the first buffer.
+ if ( bufferDef.uri === undefined && bufferIndex === 0 ) {
- attributesKey += keys[ i ] + ':' + attributes[ keys[ i ] ] + ';';
+ return Promise.resolve( this.extensions[ EXTENSIONS.KHR_BINARY_GLTF ].body );
}
- return attributesKey;
-
- }
+ var options = this.options;
- /* GLTF PARSER */
+ return new Promise( function ( resolve, reject ) {
- function GLTFParser( json, options ) {
+ loader.load( resolveURL( bufferDef.uri, options.path ), resolve, undefined, function () {
- this.json = json || {};
- this.extensions = {};
- this.plugins = {};
- this.options = options || {};
+ reject( new Error( 'THREE.GLTFLoader: Failed to load buffer "' + bufferDef.uri + '".' ) );
- // loader object cache
- this.cache = new GLTFRegistry();
+ } );
- // associations between Three.js objects and glTF elements
- this.associations = new Map();
+ } );
- // BufferGeometry caching
- this.primitiveCache = {};
+ };
- // Object3D instance caches
- this.meshCache = { refs: {}, uses: {} };
- this.cameraCache = { refs: {}, uses: {} };
- this.lightCache = { refs: {}, uses: {} };
+ /**
+ * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#buffers-and-buffer-views
+ * @param {number} bufferViewIndex
+ * @return {Promise}
+ */
+ GLTFParser.prototype.loadBufferView = function ( bufferViewIndex ) {
- // Track node names, to ensure no duplicates
- this.nodeNamesUsed = {};
+ var bufferViewDef = this.json.bufferViews[ bufferViewIndex ];
- // Use an ImageBitmapLoader if imageBitmaps are supported. Moves much of the
- // expensive work of uploading a texture to the GPU off the main thread.
- if ( typeof createImageBitmap !== 'undefined' && /Firefox/.test( navigator.userAgent ) === false ) {
+ return this.getDependency( 'buffer', bufferViewDef.buffer ).then( function ( buffer ) {
- this.textureLoader = new ImageBitmapLoader( this.options.manager );
+ var byteLength = bufferViewDef.byteLength || 0;
+ var byteOffset = bufferViewDef.byteOffset || 0;
+ return buffer.slice( byteOffset, byteOffset + byteLength );
- } else {
+ } );
- this.textureLoader = new TextureLoader( this.options.manager );
+ };
- }
+ /**
+ * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#accessors
+ * @param {number} accessorIndex
+ * @return {Promise}
+ */
+ GLTFParser.prototype.loadAccessor = function ( accessorIndex ) {
- this.textureLoader.setCrossOrigin( this.options.crossOrigin );
+ var parser = this;
+ var json = this.json;
- this.fileLoader = new FileLoader( this.options.manager );
- this.fileLoader.setResponseType( 'arraybuffer' );
+ var accessorDef = this.json.accessors[ accessorIndex ];
- if ( this.options.crossOrigin === 'use-credentials' ) {
+ if ( accessorDef.bufferView === undefined && accessorDef.sparse === undefined ) {
- this.fileLoader.setWithCredentials( true );
+ // Ignore empty accessors, which may be used to declare runtime
+ // information about attributes coming from another source (e.g. Draco
+ // compression extension).
+ return Promise.resolve( null );
}
- }
+ var pendingBufferViews = [];
- GLTFParser.prototype.setExtensions = function ( extensions ) {
+ if ( accessorDef.bufferView !== undefined ) {
- this.extensions = extensions;
+ pendingBufferViews.push( this.getDependency( 'bufferView', accessorDef.bufferView ) );
- };
+ } else {
- GLTFParser.prototype.setPlugins = function ( plugins ) {
+ pendingBufferViews.push( null );
- this.plugins = plugins;
+ }
- };
+ if ( accessorDef.sparse !== undefined ) {
- GLTFParser.prototype.parse = function ( onLoad, onError ) {
+ pendingBufferViews.push( this.getDependency( 'bufferView', accessorDef.sparse.indices.bufferView ) );
+ pendingBufferViews.push( this.getDependency( 'bufferView', accessorDef.sparse.values.bufferView ) );
- var parser = this;
- var json = this.json;
- var extensions = this.extensions;
+ }
- // Clear the loader cache
- this.cache.removeAll();
+ return Promise.all( pendingBufferViews ).then( function ( bufferViews ) {
- // Mark the special nodes/meshes in json for efficient parse
- this._invokeAll( function ( ext ) {
+ var bufferView = bufferViews[ 0 ];
- return ext._markDefs && ext._markDefs();
+ var itemSize = WEBGL_TYPE_SIZES[ accessorDef.type ];
+ var TypedArray = WEBGL_COMPONENT_TYPES[ accessorDef.componentType ];
- } );
+ // For VEC3: itemSize is 3, elementBytes is 4, itemBytes is 12.
+ var elementBytes = TypedArray.BYTES_PER_ELEMENT;
+ var itemBytes = elementBytes * itemSize;
+ var byteOffset = accessorDef.byteOffset || 0;
+ var byteStride = accessorDef.bufferView !== undefined ? json.bufferViews[ accessorDef.bufferView ].byteStride : undefined;
+ var normalized = accessorDef.normalized === true;
+ var array, bufferAttribute;
- Promise.all( [
+ // The buffer is not interleaved if the stride is the item size in bytes.
+ if ( byteStride && byteStride !== itemBytes ) {
- this.getDependencies( 'scene' ),
- this.getDependencies( 'animation' ),
- this.getDependencies( 'camera' ),
+ // Each "slice" of the buffer, as defined by 'count' elements of 'byteStride' bytes, gets its own InterleavedBuffer
+ // This makes sure that IBA.count reflects accessor.count properly
+ var ibSlice = Math.floor( byteOffset / byteStride );
+ var ibCacheKey = 'InterleavedBuffer:' + accessorDef.bufferView + ':' + accessorDef.componentType + ':' + ibSlice + ':' + accessorDef.count;
+ var ib = parser.cache.get( ibCacheKey );
- ] ).then( function ( dependencies ) {
+ if ( ! ib ) {
- var result = {
- scene: dependencies[ 0 ][ json.scene || 0 ],
- scenes: dependencies[ 0 ],
- animations: dependencies[ 1 ],
- cameras: dependencies[ 2 ],
- asset: json.asset,
- parser: parser,
- userData: {}
- };
+ array = new TypedArray( bufferView, ibSlice * byteStride, accessorDef.count * byteStride / elementBytes );
- addUnknownExtensionsToUserData( extensions, result, json );
+ // Integer parameters to IB/IBA are in array elements, not bytes.
+ ib = new InterleavedBuffer( array, byteStride / elementBytes );
- assignExtrasToUserData( result, json );
+ parser.cache.add( ibCacheKey, ib );
- onLoad( result );
+ }
- } ).catch( onError );
+ bufferAttribute = new InterleavedBufferAttribute( ib, itemSize, ( byteOffset % byteStride ) / elementBytes, normalized );
- };
+ } else {
- /**
- * Marks the special nodes/meshes in json for efficient parse.
- */
- GLTFParser.prototype._markDefs = function () {
+ if ( bufferView === null ) {
- var nodeDefs = this.json.nodes || [];
- var skinDefs = this.json.skins || [];
- var meshDefs = this.json.meshes || [];
+ array = new TypedArray( accessorDef.count * itemSize );
- // Nothing in the node definition indicates whether it is a Bone or an
- // Object3D. Use the skins' joint references to mark bones.
- for ( var skinIndex = 0, skinLength = skinDefs.length; skinIndex < skinLength; skinIndex ++ ) {
+ } else {
- var joints = skinDefs[ skinIndex ].joints;
+ array = new TypedArray( bufferView, byteOffset, accessorDef.count * itemSize );
- for ( var i = 0, il = joints.length; i < il; i ++ ) {
+ }
- nodeDefs[ joints[ i ] ].isBone = true;
+ bufferAttribute = new BufferAttribute( array, itemSize, normalized );
}
- }
-
- // Iterate over all nodes, marking references to shared resources,
- // as well as skeleton joints.
- for ( var nodeIndex = 0, nodeLength = nodeDefs.length; nodeIndex < nodeLength; nodeIndex ++ ) {
+ // https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#sparse-accessors
+ if ( accessorDef.sparse !== undefined ) {
- var nodeDef = nodeDefs[ nodeIndex ];
+ var itemSizeIndices = WEBGL_TYPE_SIZES.SCALAR;
+ var TypedArrayIndices = WEBGL_COMPONENT_TYPES[ accessorDef.sparse.indices.componentType ];
- if ( nodeDef.mesh !== undefined ) {
+ var byteOffsetIndices = accessorDef.sparse.indices.byteOffset || 0;
+ var byteOffsetValues = accessorDef.sparse.values.byteOffset || 0;
- this._addNodeRef( this.meshCache, nodeDef.mesh );
+ var sparseIndices = new TypedArrayIndices( bufferViews[ 1 ], byteOffsetIndices, accessorDef.sparse.count * itemSizeIndices );
+ var sparseValues = new TypedArray( bufferViews[ 2 ], byteOffsetValues, accessorDef.sparse.count * itemSize );
- // Nothing in the mesh definition indicates whether it is
- // a SkinnedMesh or Mesh. Use the node's mesh reference
- // to mark SkinnedMesh if node has skin.
- if ( nodeDef.skin !== undefined ) {
+ if ( bufferView !== null ) {
- meshDefs[ nodeDef.mesh ].isSkinnedMesh = true;
+ // Avoid modifying the original ArrayBuffer, if the bufferView wasn't initialized with zeroes.
+ bufferAttribute = new BufferAttribute( bufferAttribute.array.slice(), bufferAttribute.itemSize, bufferAttribute.normalized );
}
- }
+ for ( var i = 0, il = sparseIndices.length; i < il; i ++ ) {
- if ( nodeDef.camera !== undefined ) {
+ var index = sparseIndices[ i ];
- this._addNodeRef( this.cameraCache, nodeDef.camera );
+ bufferAttribute.setX( index, sparseValues[ i * itemSize ] );
+ if ( itemSize >= 2 ) bufferAttribute.setY( index, sparseValues[ i * itemSize + 1 ] );
+ if ( itemSize >= 3 ) bufferAttribute.setZ( index, sparseValues[ i * itemSize + 2 ] );
+ if ( itemSize >= 4 ) bufferAttribute.setW( index, sparseValues[ i * itemSize + 3 ] );
+ if ( itemSize >= 5 ) throw new Error( 'THREE.GLTFLoader: Unsupported itemSize in sparse BufferAttribute.' );
+
+ }
}
- }
+ return bufferAttribute;
+
+ } );
};
/**
- * Counts references to shared node / Object3D resources. These resources
- * can be reused, or "instantiated", at multiple nodes in the scene
- * hierarchy. Mesh, Camera, and Light instances are instantiated and must
- * be marked. Non-scenegraph resources (like Materials, Geometries, and
- * Textures) can be reused directly and are not marked here.
- *
- * Example: CesiumMilkTruck sample model reuses "Wheel" meshes.
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#textures
+ * @param {number} textureIndex
+ * @return {Promise}
*/
- GLTFParser.prototype._addNodeRef = function ( cache, index ) {
-
- if ( index === undefined ) return;
-
- if ( cache.refs[ index ] === undefined ) {
+ GLTFParser.prototype.loadTexture = function ( textureIndex ) {
- cache.refs[ index ] = cache.uses[ index ] = 0;
+ var parser = this;
+ var json = this.json;
+ var options = this.options;
- }
+ var textureDef = json.textures[ textureIndex ];
- cache.refs[ index ] ++;
+ var textureExtensions = textureDef.extensions || {};
- };
+ var source;
- /** Returns a reference to a shared resource, cloning it if necessary. */
- GLTFParser.prototype._getNodeRef = function ( cache, index, object ) {
+ if ( textureExtensions[ EXTENSIONS.MSFT_TEXTURE_DDS ] ) {
- if ( cache.refs[ index ] <= 1 ) return object;
+ source = json.images[ textureExtensions[ EXTENSIONS.MSFT_TEXTURE_DDS ].source ];
- var ref = object.clone();
+ } else {
- ref.name += '_instance_' + ( cache.uses[ index ] ++ );
+ source = json.images[ textureDef.source ];
- return ref;
+ }
- };
+ var loader;
- GLTFParser.prototype._invokeOne = function ( func ) {
+ if ( source.uri ) {
- var extensions = Object.values( this.plugins );
- extensions.push( this );
+ loader = options.manager.getHandler( source.uri );
- for ( var i = 0; i < extensions.length; i ++ ) {
+ }
- var result = func( extensions[ i ] );
+ if ( ! loader ) {
- if ( result ) return result;
+ loader = textureExtensions[ EXTENSIONS.MSFT_TEXTURE_DDS ]
+ ? parser.extensions[ EXTENSIONS.MSFT_TEXTURE_DDS ].ddsLoader
+ : this.textureLoader;
}
+ return this.loadTextureImage( textureIndex, source, loader );
+
};
- GLTFParser.prototype._invokeAll = function ( func ) {
+ GLTFParser.prototype.loadTextureImage = function ( textureIndex, source, loader ) {
- var extensions = Object.values( this.plugins );
- extensions.unshift( this );
+ var parser = this;
+ var json = this.json;
+ var options = this.options;
- var pending = [];
+ var textureDef = json.textures[ textureIndex ];
- for ( var i = 0; i < extensions.length; i ++ ) {
+ var URL = self.URL || self.webkitURL;
- var result = func( extensions[ i ] );
+ var sourceURI = source.uri;
+ var isObjectURL = false;
+ var hasAlpha = true;
- if ( result ) pending.push( result );
+ if ( source.mimeType === 'image/jpeg' ) hasAlpha = false;
- }
+ if ( source.bufferView !== undefined ) {
- return pending;
+ // Load binary image data from bufferView, if provided.
- };
+ sourceURI = parser.getDependency( 'bufferView', source.bufferView ).then( function ( bufferView ) {
- /**
- * Requests the specified dependency asynchronously, with caching.
- * @param {string} type
- * @param {number} index
- * @return {Promise}
- */
- GLTFParser.prototype.getDependency = function ( type, index ) {
+ if ( source.mimeType === 'image/png' ) {
- var cacheKey = type + ':' + index;
- var dependency = this.cache.get( cacheKey );
+ // Inspect the PNG 'IHDR' chunk to determine whether the image could have an
+ // alpha channel. This check is conservative — the image could have an alpha
+ // channel with all values == 1, and the indexed type (colorType == 3) only
+ // sometimes contains alpha.
+ //
+ // https://en.wikipedia.org/wiki/Portable_Network_Graphics#File_header
+ var colorType = new DataView( bufferView, 25, 1 ).getUint8( 0, false );
+ hasAlpha = colorType === 6 || colorType === 4 || colorType === 3;
- if ( ! dependency ) {
+ }
- switch ( type ) {
+ isObjectURL = true;
+ var blob = new Blob( [ bufferView ], { type: source.mimeType } );
+ sourceURI = URL.createObjectURL( blob );
+ return sourceURI;
- case 'scene':
- dependency = this.loadScene( index );
- break;
+ } );
- case 'node':
- dependency = this.loadNode( index );
- break;
+ }
- case 'mesh':
- dependency = this._invokeOne( function ( ext ) {
+ return Promise.resolve( sourceURI ).then( function ( sourceURI ) {
- return ext.loadMesh && ext.loadMesh( index );
+ return new Promise( function ( resolve, reject ) {
- } );
- break;
+ var onLoad = resolve;
- case 'accessor':
- dependency = this.loadAccessor( index );
- break;
+ if ( loader.isImageBitmapLoader === true ) {
- case 'bufferView':
- dependency = this._invokeOne( function ( ext ) {
+ onLoad = function ( imageBitmap ) {
- return ext.loadBufferView && ext.loadBufferView( index );
+ resolve( new CanvasTexture( imageBitmap ) );
- } );
- break;
+ };
- case 'buffer':
- dependency = this.loadBuffer( index );
- break;
+ }
- case 'material':
- dependency = this._invokeOne( function ( ext ) {
+ loader.load( resolveURL( sourceURI, options.path ), onLoad, undefined, reject );
- return ext.loadMaterial && ext.loadMaterial( index );
+ } );
- } );
- break;
+ } ).then( function ( texture ) {
- case 'texture':
- dependency = this._invokeOne( function ( ext ) {
+ // Clean up resources and configure Texture.
- return ext.loadTexture && ext.loadTexture( index );
+ if ( isObjectURL === true ) {
- } );
- break;
+ URL.revokeObjectURL( sourceURI );
- case 'skin':
- dependency = this.loadSkin( index );
- break;
+ }
- case 'animation':
- dependency = this.loadAnimation( index );
- break;
+ texture.flipY = false;
- case 'camera':
- dependency = this.loadCamera( index );
- break;
+ if ( textureDef.name ) texture.name = textureDef.name;
- default:
- throw new Error( 'Unknown type: ' + type );
+ // When there is definitely no alpha channel in the texture, set RGBFormat to save space.
+ if ( ! hasAlpha ) texture.format = RGBFormat;
- }
+ var samplers = json.samplers || {};
+ var sampler = samplers[ textureDef.sampler ] || {};
- this.cache.add( cacheKey, dependency );
+ texture.magFilter = WEBGL_FILTERS[ sampler.magFilter ] || LinearFilter;
+ texture.minFilter = WEBGL_FILTERS[ sampler.minFilter ] || LinearMipmapLinearFilter;
+ texture.wrapS = WEBGL_WRAPPINGS[ sampler.wrapS ] || RepeatWrapping;
+ texture.wrapT = WEBGL_WRAPPINGS[ sampler.wrapT ] || RepeatWrapping;
- }
+ parser.associations.set( texture, {
+ type: 'textures',
+ index: textureIndex
+ } );
- return dependency;
+ return texture;
+
+ } );
};
/**
- * Requests all dependencies of the specified type asynchronously, with caching.
- * @param {string} type
- * @return {Promise>}
+ * Asynchronously assigns a texture to the given material parameters.
+ * @param {Object} materialParams
+ * @param {string} mapName
+ * @param {Object} mapDef
+ * @return {Promise}
*/
- GLTFParser.prototype.getDependencies = function ( type ) {
+ GLTFParser.prototype.assignTexture = function ( materialParams, mapName, mapDef ) {
- var dependencies = this.cache.get( type );
+ var parser = this;
- if ( ! dependencies ) {
+ return this.getDependency( 'texture', mapDef.index ).then( function ( texture ) {
- var parser = this;
- var defs = this.json[ type + ( type === 'mesh' ? 'es' : 's' ) ] || [];
+ // Materials sample aoMap from UV set 1 and other maps from UV set 0 - this can't be configured
+ // However, we will copy UV set 0 to UV set 1 on demand for aoMap
+ if ( mapDef.texCoord !== undefined && mapDef.texCoord != 0 && ! ( mapName === 'aoMap' && mapDef.texCoord == 1 ) ) {
- dependencies = Promise.all( defs.map( function ( def, index ) {
+ console.warn( 'THREE.GLTFLoader: Custom UV set ' + mapDef.texCoord + ' for texture ' + mapName + ' not yet supported.' );
- return parser.getDependency( type, index );
+ }
- } ) );
+ if ( parser.extensions[ EXTENSIONS.KHR_TEXTURE_TRANSFORM ] ) {
- this.cache.add( type, dependencies );
+ var transform = mapDef.extensions !== undefined ? mapDef.extensions[ EXTENSIONS.KHR_TEXTURE_TRANSFORM ] : undefined;
- }
+ if ( transform ) {
- return dependencies;
+ var gltfReference = parser.associations.get( texture );
+ texture = parser.extensions[ EXTENSIONS.KHR_TEXTURE_TRANSFORM ].extendTexture( texture, transform );
+ parser.associations.set( texture, gltfReference );
+
+ }
+
+ }
+
+ materialParams[ mapName ] = texture;
+
+ } );
};
/**
- * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#buffers-and-buffer-views
- * @param {number} bufferIndex
- * @return {Promise}
+ * Assigns final material to a Mesh, Line, or Points instance. The instance
+ * already has a material (generated from the glTF material options alone)
+ * but reuse of the same glTF material may require multiple threejs materials
+ * to accomodate different primitive types, defines, etc. New materials will
+ * be created if necessary, and reused from a cache.
+ * @param {Object3D} mesh Mesh, Line, or Points instance.
*/
- GLTFParser.prototype.loadBuffer = function ( bufferIndex ) {
+ GLTFParser.prototype.assignFinalMaterial = function ( mesh ) {
- var bufferDef = this.json.buffers[ bufferIndex ];
- var loader = this.fileLoader;
+ var geometry = mesh.geometry;
+ var material = mesh.material;
- if ( bufferDef.type && bufferDef.type !== 'arraybuffer' ) {
+ var useVertexTangents = geometry.attributes.tangent !== undefined;
+ var useVertexColors = geometry.attributes.color !== undefined;
+ var useFlatShading = geometry.attributes.normal === undefined;
+ var useSkinning = mesh.isSkinnedMesh === true;
+ var useMorphTargets = Object.keys( geometry.morphAttributes ).length > 0;
+ var useMorphNormals = useMorphTargets && geometry.morphAttributes.normal !== undefined;
- throw new Error( 'THREE.GLTFLoader: ' + bufferDef.type + ' buffer type is not supported.' );
+ if ( mesh.isPoints ) {
- }
+ var cacheKey = 'PointsMaterial:' + material.uuid;
- // If present, GLB container is required to be the first buffer.
- if ( bufferDef.uri === undefined && bufferIndex === 0 ) {
+ var pointsMaterial = this.cache.get( cacheKey );
- return Promise.resolve( this.extensions[ EXTENSIONS.KHR_BINARY_GLTF ].body );
+ if ( ! pointsMaterial ) {
- }
+ pointsMaterial = new PointsMaterial();
+ Material.prototype.copy.call( pointsMaterial, material );
+ pointsMaterial.color.copy( material.color );
+ pointsMaterial.map = material.map;
+ pointsMaterial.sizeAttenuation = false; // glTF spec says points should be 1px
- var options = this.options;
+ this.cache.add( cacheKey, pointsMaterial );
- return new Promise( function ( resolve, reject ) {
+ }
- loader.load( resolveURL( bufferDef.uri, options.path ), resolve, undefined, function () {
+ material = pointsMaterial;
- reject( new Error( 'THREE.GLTFLoader: Failed to load buffer "' + bufferDef.uri + '".' ) );
+ } else if ( mesh.isLine ) {
- } );
+ var cacheKey = 'LineBasicMaterial:' + material.uuid;
- } );
+ var lineMaterial = this.cache.get( cacheKey );
- };
+ if ( ! lineMaterial ) {
- /**
- * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#buffers-and-buffer-views
- * @param {number} bufferViewIndex
- * @return {Promise}
- */
- GLTFParser.prototype.loadBufferView = function ( bufferViewIndex ) {
+ lineMaterial = new LineBasicMaterial();
+ Material.prototype.copy.call( lineMaterial, material );
+ lineMaterial.color.copy( material.color );
- var bufferViewDef = this.json.bufferViews[ bufferViewIndex ];
+ this.cache.add( cacheKey, lineMaterial );
- return this.getDependency( 'buffer', bufferViewDef.buffer ).then( function ( buffer ) {
+ }
+
+ material = lineMaterial;
+
+ }
+
+ // Clone the material if it will be modified
+ if ( useVertexTangents || useVertexColors || useFlatShading || useSkinning || useMorphTargets ) {
+
+ var cacheKey = 'ClonedMaterial:' + material.uuid + ':';
+
+ if ( material.isGLTFSpecularGlossinessMaterial ) cacheKey += 'specular-glossiness:';
+ if ( useSkinning ) cacheKey += 'skinning:';
+ if ( useVertexTangents ) cacheKey += 'vertex-tangents:';
+ if ( useVertexColors ) cacheKey += 'vertex-colors:';
+ if ( useFlatShading ) cacheKey += 'flat-shading:';
+ if ( useMorphTargets ) cacheKey += 'morph-targets:';
+ if ( useMorphNormals ) cacheKey += 'morph-normals:';
- var byteLength = bufferViewDef.byteLength || 0;
- var byteOffset = bufferViewDef.byteOffset || 0;
- return buffer.slice( byteOffset, byteOffset + byteLength );
+ var cachedMaterial = this.cache.get( cacheKey );
- } );
+ if ( ! cachedMaterial ) {
- };
+ cachedMaterial = material.clone();
- /**
- * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#accessors
- * @param {number} accessorIndex
- * @return {Promise}
- */
- GLTFParser.prototype.loadAccessor = function ( accessorIndex ) {
+ if ( useSkinning ) cachedMaterial.skinning = true;
+ if ( useVertexTangents ) cachedMaterial.vertexTangents = true;
+ if ( useVertexColors ) cachedMaterial.vertexColors = true;
+ if ( useFlatShading ) cachedMaterial.flatShading = true;
+ if ( useMorphTargets ) cachedMaterial.morphTargets = true;
+ if ( useMorphNormals ) cachedMaterial.morphNormals = true;
- var parser = this;
- var json = this.json;
+ this.cache.add( cacheKey, cachedMaterial );
- var accessorDef = this.json.accessors[ accessorIndex ];
+ this.associations.set( cachedMaterial, this.associations.get( material ) );
- if ( accessorDef.bufferView === undefined && accessorDef.sparse === undefined ) {
+ }
- // Ignore empty accessors, which may be used to declare runtime
- // information about attributes coming from another source (e.g. Draco
- // compression extension).
- return Promise.resolve( null );
+ material = cachedMaterial;
}
- var pendingBufferViews = [];
+ // workarounds for mesh and geometry
- if ( accessorDef.bufferView !== undefined ) {
+ if ( material.aoMap && geometry.attributes.uv2 === undefined && geometry.attributes.uv !== undefined ) {
- pendingBufferViews.push( this.getDependency( 'bufferView', accessorDef.bufferView ) );
+ geometry.setAttribute( 'uv2', geometry.attributes.uv );
- } else {
+ }
- pendingBufferViews.push( null );
+ // https://github.com/mrdoob/three.js/issues/11438#issuecomment-507003995
+ if ( material.normalScale && ! useVertexTangents ) {
+
+ material.normalScale.y = - material.normalScale.y;
}
- if ( accessorDef.sparse !== undefined ) {
+ if ( material.clearcoatNormalScale && ! useVertexTangents ) {
- pendingBufferViews.push( this.getDependency( 'bufferView', accessorDef.sparse.indices.bufferView ) );
- pendingBufferViews.push( this.getDependency( 'bufferView', accessorDef.sparse.values.bufferView ) );
+ material.clearcoatNormalScale.y = - material.clearcoatNormalScale.y;
}
- return Promise.all( pendingBufferViews ).then( function ( bufferViews ) {
+ mesh.material = material;
- var bufferView = bufferViews[ 0 ];
+ };
- var itemSize = WEBGL_TYPE_SIZES[ accessorDef.type ];
- var TypedArray = WEBGL_COMPONENT_TYPES[ accessorDef.componentType ];
+ GLTFParser.prototype.getMaterialType = function ( /* materialIndex */ ) {
- // For VEC3: itemSize is 3, elementBytes is 4, itemBytes is 12.
- var elementBytes = TypedArray.BYTES_PER_ELEMENT;
- var itemBytes = elementBytes * itemSize;
- var byteOffset = accessorDef.byteOffset || 0;
- var byteStride = accessorDef.bufferView !== undefined ? json.bufferViews[ accessorDef.bufferView ].byteStride : undefined;
- var normalized = accessorDef.normalized === true;
- var array, bufferAttribute;
+ return MeshStandardMaterial;
- // The buffer is not interleaved if the stride is the item size in bytes.
- if ( byteStride && byteStride !== itemBytes ) {
+ };
- // Each "slice" of the buffer, as defined by 'count' elements of 'byteStride' bytes, gets its own InterleavedBuffer
- // This makes sure that IBA.count reflects accessor.count properly
- var ibSlice = Math.floor( byteOffset / byteStride );
- var ibCacheKey = 'InterleavedBuffer:' + accessorDef.bufferView + ':' + accessorDef.componentType + ':' + ibSlice + ':' + accessorDef.count;
- var ib = parser.cache.get( ibCacheKey );
+ /**
+ * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#materials
+ * @param {number} materialIndex
+ * @return {Promise}
+ */
+ GLTFParser.prototype.loadMaterial = function ( materialIndex ) {
- if ( ! ib ) {
+ var parser = this;
+ var json = this.json;
+ var extensions = this.extensions;
+ var materialDef = json.materials[ materialIndex ];
- array = new TypedArray( bufferView, ibSlice * byteStride, accessorDef.count * byteStride / elementBytes );
+ var materialType;
+ var materialParams = {};
+ var materialExtensions = materialDef.extensions || {};
- // Integer parameters to IB/IBA are in array elements, not bytes.
- ib = new InterleavedBuffer( array, byteStride / elementBytes );
+ var pending = [];
- parser.cache.add( ibCacheKey, ib );
+ if ( materialExtensions[ EXTENSIONS.KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS ] ) {
- }
+ var sgExtension = extensions[ EXTENSIONS.KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS ];
+ materialType = sgExtension.getMaterialType();
+ pending.push( sgExtension.extendParams( materialParams, materialDef, parser ) );
- bufferAttribute = new InterleavedBufferAttribute( ib, itemSize, ( byteOffset % byteStride ) / elementBytes, normalized );
+ } else if ( materialExtensions[ EXTENSIONS.KHR_MATERIALS_UNLIT ] ) {
- } else {
+ var kmuExtension = extensions[ EXTENSIONS.KHR_MATERIALS_UNLIT ];
+ materialType = kmuExtension.getMaterialType();
+ pending.push( kmuExtension.extendParams( materialParams, materialDef, parser ) );
- if ( bufferView === null ) {
+ } else {
- array = new TypedArray( accessorDef.count * itemSize );
+ // Specification:
+ // https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#metallic-roughness-material
- } else {
+ var metallicRoughness = materialDef.pbrMetallicRoughness || {};
- array = new TypedArray( bufferView, byteOffset, accessorDef.count * itemSize );
+ materialParams.color = new Color( 1.0, 1.0, 1.0 );
+ materialParams.opacity = 1.0;
- }
+ if ( Array.isArray( metallicRoughness.baseColorFactor ) ) {
- bufferAttribute = new BufferAttribute( array, itemSize, normalized );
+ var array = metallicRoughness.baseColorFactor;
- }
+ materialParams.color.fromArray( array );
+ materialParams.opacity = array[ 3 ];
- // https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#sparse-accessors
- if ( accessorDef.sparse !== undefined ) {
+ }
- var itemSizeIndices = WEBGL_TYPE_SIZES.SCALAR;
- var TypedArrayIndices = WEBGL_COMPONENT_TYPES[ accessorDef.sparse.indices.componentType ];
+ if ( metallicRoughness.baseColorTexture !== undefined ) {
- var byteOffsetIndices = accessorDef.sparse.indices.byteOffset || 0;
- var byteOffsetValues = accessorDef.sparse.values.byteOffset || 0;
+ pending.push( parser.assignTexture( materialParams, 'map', metallicRoughness.baseColorTexture ) );
- var sparseIndices = new TypedArrayIndices( bufferViews[ 1 ], byteOffsetIndices, accessorDef.sparse.count * itemSizeIndices );
- var sparseValues = new TypedArray( bufferViews[ 2 ], byteOffsetValues, accessorDef.sparse.count * itemSize );
+ }
- if ( bufferView !== null ) {
+ materialParams.metalness = metallicRoughness.metallicFactor !== undefined ? metallicRoughness.metallicFactor : 1.0;
+ materialParams.roughness = metallicRoughness.roughnessFactor !== undefined ? metallicRoughness.roughnessFactor : 1.0;
- // Avoid modifying the original ArrayBuffer, if the bufferView wasn't initialized with zeroes.
- bufferAttribute = new BufferAttribute( bufferAttribute.array.slice(), bufferAttribute.itemSize, bufferAttribute.normalized );
+ if ( metallicRoughness.metallicRoughnessTexture !== undefined ) {
- }
+ pending.push( parser.assignTexture( materialParams, 'metalnessMap', metallicRoughness.metallicRoughnessTexture ) );
+ pending.push( parser.assignTexture( materialParams, 'roughnessMap', metallicRoughness.metallicRoughnessTexture ) );
- for ( var i = 0, il = sparseIndices.length; i < il; i ++ ) {
+ }
- var index = sparseIndices[ i ];
+ materialType = this._invokeOne( function ( ext ) {
- bufferAttribute.setX( index, sparseValues[ i * itemSize ] );
- if ( itemSize >= 2 ) bufferAttribute.setY( index, sparseValues[ i * itemSize + 1 ] );
- if ( itemSize >= 3 ) bufferAttribute.setZ( index, sparseValues[ i * itemSize + 2 ] );
- if ( itemSize >= 4 ) bufferAttribute.setW( index, sparseValues[ i * itemSize + 3 ] );
- if ( itemSize >= 5 ) throw new Error( 'THREE.GLTFLoader: Unsupported itemSize in sparse BufferAttribute.' );
+ return ext.getMaterialType && ext.getMaterialType( materialIndex );
- }
+ } );
- }
+ pending.push( Promise.all( this._invokeAll( function ( ext ) {
- return bufferAttribute;
+ return ext.extendMaterialParams && ext.extendMaterialParams( materialIndex, materialParams );
- } );
+ } ) ) );
- };
+ }
- /**
- * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#textures
- * @param {number} textureIndex
- * @return {Promise}
- */
- GLTFParser.prototype.loadTexture = function ( textureIndex ) {
+ if ( materialDef.doubleSided === true ) {
- var parser = this;
- var json = this.json;
- var options = this.options;
+ materialParams.side = DoubleSide;
- var textureDef = json.textures[ textureIndex ];
+ }
- var textureExtensions = textureDef.extensions || {};
+ var alphaMode = materialDef.alphaMode || ALPHA_MODES.OPAQUE;
- var source;
+ if ( alphaMode === ALPHA_MODES.BLEND ) {
- if ( textureExtensions[ EXTENSIONS.MSFT_TEXTURE_DDS ] ) {
+ materialParams.transparent = true;
- source = json.images[ textureExtensions[ EXTENSIONS.MSFT_TEXTURE_DDS ].source ];
+ // See: https://github.com/mrdoob/three.js/issues/17706
+ materialParams.depthWrite = false;
} else {
- source = json.images[ textureDef.source ];
-
- }
+ materialParams.transparent = false;
- var loader;
+ if ( alphaMode === ALPHA_MODES.MASK ) {
- if ( source.uri ) {
+ materialParams.alphaTest = materialDef.alphaCutoff !== undefined ? materialDef.alphaCutoff : 0.5;
- loader = options.manager.getHandler( source.uri );
+ }
}
- if ( ! loader ) {
-
- loader = textureExtensions[ EXTENSIONS.MSFT_TEXTURE_DDS ]
- ? parser.extensions[ EXTENSIONS.MSFT_TEXTURE_DDS ].ddsLoader
- : this.textureLoader;
+ if ( materialDef.normalTexture !== undefined && materialType !== MeshBasicMaterial ) {
- }
+ pending.push( parser.assignTexture( materialParams, 'normalMap', materialDef.normalTexture ) );
- return this.loadTextureImage( textureIndex, source, loader );
+ materialParams.normalScale = new Vector2( 1, 1 );
- };
+ if ( materialDef.normalTexture.scale !== undefined ) {
- GLTFParser.prototype.loadTextureImage = function ( textureIndex, source, loader ) {
+ materialParams.normalScale.set( materialDef.normalTexture.scale, materialDef.normalTexture.scale );
- var parser = this;
- var json = this.json;
- var options = this.options;
+ }
- var textureDef = json.textures[ textureIndex ];
+ }
- var URL = self.URL || self.webkitURL;
+ if ( materialDef.occlusionTexture !== undefined && materialType !== MeshBasicMaterial ) {
- var sourceURI = source.uri;
- var isObjectURL = false;
- var hasAlpha = true;
+ pending.push( parser.assignTexture( materialParams, 'aoMap', materialDef.occlusionTexture ) );
- if ( source.mimeType === 'image/jpeg' ) hasAlpha = false;
+ if ( materialDef.occlusionTexture.strength !== undefined ) {
- if ( source.bufferView !== undefined ) {
+ materialParams.aoMapIntensity = materialDef.occlusionTexture.strength;
- // Load binary image data from bufferView, if provided.
+ }
- sourceURI = parser.getDependency( 'bufferView', source.bufferView ).then( function ( bufferView ) {
+ }
- if ( source.mimeType === 'image/png' ) {
+ if ( materialDef.emissiveFactor !== undefined && materialType !== MeshBasicMaterial ) {
- // Inspect the PNG 'IHDR' chunk to determine whether the image could have an
- // alpha channel. This check is conservative — the image could have an alpha
- // channel with all values == 1, and the indexed type (colorType == 3) only
- // sometimes contains alpha.
- //
- // https://en.wikipedia.org/wiki/Portable_Network_Graphics#File_header
- var colorType = new DataView( bufferView, 25, 1 ).getUint8( 0, false );
- hasAlpha = colorType === 6 || colorType === 4 || colorType === 3;
+ materialParams.emissive = new Color().fromArray( materialDef.emissiveFactor );
- }
+ }
- isObjectURL = true;
- var blob = new Blob( [ bufferView ], { type: source.mimeType } );
- sourceURI = URL.createObjectURL( blob );
- return sourceURI;
+ if ( materialDef.emissiveTexture !== undefined && materialType !== MeshBasicMaterial ) {
- } );
+ pending.push( parser.assignTexture( materialParams, 'emissiveMap', materialDef.emissiveTexture ) );
}
- return Promise.resolve( sourceURI ).then( function ( sourceURI ) {
+ return Promise.all( pending ).then( function () {
- return new Promise( function ( resolve, reject ) {
+ var material;
- var onLoad = resolve;
+ if ( materialType === GLTFMeshStandardSGMaterial ) {
- if ( loader.isImageBitmapLoader === true ) {
+ material = extensions[ EXTENSIONS.KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS ].createMaterial( materialParams );
- onLoad = function ( imageBitmap ) {
+ } else {
- resolve( new CanvasTexture( imageBitmap ) );
+ material = new materialType( materialParams );
- };
+ }
- }
+ if ( materialDef.name ) material.name = materialDef.name;
- loader.load( resolveURL( sourceURI, options.path ), onLoad, undefined, reject );
+ // baseColorTexture, emissiveTexture, and specularGlossinessTexture use sRGB encoding.
+ if ( material.map ) material.map.encoding = sRGBEncoding;
+ if ( material.emissiveMap ) material.emissiveMap.encoding = sRGBEncoding;
- } );
+ assignExtrasToUserData( material, materialDef );
- } ).then( function ( texture ) {
+ parser.associations.set( material, { type: 'materials', index: materialIndex } );
- // Clean up resources and configure Texture.
+ if ( materialDef.extensions ) addUnknownExtensionsToUserData( extensions, material, materialDef );
- if ( isObjectURL === true ) {
+ return material;
- URL.revokeObjectURL( sourceURI );
+ } );
- }
+ };
- texture.flipY = false;
+ /** When Object3D instances are targeted by animation, they need unique names. */
+ GLTFParser.prototype.createUniqueName = function ( originalName ) {
- if ( textureDef.name ) texture.name = textureDef.name;
+ var sanitizedName = PropertyBinding.sanitizeNodeName( originalName || '' );
- // When there is definitely no alpha channel in the texture, set RGBFormat to save space.
- if ( ! hasAlpha ) texture.format = RGBFormat;
+ var name = sanitizedName;
- var samplers = json.samplers || {};
- var sampler = samplers[ textureDef.sampler ] || {};
+ for ( var i = 1; this.nodeNamesUsed[ name ]; ++ i ) {
- texture.magFilter = WEBGL_FILTERS[ sampler.magFilter ] || LinearFilter;
- texture.minFilter = WEBGL_FILTERS[ sampler.minFilter ] || LinearMipmapLinearFilter;
- texture.wrapS = WEBGL_WRAPPINGS[ sampler.wrapS ] || RepeatWrapping;
- texture.wrapT = WEBGL_WRAPPINGS[ sampler.wrapT ] || RepeatWrapping;
+ name = sanitizedName + '_' + i;
- parser.associations.set( texture, {
- type: 'textures',
- index: textureIndex
- } );
+ }
- return texture;
+ this.nodeNamesUsed[ name ] = true;
- } );
+ return name;
};
/**
- * Asynchronously assigns a texture to the given material parameters.
- * @param {Object} materialParams
- * @param {string} mapName
- * @param {Object} mapDef
- * @return {Promise}
+ * @param {BufferGeometry} geometry
+ * @param {GLTF.Primitive} primitiveDef
+ * @param {GLTFParser} parser
*/
- GLTFParser.prototype.assignTexture = function ( materialParams, mapName, mapDef ) {
-
- var parser = this;
+ function computeBounds( geometry, primitiveDef, parser ) {
- return this.getDependency( 'texture', mapDef.index ).then( function ( texture ) {
+ var attributes = primitiveDef.attributes;
- // Materials sample aoMap from UV set 1 and other maps from UV set 0 - this can't be configured
- // However, we will copy UV set 0 to UV set 1 on demand for aoMap
- if ( mapDef.texCoord !== undefined && mapDef.texCoord != 0 && ! ( mapName === 'aoMap' && mapDef.texCoord == 1 ) ) {
+ var box = new Box3();
- console.warn( 'THREE.GLTFLoader: Custom UV set ' + mapDef.texCoord + ' for texture ' + mapName + ' not yet supported.' );
+ if ( attributes.POSITION !== undefined ) {
- }
+ var accessor = parser.json.accessors[ attributes.POSITION ];
- if ( parser.extensions[ EXTENSIONS.KHR_TEXTURE_TRANSFORM ] ) {
+ var min = accessor.min;
+ var max = accessor.max;
- var transform = mapDef.extensions !== undefined ? mapDef.extensions[ EXTENSIONS.KHR_TEXTURE_TRANSFORM ] : undefined;
+ // glTF requires 'min' and 'max', but VRM (which extends glTF) currently ignores that requirement.
- if ( transform ) {
+ if ( min !== undefined && max !== undefined ) {
- var gltfReference = parser.associations.get( texture );
- texture = parser.extensions[ EXTENSIONS.KHR_TEXTURE_TRANSFORM ].extendTexture( texture, transform );
- parser.associations.set( texture, gltfReference );
+ box.set(
+ new Vector3( min[ 0 ], min[ 1 ], min[ 2 ] ),
+ new Vector3( max[ 0 ], max[ 1 ], max[ 2 ] ) );
- }
+ } else {
- }
+ console.warn( 'THREE.GLTFLoader: Missing min/max properties for accessor POSITION.' );
- materialParams[ mapName ] = texture;
+ return;
- } );
+ }
- };
+ } else {
- /**
- * Assigns final material to a Mesh, Line, or Points instance. The instance
- * already has a material (generated from the glTF material options alone)
- * but reuse of the same glTF material may require multiple threejs materials
- * to accomodate different primitive types, defines, etc. New materials will
- * be created if necessary, and reused from a cache.
- * @param {Object3D} mesh Mesh, Line, or Points instance.
- */
- GLTFParser.prototype.assignFinalMaterial = function ( mesh ) {
+ return;
- var geometry = mesh.geometry;
- var material = mesh.material;
+ }
- var useVertexTangents = geometry.attributes.tangent !== undefined;
- var useVertexColors = geometry.attributes.color !== undefined;
- var useFlatShading = geometry.attributes.normal === undefined;
- var useSkinning = mesh.isSkinnedMesh === true;
- var useMorphTargets = Object.keys( geometry.morphAttributes ).length > 0;
- var useMorphNormals = useMorphTargets && geometry.morphAttributes.normal !== undefined;
+ var targets = primitiveDef.targets;
- if ( mesh.isPoints ) {
+ if ( targets !== undefined ) {
- var cacheKey = 'PointsMaterial:' + material.uuid;
+ var maxDisplacement = new Vector3();
+ var vector = new Vector3();
- var pointsMaterial = this.cache.get( cacheKey );
+ for ( var i = 0, il = targets.length; i < il; i ++ ) {
- if ( ! pointsMaterial ) {
+ var target = targets[ i ];
- pointsMaterial = new PointsMaterial();
- Material.prototype.copy.call( pointsMaterial, material );
- pointsMaterial.color.copy( material.color );
- pointsMaterial.map = material.map;
- pointsMaterial.sizeAttenuation = false; // glTF spec says points should be 1px
+ if ( target.POSITION !== undefined ) {
- this.cache.add( cacheKey, pointsMaterial );
+ var accessor = parser.json.accessors[ target.POSITION ];
+ var min = accessor.min;
+ var max = accessor.max;
- }
+ // glTF requires 'min' and 'max', but VRM (which extends glTF) currently ignores that requirement.
- material = pointsMaterial;
+ if ( min !== undefined && max !== undefined ) {
- } else if ( mesh.isLine ) {
+ // we need to get max of absolute components because target weight is [-1,1]
+ vector.setX( Math.max( Math.abs( min[ 0 ] ), Math.abs( max[ 0 ] ) ) );
+ vector.setY( Math.max( Math.abs( min[ 1 ] ), Math.abs( max[ 1 ] ) ) );
+ vector.setZ( Math.max( Math.abs( min[ 2 ] ), Math.abs( max[ 2 ] ) ) );
- var cacheKey = 'LineBasicMaterial:' + material.uuid;
+ // Note: this assumes that the sum of all weights is at most 1. This isn't quite correct - it's more conservative
+ // to assume that each target can have a max weight of 1. However, for some use cases - notably, when morph targets
+ // are used to implement key-frame animations and as such only two are active at a time - this results in very large
+ // boxes. So for now we make a box that's sometimes a touch too small but is hopefully mostly of reasonable size.
+ maxDisplacement.max( vector );
- var lineMaterial = this.cache.get( cacheKey );
+ } else {
- if ( ! lineMaterial ) {
+ console.warn( 'THREE.GLTFLoader: Missing min/max properties for accessor POSITION.' );
- lineMaterial = new LineBasicMaterial();
- Material.prototype.copy.call( lineMaterial, material );
- lineMaterial.color.copy( material.color );
+ }
- this.cache.add( cacheKey, lineMaterial );
+ }
}
- material = lineMaterial;
+ // As per comment above this box isn't conservative, but has a reasonable size for a very large number of morph targets.
+ box.expandByVector( maxDisplacement );
}
- // Clone the material if it will be modified
- if ( useVertexTangents || useVertexColors || useFlatShading || useSkinning || useMorphTargets ) {
-
- var cacheKey = 'ClonedMaterial:' + material.uuid + ':';
-
- if ( material.isGLTFSpecularGlossinessMaterial ) cacheKey += 'specular-glossiness:';
- if ( useSkinning ) cacheKey += 'skinning:';
- if ( useVertexTangents ) cacheKey += 'vertex-tangents:';
- if ( useVertexColors ) cacheKey += 'vertex-colors:';
- if ( useFlatShading ) cacheKey += 'flat-shading:';
- if ( useMorphTargets ) cacheKey += 'morph-targets:';
- if ( useMorphNormals ) cacheKey += 'morph-normals:';
-
- var cachedMaterial = this.cache.get( cacheKey );
+ geometry.boundingBox = box;
- if ( ! cachedMaterial ) {
+ var sphere = new Sphere();
- cachedMaterial = material.clone();
+ box.getCenter( sphere.center );
+ sphere.radius = box.min.distanceTo( box.max ) / 2;
- if ( useSkinning ) cachedMaterial.skinning = true;
- if ( useVertexTangents ) cachedMaterial.vertexTangents = true;
- if ( useVertexColors ) cachedMaterial.vertexColors = true;
- if ( useFlatShading ) cachedMaterial.flatShading = true;
- if ( useMorphTargets ) cachedMaterial.morphTargets = true;
- if ( useMorphNormals ) cachedMaterial.morphNormals = true;
+ geometry.boundingSphere = sphere;
- this.cache.add( cacheKey, cachedMaterial );
+ }
- this.associations.set( cachedMaterial, this.associations.get( material ) );
+ /**
+ * @param {BufferGeometry} geometry
+ * @param {GLTF.Primitive} primitiveDef
+ * @param {GLTFParser} parser
+ * @return {Promise}
+ */
+ function addPrimitiveAttributes( geometry, primitiveDef, parser ) {
- }
+ var attributes = primitiveDef.attributes;
- material = cachedMaterial;
+ var pending = [];
- }
+ function assignAttributeAccessor( accessorIndex, attributeName ) {
- // workarounds for mesh and geometry
+ return parser.getDependency( 'accessor', accessorIndex )
+ .then( function ( accessor ) {
- if ( material.aoMap && geometry.attributes.uv2 === undefined && geometry.attributes.uv !== undefined ) {
+ geometry.setAttribute( attributeName, accessor );
- geometry.setAttribute( 'uv2', geometry.attributes.uv );
+ } );
}
- // https://github.com/mrdoob/three.js/issues/11438#issuecomment-507003995
- if ( material.normalScale && ! useVertexTangents ) {
-
- material.normalScale.y = - material.normalScale.y;
+ for ( var gltfAttributeName in attributes ) {
- }
+ var threeAttributeName = ATTRIBUTES[ gltfAttributeName ] || gltfAttributeName.toLowerCase();
- if ( material.clearcoatNormalScale && ! useVertexTangents ) {
+ // Skip attributes already provided by e.g. Draco extension.
+ if ( threeAttributeName in geometry.attributes ) continue;
- material.clearcoatNormalScale.y = - material.clearcoatNormalScale.y;
+ pending.push( assignAttributeAccessor( attributes[ gltfAttributeName ], threeAttributeName ) );
}
- mesh.material = material;
-
- };
-
- GLTFParser.prototype.getMaterialType = function ( /* materialIndex */ ) {
+ if ( primitiveDef.indices !== undefined && ! geometry.index ) {
- return MeshStandardMaterial;
+ var accessor = parser.getDependency( 'accessor', primitiveDef.indices ).then( function ( accessor ) {
- };
+ geometry.setIndex( accessor );
- /**
- * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#materials
- * @param {number} materialIndex
- * @return {Promise}
- */
- GLTFParser.prototype.loadMaterial = function ( materialIndex ) {
+ } );
- var parser = this;
- var json = this.json;
- var extensions = this.extensions;
- var materialDef = json.materials[ materialIndex ];
+ pending.push( accessor );
- var materialType;
- var materialParams = {};
- var materialExtensions = materialDef.extensions || {};
+ }
- var pending = [];
+ assignExtrasToUserData( geometry, primitiveDef );
- if ( materialExtensions[ EXTENSIONS.KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS ] ) {
+ computeBounds( geometry, primitiveDef, parser );
- var sgExtension = extensions[ EXTENSIONS.KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS ];
- materialType = sgExtension.getMaterialType();
- pending.push( sgExtension.extendParams( materialParams, materialDef, parser ) );
+ return Promise.all( pending ).then( function () {
- } else if ( materialExtensions[ EXTENSIONS.KHR_MATERIALS_UNLIT ] ) {
+ return primitiveDef.targets !== undefined
+ ? addMorphTargets( geometry, primitiveDef.targets, parser )
+ : geometry;
- var kmuExtension = extensions[ EXTENSIONS.KHR_MATERIALS_UNLIT ];
- materialType = kmuExtension.getMaterialType();
- pending.push( kmuExtension.extendParams( materialParams, materialDef, parser ) );
+ } );
- } else {
+ }
- // Specification:
- // https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#metallic-roughness-material
+ /**
+ * @param {BufferGeometry} geometry
+ * @param {Number} drawMode
+ * @return {BufferGeometry}
+ */
+ function toTrianglesDrawMode( geometry, drawMode ) {
- var metallicRoughness = materialDef.pbrMetallicRoughness || {};
+ var index = geometry.getIndex();
- materialParams.color = new Color( 1.0, 1.0, 1.0 );
- materialParams.opacity = 1.0;
+ // generate index if not present
- if ( Array.isArray( metallicRoughness.baseColorFactor ) ) {
+ if ( index === null ) {
- var array = metallicRoughness.baseColorFactor;
+ var indices = [];
- materialParams.color.fromArray( array );
- materialParams.opacity = array[ 3 ];
+ var position = geometry.getAttribute( 'position' );
- }
+ if ( position !== undefined ) {
- if ( metallicRoughness.baseColorTexture !== undefined ) {
+ for ( var i = 0; i < position.count; i ++ ) {
- pending.push( parser.assignTexture( materialParams, 'map', metallicRoughness.baseColorTexture ) );
+ indices.push( i );
- }
+ }
- materialParams.metalness = metallicRoughness.metallicFactor !== undefined ? metallicRoughness.metallicFactor : 1.0;
- materialParams.roughness = metallicRoughness.roughnessFactor !== undefined ? metallicRoughness.roughnessFactor : 1.0;
+ geometry.setIndex( indices );
+ index = geometry.getIndex();
- if ( metallicRoughness.metallicRoughnessTexture !== undefined ) {
+ } else {
- pending.push( parser.assignTexture( materialParams, 'metalnessMap', metallicRoughness.metallicRoughnessTexture ) );
- pending.push( parser.assignTexture( materialParams, 'roughnessMap', metallicRoughness.metallicRoughnessTexture ) );
+ console.error( 'THREE.GLTFLoader.toTrianglesDrawMode(): Undefined position attribute. Processing not possible.' );
+ return geometry;
}
- materialType = this._invokeOne( function ( ext ) {
-
- return ext.getMaterialType && ext.getMaterialType( materialIndex );
+ }
- } );
+ //
- pending.push( Promise.all( this._invokeAll( function ( ext ) {
+ var numberOfTriangles = index.count - 2;
+ var newIndices = [];
- return ext.extendMaterialParams && ext.extendMaterialParams( materialIndex, materialParams );
+ if ( drawMode === TriangleFanDrawMode ) {
- } ) ) );
+ // gl.TRIANGLE_FAN
- }
+ for ( var i = 1; i <= numberOfTriangles; i ++ ) {
- if ( materialDef.doubleSided === true ) {
+ newIndices.push( index.getX( 0 ) );
+ newIndices.push( index.getX( i ) );
+ newIndices.push( index.getX( i + 1 ) );
- materialParams.side = DoubleSide;
+ }
- }
+ } else {
- var alphaMode = materialDef.alphaMode || ALPHA_MODES.OPAQUE;
+ // gl.TRIANGLE_STRIP
- if ( alphaMode === ALPHA_MODES.BLEND ) {
+ for ( var i = 0; i < numberOfTriangles; i ++ ) {
- materialParams.transparent = true;
+ if ( i % 2 === 0 ) {
- // See: https://github.com/mrdoob/three.js/issues/17706
- materialParams.depthWrite = false;
+ newIndices.push( index.getX( i ) );
+ newIndices.push( index.getX( i + 1 ) );
+ newIndices.push( index.getX( i + 2 ) );
- } else {
- materialParams.transparent = false;
+ } else {
- if ( alphaMode === ALPHA_MODES.MASK ) {
+ newIndices.push( index.getX( i + 2 ) );
+ newIndices.push( index.getX( i + 1 ) );
+ newIndices.push( index.getX( i ) );
- materialParams.alphaTest = materialDef.alphaCutoff !== undefined ? materialDef.alphaCutoff : 0.5;
+ }
}
}
- if ( materialDef.normalTexture !== undefined && materialType !== MeshBasicMaterial ) {
+ if ( ( newIndices.length / 3 ) !== numberOfTriangles ) {
- pending.push( parser.assignTexture( materialParams, 'normalMap', materialDef.normalTexture ) );
+ console.error( 'THREE.GLTFLoader.toTrianglesDrawMode(): Unable to generate correct amount of triangles.' );
- materialParams.normalScale = new Vector2( 1, 1 );
+ }
- if ( materialDef.normalTexture.scale !== undefined ) {
+ // build final geometry
- materialParams.normalScale.set( materialDef.normalTexture.scale, materialDef.normalTexture.scale );
+ var newGeometry = geometry.clone();
+ newGeometry.setIndex( newIndices );
- }
+ return newGeometry;
- }
+ }
- if ( materialDef.occlusionTexture !== undefined && materialType !== MeshBasicMaterial ) {
+ /**
+ * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#geometry
+ *
+ * Creates BufferGeometries from primitives.
+ *
+ * @param {Array} primitives
+ * @return {Promise>}
+ */
+ GLTFParser.prototype.loadGeometries = function ( primitives ) {
- pending.push( parser.assignTexture( materialParams, 'aoMap', materialDef.occlusionTexture ) );
+ var parser = this;
+ var extensions = this.extensions;
+ var cache = this.primitiveCache;
- if ( materialDef.occlusionTexture.strength !== undefined ) {
+ function createDracoPrimitive( primitive ) {
- materialParams.aoMapIntensity = materialDef.occlusionTexture.strength;
+ return extensions[ EXTENSIONS.KHR_DRACO_MESH_COMPRESSION ]
+ .decodePrimitive( primitive, parser )
+ .then( function ( geometry ) {
- }
+ return addPrimitiveAttributes( geometry, primitive, parser );
+
+ } );
}
- if ( materialDef.emissiveFactor !== undefined && materialType !== MeshBasicMaterial ) {
+ var pending = [];
- materialParams.emissive = new Color().fromArray( materialDef.emissiveFactor );
+ for ( var i = 0, il = primitives.length; i < il; i ++ ) {
- }
+ var primitive = primitives[ i ];
+ var cacheKey = createPrimitiveKey( primitive );
- if ( materialDef.emissiveTexture !== undefined && materialType !== MeshBasicMaterial ) {
+ // See if we've already created this geometry
+ var cached = cache[ cacheKey ];
- pending.push( parser.assignTexture( materialParams, 'emissiveMap', materialDef.emissiveTexture ) );
+ if ( cached ) {
- }
+ // Use the cached geometry if it exists
+ pending.push( cached.promise );
- return Promise.all( pending ).then( function () {
+ } else {
- var material;
+ var geometryPromise;
- if ( materialType === GLTFMeshStandardSGMaterial ) {
+ if ( primitive.extensions && primitive.extensions[ EXTENSIONS.KHR_DRACO_MESH_COMPRESSION ] ) {
- material = extensions[ EXTENSIONS.KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS ].createMaterial( materialParams );
+ // Use DRACO geometry if available
+ geometryPromise = createDracoPrimitive( primitive );
- } else {
+ } else {
- material = new materialType( materialParams );
+ // Otherwise create a new geometry
+ geometryPromise = addPrimitiveAttributes( new BufferGeometry(), primitive, parser );
- }
+ }
- if ( materialDef.name ) material.name = materialDef.name;
+ // Cache this geometry
+ cache[ cacheKey ] = { primitive: primitive, promise: geometryPromise };
- // baseColorTexture, emissiveTexture, and specularGlossinessTexture use sRGB encoding.
- if ( material.map ) material.map.encoding = sRGBEncoding;
- if ( material.emissiveMap ) material.emissiveMap.encoding = sRGBEncoding;
+ pending.push( geometryPromise );
- assignExtrasToUserData( material, materialDef );
+ }
- parser.associations.set( material, { type: 'materials', index: materialIndex } );
+ }
- if ( materialDef.extensions ) addUnknownExtensionsToUserData( extensions, material, materialDef );
+ return Promise.all( pending );
- return material;
+ };
- } );
+ /**
+ * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#meshes
+ * @param {number} meshIndex
+ * @return {Promise}
+ */
+ GLTFParser.prototype.loadMesh = function ( meshIndex ) {
- };
+ var parser = this;
+ var json = this.json;
+ var extensions = this.extensions;
- /** When Object3D instances are targeted by animation, they need unique names. */
- GLTFParser.prototype.createUniqueName = function ( originalName ) {
+ var meshDef = json.meshes[ meshIndex ];
+ var primitives = meshDef.primitives;
- var sanitizedName = PropertyBinding.sanitizeNodeName( originalName || '' );
+ var pending = [];
- var name = sanitizedName;
+ for ( var i = 0, il = primitives.length; i < il; i ++ ) {
- for ( var i = 1; this.nodeNamesUsed[ name ]; ++ i ) {
+ var material = primitives[ i ].material === undefined
+ ? createDefaultMaterial( this.cache )
+ : this.getDependency( 'material', primitives[ i ].material );
- name = sanitizedName + '_' + i;
+ pending.push( material );
}
- this.nodeNamesUsed[ name ] = true;
+ pending.push( parser.loadGeometries( primitives ) );
- return name;
+ return Promise.all( pending ).then( function ( results ) {
- };
+ var materials = results.slice( 0, results.length - 1 );
+ var geometries = results[ results.length - 1 ];
- /**
- * @param {BufferGeometry} geometry
- * @param {GLTF.Primitive} primitiveDef
- * @param {GLTFParser} parser
- */
- function computeBounds( geometry, primitiveDef, parser ) {
+ var meshes = [];
- var attributes = primitiveDef.attributes;
+ for ( var i = 0, il = geometries.length; i < il; i ++ ) {
- var box = new Box3();
+ var geometry = geometries[ i ];
+ var primitive = primitives[ i ];
- if ( attributes.POSITION !== undefined ) {
+ // 1. create Mesh
- var accessor = parser.json.accessors[ attributes.POSITION ];
+ var mesh;
- var min = accessor.min;
- var max = accessor.max;
+ var material = materials[ i ];
- // glTF requires 'min' and 'max', but VRM (which extends glTF) currently ignores that requirement.
+ if ( primitive.mode === WEBGL_CONSTANTS.TRIANGLES ||
+ primitive.mode === WEBGL_CONSTANTS.TRIANGLE_STRIP ||
+ primitive.mode === WEBGL_CONSTANTS.TRIANGLE_FAN ||
+ primitive.mode === undefined ) {
- if ( min !== undefined && max !== undefined ) {
+ // .isSkinnedMesh isn't in glTF spec. See ._markDefs()
+ mesh = meshDef.isSkinnedMesh === true
+ ? new SkinnedMesh( geometry, material )
+ : new Mesh( geometry, material );
- box.set(
- new Vector3( min[ 0 ], min[ 1 ], min[ 2 ] ),
- new Vector3( max[ 0 ], max[ 1 ], max[ 2 ] ) );
+ if ( mesh.isSkinnedMesh === true && ! mesh.geometry.attributes.skinWeight.normalized ) {
+
+ // we normalize floating point skin weight array to fix malformed assets (see #15319)
+ // it's important to skip this for non-float32 data since normalizeSkinWeights assumes non-normalized inputs
+ mesh.normalizeSkinWeights();
+
+ }
+
+ if ( primitive.mode === WEBGL_CONSTANTS.TRIANGLE_STRIP ) {
+
+ mesh.geometry = toTrianglesDrawMode( mesh.geometry, TriangleStripDrawMode );
+
+ } else if ( primitive.mode === WEBGL_CONSTANTS.TRIANGLE_FAN ) {
+
+ mesh.geometry = toTrianglesDrawMode( mesh.geometry, TriangleFanDrawMode );
+
+ }
- } else {
+ } else if ( primitive.mode === WEBGL_CONSTANTS.LINES ) {
- console.warn( 'THREE.GLTFLoader: Missing min/max properties for accessor POSITION.' );
+ mesh = new LineSegments( geometry, material );
- return;
+ } else if ( primitive.mode === WEBGL_CONSTANTS.LINE_STRIP ) {
- }
+ mesh = new Line( geometry, material );
- } else {
+ } else if ( primitive.mode === WEBGL_CONSTANTS.LINE_LOOP ) {
- return;
+ mesh = new LineLoop( geometry, material );
- }
+ } else if ( primitive.mode === WEBGL_CONSTANTS.POINTS ) {
- var targets = primitiveDef.targets;
+ mesh = new Points( geometry, material );
- if ( targets !== undefined ) {
+ } else {
- var maxDisplacement = new Vector3();
- var vector = new Vector3();
+ throw new Error( 'THREE.GLTFLoader: Primitive mode unsupported: ' + primitive.mode );
- for ( var i = 0, il = targets.length; i < il; i ++ ) {
+ }
- var target = targets[ i ];
+ if ( Object.keys( mesh.geometry.morphAttributes ).length > 0 ) {
- if ( target.POSITION !== undefined ) {
+ updateMorphTargets( mesh, meshDef );
- var accessor = parser.json.accessors[ target.POSITION ];
- var min = accessor.min;
- var max = accessor.max;
+ }
- // glTF requires 'min' and 'max', but VRM (which extends glTF) currently ignores that requirement.
+ mesh.name = parser.createUniqueName( meshDef.name || ( 'mesh_' + meshIndex ) );
- if ( min !== undefined && max !== undefined ) {
+ assignExtrasToUserData( mesh, meshDef );
- // we need to get max of absolute components because target weight is [-1,1]
- vector.setX( Math.max( Math.abs( min[ 0 ] ), Math.abs( max[ 0 ] ) ) );
- vector.setY( Math.max( Math.abs( min[ 1 ] ), Math.abs( max[ 1 ] ) ) );
- vector.setZ( Math.max( Math.abs( min[ 2 ] ), Math.abs( max[ 2 ] ) ) );
+ if ( primitive.extensions ) addUnknownExtensionsToUserData( extensions, mesh, primitive );
- // Note: this assumes that the sum of all weights is at most 1. This isn't quite correct - it's more conservative
- // to assume that each target can have a max weight of 1. However, for some use cases - notably, when morph targets
- // are used to implement key-frame animations and as such only two are active at a time - this results in very large
- // boxes. So for now we make a box that's sometimes a touch too small but is hopefully mostly of reasonable size.
- maxDisplacement.max( vector );
+ parser.assignFinalMaterial( mesh );
- } else {
+ meshes.push( mesh );
- console.warn( 'THREE.GLTFLoader: Missing min/max properties for accessor POSITION.' );
+ }
- }
+ if ( meshes.length === 1 ) {
- }
+ return meshes[ 0 ];
}
- // As per comment above this box isn't conservative, but has a reasonable size for a very large number of morph targets.
- box.expandByVector( maxDisplacement );
+ var group = new Group();
- }
+ for ( var i = 0, il = meshes.length; i < il; i ++ ) {
- geometry.boundingBox = box;
+ group.add( meshes[ i ] );
- var sphere = new Sphere();
+ }
- box.getCenter( sphere.center );
- sphere.radius = box.min.distanceTo( box.max ) / 2;
+ return group;
- geometry.boundingSphere = sphere;
+ } );
- }
+ };
/**
- * @param {BufferGeometry} geometry
- * @param {GLTF.Primitive} primitiveDef
- * @param {GLTFParser} parser
- * @return {Promise}
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#cameras
+ * @param {number} cameraIndex
+ * @return {Promise}
*/
- function addPrimitiveAttributes( geometry, primitiveDef, parser ) {
+ GLTFParser.prototype.loadCamera = function ( cameraIndex ) {
- var attributes = primitiveDef.attributes;
+ var camera;
+ var cameraDef = this.json.cameras[ cameraIndex ];
+ var params = cameraDef[ cameraDef.type ];
- var pending = [];
+ if ( ! params ) {
- function assignAttributeAccessor( accessorIndex, attributeName ) {
+ console.warn( 'THREE.GLTFLoader: Missing camera parameters.' );
+ return;
- return parser.getDependency( 'accessor', accessorIndex )
- .then( function ( accessor ) {
+ }
- geometry.setAttribute( attributeName, accessor );
+ if ( cameraDef.type === 'perspective' ) {
- } );
+ camera = new PerspectiveCamera( MathUtils.radToDeg( params.yfov ), params.aspectRatio || 1, params.znear || 1, params.zfar || 2e6 );
- }
+ } else if ( cameraDef.type === 'orthographic' ) {
- for ( var gltfAttributeName in attributes ) {
+ camera = new OrthographicCamera( - params.xmag, params.xmag, params.ymag, - params.ymag, params.znear, params.zfar );
- var threeAttributeName = ATTRIBUTES[ gltfAttributeName ] || gltfAttributeName.toLowerCase();
+ }
- // Skip attributes already provided by e.g. Draco extension.
- if ( threeAttributeName in geometry.attributes ) continue;
+ if ( cameraDef.name ) camera.name = this.createUniqueName( cameraDef.name );
- pending.push( assignAttributeAccessor( attributes[ gltfAttributeName ], threeAttributeName ) );
+ assignExtrasToUserData( camera, cameraDef );
- }
+ return Promise.resolve( camera );
- if ( primitiveDef.indices !== undefined && ! geometry.index ) {
+ };
- var accessor = parser.getDependency( 'accessor', primitiveDef.indices ).then( function ( accessor ) {
+ /**
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#skins
+ * @param {number} skinIndex
+ * @return {Promise}
+ */
+ GLTFParser.prototype.loadSkin = function ( skinIndex ) {
- geometry.setIndex( accessor );
+ var skinDef = this.json.skins[ skinIndex ];
- } );
+ var skinEntry = { joints: skinDef.joints };
- pending.push( accessor );
+ if ( skinDef.inverseBindMatrices === undefined ) {
- }
+ return Promise.resolve( skinEntry );
- assignExtrasToUserData( geometry, primitiveDef );
+ }
- computeBounds( geometry, primitiveDef, parser );
+ return this.getDependency( 'accessor', skinDef.inverseBindMatrices ).then( function ( accessor ) {
- return Promise.all( pending ).then( function () {
+ skinEntry.inverseBindMatrices = accessor;
- return primitiveDef.targets !== undefined
- ? addMorphTargets( geometry, primitiveDef.targets, parser )
- : geometry;
+ return skinEntry;
} );
- }
+ };
/**
- * @param {BufferGeometry} geometry
- * @param {Number} drawMode
- * @return {BufferGeometry}
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#animations
+ * @param {number} animationIndex
+ * @return {Promise}
*/
- function toTrianglesDrawMode( geometry, drawMode ) {
+ GLTFParser.prototype.loadAnimation = function ( animationIndex ) {
- var index = geometry.getIndex();
+ var json = this.json;
- // generate index if not present
+ var animationDef = json.animations[ animationIndex ];
- if ( index === null ) {
+ var pendingNodes = [];
+ var pendingInputAccessors = [];
+ var pendingOutputAccessors = [];
+ var pendingSamplers = [];
+ var pendingTargets = [];
- var indices = [];
+ for ( var i = 0, il = animationDef.channels.length; i < il; i ++ ) {
- var position = geometry.getAttribute( 'position' );
+ var channel = animationDef.channels[ i ];
+ var sampler = animationDef.samplers[ channel.sampler ];
+ var target = channel.target;
+ var name = target.node !== undefined ? target.node : target.id; // NOTE: target.id is deprecated.
+ var input = animationDef.parameters !== undefined ? animationDef.parameters[ sampler.input ] : sampler.input;
+ var output = animationDef.parameters !== undefined ? animationDef.parameters[ sampler.output ] : sampler.output;
- if ( position !== undefined ) {
+ pendingNodes.push( this.getDependency( 'node', name ) );
+ pendingInputAccessors.push( this.getDependency( 'accessor', input ) );
+ pendingOutputAccessors.push( this.getDependency( 'accessor', output ) );
+ pendingSamplers.push( sampler );
+ pendingTargets.push( target );
- for ( var i = 0; i < position.count; i ++ ) {
+ }
- indices.push( i );
+ return Promise.all( [
- }
+ Promise.all( pendingNodes ),
+ Promise.all( pendingInputAccessors ),
+ Promise.all( pendingOutputAccessors ),
+ Promise.all( pendingSamplers ),
+ Promise.all( pendingTargets )
- geometry.setIndex( indices );
- index = geometry.getIndex();
+ ] ).then( function ( dependencies ) {
- } else {
+ var nodes = dependencies[ 0 ];
+ var inputAccessors = dependencies[ 1 ];
+ var outputAccessors = dependencies[ 2 ];
+ var samplers = dependencies[ 3 ];
+ var targets = dependencies[ 4 ];
- console.error( 'THREE.GLTFLoader.toTrianglesDrawMode(): Undefined position attribute. Processing not possible.' );
- return geometry;
+ var tracks = [];
- }
+ for ( var i = 0, il = nodes.length; i < il; i ++ ) {
- }
+ var node = nodes[ i ];
+ var inputAccessor = inputAccessors[ i ];
+ var outputAccessor = outputAccessors[ i ];
+ var sampler = samplers[ i ];
+ var target = targets[ i ];
- //
+ if ( node === undefined ) continue;
- var numberOfTriangles = index.count - 2;
- var newIndices = [];
+ node.updateMatrix();
+ node.matrixAutoUpdate = true;
- if ( drawMode === TriangleFanDrawMode ) {
+ var TypedKeyframeTrack;
- // gl.TRIANGLE_FAN
+ switch ( PATH_PROPERTIES[ target.path ] ) {
- for ( var i = 1; i <= numberOfTriangles; i ++ ) {
+ case PATH_PROPERTIES.weights:
- newIndices.push( index.getX( 0 ) );
- newIndices.push( index.getX( i ) );
- newIndices.push( index.getX( i + 1 ) );
+ TypedKeyframeTrack = NumberKeyframeTrack;
+ break;
- }
+ case PATH_PROPERTIES.rotation:
- } else {
+ TypedKeyframeTrack = QuaternionKeyframeTrack;
+ break;
- // gl.TRIANGLE_STRIP
+ case PATH_PROPERTIES.position:
+ case PATH_PROPERTIES.scale:
+ default:
- for ( var i = 0; i < numberOfTriangles; i ++ ) {
+ TypedKeyframeTrack = VectorKeyframeTrack;
+ break;
- if ( i % 2 === 0 ) {
+ }
- newIndices.push( index.getX( i ) );
- newIndices.push( index.getX( i + 1 ) );
- newIndices.push( index.getX( i + 2 ) );
+ var targetName = node.name ? node.name : node.uuid;
+ var interpolation = sampler.interpolation !== undefined ? INTERPOLATION[ sampler.interpolation ] : InterpolateLinear;
- } else {
+ var targetNames = [];
- newIndices.push( index.getX( i + 2 ) );
- newIndices.push( index.getX( i + 1 ) );
- newIndices.push( index.getX( i ) );
+ if ( PATH_PROPERTIES[ target.path ] === PATH_PROPERTIES.weights ) {
+
+ // Node may be a Group (glTF mesh with several primitives) or a Mesh.
+ node.traverse( function ( object ) {
+
+ if ( object.isMesh === true && object.morphTargetInfluences ) {
+
+ targetNames.push( object.name ? object.name : object.uuid );
+
+ }
+
+ } );
+
+ } else {
+
+ targetNames.push( targetName );
}
- }
+ var outputArray = outputAccessor.array;
- }
+ if ( outputAccessor.normalized ) {
- if ( ( newIndices.length / 3 ) !== numberOfTriangles ) {
+ var scale;
- console.error( 'THREE.GLTFLoader.toTrianglesDrawMode(): Unable to generate correct amount of triangles.' );
+ if ( outputArray.constructor === Int8Array ) {
- }
+ scale = 1 / 127;
- // build final geometry
+ } else if ( outputArray.constructor === Uint8Array ) {
- var newGeometry = geometry.clone();
- newGeometry.setIndex( newIndices );
+ scale = 1 / 255;
- return newGeometry;
+ } else if ( outputArray.constructor == Int16Array ) {
- }
+ scale = 1 / 32767;
- /**
- * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#geometry
- *
- * Creates BufferGeometries from primitives.
- *
- * @param {Array} primitives
- * @return {Promise>}
- */
- GLTFParser.prototype.loadGeometries = function ( primitives ) {
+ } else if ( outputArray.constructor === Uint16Array ) {
- var parser = this;
- var extensions = this.extensions;
- var cache = this.primitiveCache;
+ scale = 1 / 65535;
- function createDracoPrimitive( primitive ) {
+ } else {
- return extensions[ EXTENSIONS.KHR_DRACO_MESH_COMPRESSION ]
- .decodePrimitive( primitive, parser )
- .then( function ( geometry ) {
+ throw new Error( 'THREE.GLTFLoader: Unsupported output accessor component type.' );
- return addPrimitiveAttributes( geometry, primitive, parser );
+ }
- } );
+ var scaled = new Float32Array( outputArray.length );
- }
+ for ( var j = 0, jl = outputArray.length; j < jl; j ++ ) {
- var pending = [];
+ scaled[ j ] = outputArray[ j ] * scale;
- for ( var i = 0, il = primitives.length; i < il; i ++ ) {
+ }
- var primitive = primitives[ i ];
- var cacheKey = createPrimitiveKey( primitive );
+ outputArray = scaled;
- // See if we've already created this geometry
- var cached = cache[ cacheKey ];
+ }
- if ( cached ) {
+ for ( var j = 0, jl = targetNames.length; j < jl; j ++ ) {
- // Use the cached geometry if it exists
- pending.push( cached.promise );
+ var track = new TypedKeyframeTrack(
+ targetNames[ j ] + '.' + PATH_PROPERTIES[ target.path ],
+ inputAccessor.array,
+ outputArray,
+ interpolation
+ );
- } else {
+ // Override interpolation with custom factory method.
+ if ( sampler.interpolation === 'CUBICSPLINE' ) {
- var geometryPromise;
+ track.createInterpolant = function InterpolantFactoryMethodGLTFCubicSpline( result ) {
- if ( primitive.extensions && primitive.extensions[ EXTENSIONS.KHR_DRACO_MESH_COMPRESSION ] ) {
+ // A CUBICSPLINE keyframe in glTF has three output values for each input value,
+ // representing inTangent, splineVertex, and outTangent. As a result, track.getValueSize()
+ // must be divided by three to get the interpolant's sampleSize argument.
- // Use DRACO geometry if available
- geometryPromise = createDracoPrimitive( primitive );
+ return new GLTFCubicSplineInterpolant( this.times, this.values, this.getValueSize() / 3, result );
- } else {
+ };
- // Otherwise create a new geometry
- geometryPromise = addPrimitiveAttributes( new BufferGeometry(), primitive, parser );
+ // Mark as CUBICSPLINE. `track.getInterpolation()` doesn't support custom interpolants.
+ track.createInterpolant.isInterpolantFactoryMethodGLTFCubicSpline = true;
- }
+ }
- // Cache this geometry
- cache[ cacheKey ] = { primitive: primitive, promise: geometryPromise };
+ tracks.push( track );
- pending.push( geometryPromise );
+ }
}
- }
+ var name = animationDef.name ? animationDef.name : 'animation_' + animationIndex;
- return Promise.all( pending );
+ return new AnimationClip( name, undefined, tracks );
+
+ } );
};
/**
- * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#meshes
- * @param {number} meshIndex
- * @return {Promise}
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#nodes-and-hierarchy
+ * @param {number} nodeIndex
+ * @return {Promise}
*/
- GLTFParser.prototype.loadMesh = function ( meshIndex ) {
+ GLTFParser.prototype.loadNode = function ( nodeIndex ) {
- var parser = this;
var json = this.json;
var extensions = this.extensions;
+ var parser = this;
- var meshDef = json.meshes[ meshIndex ];
- var primitives = meshDef.primitives;
+ var nodeDef = json.nodes[ nodeIndex ];
- var pending = [];
+ // reserve node's name before its dependencies, so the root has the intended name.
+ var nodeName = nodeDef.name ? parser.createUniqueName( nodeDef.name ) : '';
- for ( var i = 0, il = primitives.length; i < il; i ++ ) {
+ return ( function () {
- var material = primitives[ i ].material === undefined
- ? createDefaultMaterial( this.cache )
- : this.getDependency( 'material', primitives[ i ].material );
+ var pending = [];
- pending.push( material );
+ if ( nodeDef.mesh !== undefined ) {
- }
+ pending.push( parser.getDependency( 'mesh', nodeDef.mesh ).then( function ( mesh ) {
- pending.push( parser.loadGeometries( primitives ) );
+ var node = parser._getNodeRef( parser.meshCache, nodeDef.mesh, mesh );
- return Promise.all( pending ).then( function ( results ) {
+ // if weights are provided on the node, override weights on the mesh.
+ if ( nodeDef.weights !== undefined ) {
- var materials = results.slice( 0, results.length - 1 );
- var geometries = results[ results.length - 1 ];
+ node.traverse( function ( o ) {
- var meshes = [];
+ if ( ! o.isMesh ) return;
- for ( var i = 0, il = geometries.length; i < il; i ++ ) {
+ for ( var i = 0, il = nodeDef.weights.length; i < il; i ++ ) {
- var geometry = geometries[ i ];
- var primitive = primitives[ i ];
+ o.morphTargetInfluences[ i ] = nodeDef.weights[ i ];
- // 1. create Mesh
+ }
- var mesh;
+ } );
- var material = materials[ i ];
+ }
- if ( primitive.mode === WEBGL_CONSTANTS.TRIANGLES ||
- primitive.mode === WEBGL_CONSTANTS.TRIANGLE_STRIP ||
- primitive.mode === WEBGL_CONSTANTS.TRIANGLE_FAN ||
- primitive.mode === undefined ) {
+ return node;
- // .isSkinnedMesh isn't in glTF spec. See ._markDefs()
- mesh = meshDef.isSkinnedMesh === true
- ? new SkinnedMesh( geometry, material )
- : new Mesh( geometry, material );
+ } ) );
- if ( mesh.isSkinnedMesh === true && ! mesh.geometry.attributes.skinWeight.normalized ) {
+ }
- // we normalize floating point skin weight array to fix malformed assets (see #15319)
- // it's important to skip this for non-float32 data since normalizeSkinWeights assumes non-normalized inputs
- mesh.normalizeSkinWeights();
+ if ( nodeDef.camera !== undefined ) {
- }
+ pending.push( parser.getDependency( 'camera', nodeDef.camera ).then( function ( camera ) {
- if ( primitive.mode === WEBGL_CONSTANTS.TRIANGLE_STRIP ) {
+ return parser._getNodeRef( parser.cameraCache, nodeDef.camera, camera );
- mesh.geometry = toTrianglesDrawMode( mesh.geometry, TriangleStripDrawMode );
+ } ) );
- } else if ( primitive.mode === WEBGL_CONSTANTS.TRIANGLE_FAN ) {
+ }
- mesh.geometry = toTrianglesDrawMode( mesh.geometry, TriangleFanDrawMode );
+ parser._invokeAll( function ( ext ) {
- }
+ return ext.createNodeAttachment && ext.createNodeAttachment( nodeIndex );
- } else if ( primitive.mode === WEBGL_CONSTANTS.LINES ) {
+ } ).forEach( function ( promise ) {
- mesh = new LineSegments( geometry, material );
+ pending.push( promise );
- } else if ( primitive.mode === WEBGL_CONSTANTS.LINE_STRIP ) {
+ } );
- mesh = new Line( geometry, material );
+ return Promise.all( pending );
- } else if ( primitive.mode === WEBGL_CONSTANTS.LINE_LOOP ) {
+ }() ).then( function ( objects ) {
- mesh = new LineLoop( geometry, material );
+ var node;
- } else if ( primitive.mode === WEBGL_CONSTANTS.POINTS ) {
+ // .isBone isn't in glTF spec. See ._markDefs
+ if ( nodeDef.isBone === true ) {
- mesh = new Points( geometry, material );
+ node = new Bone();
- } else {
+ } else if ( objects.length > 1 ) {
- throw new Error( 'THREE.GLTFLoader: Primitive mode unsupported: ' + primitive.mode );
+ node = new Group();
- }
+ } else if ( objects.length === 1 ) {
- if ( Object.keys( mesh.geometry.morphAttributes ).length > 0 ) {
+ node = objects[ 0 ];
- updateMorphTargets( mesh, meshDef );
+ } else {
- }
+ node = new Object3D();
- mesh.name = parser.createUniqueName( meshDef.name || ( 'mesh_' + meshIndex ) );
+ }
- assignExtrasToUserData( mesh, meshDef );
+ if ( node !== objects[ 0 ] ) {
- if ( primitive.extensions ) addUnknownExtensionsToUserData( extensions, mesh, primitive );
+ for ( var i = 0, il = objects.length; i < il; i ++ ) {
- parser.assignFinalMaterial( mesh );
+ node.add( objects[ i ] );
- meshes.push( mesh );
+ }
}
- if ( meshes.length === 1 ) {
+ if ( nodeDef.name ) {
- return meshes[ 0 ];
+ node.userData.name = nodeDef.name;
+ node.name = nodeName;
}
- var group = new Group();
-
- for ( var i = 0, il = meshes.length; i < il; i ++ ) {
-
- group.add( meshes[ i ] );
+ assignExtrasToUserData( node, nodeDef );
- }
+ if ( nodeDef.extensions ) addUnknownExtensionsToUserData( extensions, node, nodeDef );
- return group;
+ if ( nodeDef.matrix !== undefined ) {
- } );
+ var matrix = new Matrix4();
+ matrix.fromArray( nodeDef.matrix );
+ node.applyMatrix4( matrix );
- };
+ } else {
- /**
- * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#cameras
- * @param {number} cameraIndex
- * @return {Promise}
- */
- GLTFParser.prototype.loadCamera = function ( cameraIndex ) {
+ if ( nodeDef.translation !== undefined ) {
- var camera;
- var cameraDef = this.json.cameras[ cameraIndex ];
- var params = cameraDef[ cameraDef.type ];
+ node.position.fromArray( nodeDef.translation );
- if ( ! params ) {
+ }
- console.warn( 'THREE.GLTFLoader: Missing camera parameters.' );
- return;
+ if ( nodeDef.rotation !== undefined ) {
- }
+ node.quaternion.fromArray( nodeDef.rotation );
- if ( cameraDef.type === 'perspective' ) {
+ }
- camera = new PerspectiveCamera( MathUtils.radToDeg( params.yfov ), params.aspectRatio || 1, params.znear || 1, params.zfar || 2e6 );
+ if ( nodeDef.scale !== undefined ) {
- } else if ( cameraDef.type === 'orthographic' ) {
+ node.scale.fromArray( nodeDef.scale );
- camera = new OrthographicCamera( - params.xmag, params.xmag, params.ymag, - params.ymag, params.znear, params.zfar );
+ }
- }
+ }
- if ( cameraDef.name ) camera.name = this.createUniqueName( cameraDef.name );
+ parser.associations.set( node, { type: 'nodes', index: nodeIndex } );
- assignExtrasToUserData( camera, cameraDef );
+ return node;
- return Promise.resolve( camera );
+ } );
};
/**
- * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#skins
- * @param {number} skinIndex
- * @return {Promise}
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#scenes
+ * @param {number} sceneIndex
+ * @return {Promise}
*/
- GLTFParser.prototype.loadSkin = function ( skinIndex ) {
+ GLTFParser.prototype.loadScene = function () {
- var skinDef = this.json.skins[ skinIndex ];
+ // scene node hierachy builder
- var skinEntry = { joints: skinDef.joints };
+ function buildNodeHierachy( nodeId, parentObject, json, parser ) {
- if ( skinDef.inverseBindMatrices === undefined ) {
+ var nodeDef = json.nodes[ nodeId ];
- return Promise.resolve( skinEntry );
+ return parser.getDependency( 'node', nodeId ).then( function ( node ) {
- }
+ if ( nodeDef.skin === undefined ) return node;
- return this.getDependency( 'accessor', skinDef.inverseBindMatrices ).then( function ( accessor ) {
+ // build skeleton here as well
- skinEntry.inverseBindMatrices = accessor;
+ var skinEntry;
- return skinEntry;
+ return parser.getDependency( 'skin', nodeDef.skin ).then( function ( skin ) {
- } );
+ skinEntry = skin;
- };
+ var pendingJoints = [];
- /**
- * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#animations
- * @param {number} animationIndex
- * @return {Promise}
- */
- GLTFParser.prototype.loadAnimation = function ( animationIndex ) {
+ for ( var i = 0, il = skinEntry.joints.length; i < il; i ++ ) {
- var json = this.json;
+ pendingJoints.push( parser.getDependency( 'node', skinEntry.joints[ i ] ) );
- var animationDef = json.animations[ animationIndex ];
+ }
- var pendingNodes = [];
- var pendingInputAccessors = [];
- var pendingOutputAccessors = [];
- var pendingSamplers = [];
- var pendingTargets = [];
+ return Promise.all( pendingJoints );
- for ( var i = 0, il = animationDef.channels.length; i < il; i ++ ) {
+ } ).then( function ( jointNodes ) {
- var channel = animationDef.channels[ i ];
- var sampler = animationDef.samplers[ channel.sampler ];
- var target = channel.target;
- var name = target.node !== undefined ? target.node : target.id; // NOTE: target.id is deprecated.
- var input = animationDef.parameters !== undefined ? animationDef.parameters[ sampler.input ] : sampler.input;
- var output = animationDef.parameters !== undefined ? animationDef.parameters[ sampler.output ] : sampler.output;
+ node.traverse( function ( mesh ) {
- pendingNodes.push( this.getDependency( 'node', name ) );
- pendingInputAccessors.push( this.getDependency( 'accessor', input ) );
- pendingOutputAccessors.push( this.getDependency( 'accessor', output ) );
- pendingSamplers.push( sampler );
- pendingTargets.push( target );
+ if ( ! mesh.isMesh ) return;
- }
+ var bones = [];
+ var boneInverses = [];
- return Promise.all( [
+ for ( var j = 0, jl = jointNodes.length; j < jl; j ++ ) {
- Promise.all( pendingNodes ),
- Promise.all( pendingInputAccessors ),
- Promise.all( pendingOutputAccessors ),
- Promise.all( pendingSamplers ),
- Promise.all( pendingTargets )
+ var jointNode = jointNodes[ j ];
- ] ).then( function ( dependencies ) {
+ if ( jointNode ) {
- var nodes = dependencies[ 0 ];
- var inputAccessors = dependencies[ 1 ];
- var outputAccessors = dependencies[ 2 ];
- var samplers = dependencies[ 3 ];
- var targets = dependencies[ 4 ];
+ bones.push( jointNode );
- var tracks = [];
+ var mat = new Matrix4();
- for ( var i = 0, il = nodes.length; i < il; i ++ ) {
+ if ( skinEntry.inverseBindMatrices !== undefined ) {
- var node = nodes[ i ];
- var inputAccessor = inputAccessors[ i ];
- var outputAccessor = outputAccessors[ i ];
- var sampler = samplers[ i ];
- var target = targets[ i ];
+ mat.fromArray( skinEntry.inverseBindMatrices.array, j * 16 );
- if ( node === undefined ) continue;
+ }
- node.updateMatrix();
- node.matrixAutoUpdate = true;
+ boneInverses.push( mat );
- var TypedKeyframeTrack;
+ } else {
- switch ( PATH_PROPERTIES[ target.path ] ) {
+ console.warn( 'THREE.GLTFLoader: Joint "%s" could not be found.', skinEntry.joints[ j ] );
- case PATH_PROPERTIES.weights:
+ }
- TypedKeyframeTrack = NumberKeyframeTrack;
- break;
+ }
- case PATH_PROPERTIES.rotation:
+ mesh.bind( new Skeleton( bones, boneInverses ), mesh.matrixWorld );
- TypedKeyframeTrack = QuaternionKeyframeTrack;
- break;
+ } );
- case PATH_PROPERTIES.position:
- case PATH_PROPERTIES.scale:
- default:
+ return node;
- TypedKeyframeTrack = VectorKeyframeTrack;
- break;
+ } );
- }
+ } ).then( function ( node ) {
- var targetName = node.name ? node.name : node.uuid;
+ // build node hierachy
- var interpolation = sampler.interpolation !== undefined ? INTERPOLATION[ sampler.interpolation ] : InterpolateLinear;
+ parentObject.add( node );
- var targetNames = [];
+ var pending = [];
- if ( PATH_PROPERTIES[ target.path ] === PATH_PROPERTIES.weights ) {
+ if ( nodeDef.children ) {
- // Node may be a Group (glTF mesh with several primitives) or a Mesh.
- node.traverse( function ( object ) {
+ var children = nodeDef.children;
- if ( object.isMesh === true && object.morphTargetInfluences ) {
+ for ( var i = 0, il = children.length; i < il; i ++ ) {
- targetNames.push( object.name ? object.name : object.uuid );
+ var child = children[ i ];
+ pending.push( buildNodeHierachy( child, node, json, parser ) );
- }
+ }
- } );
+ }
- } else {
+ return Promise.all( pending );
- targetNames.push( targetName );
+ } );
- }
+ }
- var outputArray = outputAccessor.array;
+ return function loadScene( sceneIndex ) {
- if ( outputAccessor.normalized ) {
+ var json = this.json;
+ var extensions = this.extensions;
+ var sceneDef = this.json.scenes[ sceneIndex ];
+ var parser = this;
- var scale;
+ // Loader returns Group, not Scene.
+ // See: https://github.com/mrdoob/three.js/issues/18342#issuecomment-578981172
+ var scene = new Group();
+ if ( sceneDef.name ) scene.name = parser.createUniqueName( sceneDef.name );
- if ( outputArray.constructor === Int8Array ) {
+ assignExtrasToUserData( scene, sceneDef );
- scale = 1 / 127;
+ if ( sceneDef.extensions ) addUnknownExtensionsToUserData( extensions, scene, sceneDef );
- } else if ( outputArray.constructor === Uint8Array ) {
+ var nodeIds = sceneDef.nodes || [];
- scale = 1 / 255;
+ var pending = [];
- } else if ( outputArray.constructor == Int16Array ) {
+ for ( var i = 0, il = nodeIds.length; i < il; i ++ ) {
- scale = 1 / 32767;
+ pending.push( buildNodeHierachy( nodeIds[ i ], scene, json, parser ) );
- } else if ( outputArray.constructor === Uint16Array ) {
+ }
- scale = 1 / 65535;
+ return Promise.all( pending ).then( function () {
- } else {
+ return scene;
- throw new Error( 'THREE.GLTFLoader: Unsupported output accessor component type.' );
+ } );
- }
+ };
- var scaled = new Float32Array( outputArray.length );
+ }();
- for ( var j = 0, jl = outputArray.length; j < jl; j ++ ) {
+ return GLTFLoader;
- scaled[ j ] = outputArray[ j ] * scale;
+ } )();
- }
+ /**
+ * @webxr-input-profiles/motion-controllers 1.0.0 https://github.com/immersive-web/webxr-input-profiles
+ */
- outputArray = scaled;
+ const Constants = {
+ Handedness: Object.freeze({
+ NONE: 'none',
+ LEFT: 'left',
+ RIGHT: 'right'
+ }),
- }
+ ComponentState: Object.freeze({
+ DEFAULT: 'default',
+ TOUCHED: 'touched',
+ PRESSED: 'pressed'
+ }),
- for ( var j = 0, jl = targetNames.length; j < jl; j ++ ) {
+ ComponentProperty: Object.freeze({
+ BUTTON: 'button',
+ X_AXIS: 'xAxis',
+ Y_AXIS: 'yAxis',
+ STATE: 'state'
+ }),
- var track = new TypedKeyframeTrack(
- targetNames[ j ] + '.' + PATH_PROPERTIES[ target.path ],
- inputAccessor.array,
- outputArray,
- interpolation
- );
+ ComponentType: Object.freeze({
+ TRIGGER: 'trigger',
+ SQUEEZE: 'squeeze',
+ TOUCHPAD: 'touchpad',
+ THUMBSTICK: 'thumbstick',
+ BUTTON: 'button'
+ }),
- // Override interpolation with custom factory method.
- if ( sampler.interpolation === 'CUBICSPLINE' ) {
+ ButtonTouchThreshold: 0.05,
- track.createInterpolant = function InterpolantFactoryMethodGLTFCubicSpline( result ) {
+ AxisTouchThreshold: 0.1,
- // A CUBICSPLINE keyframe in glTF has three output values for each input value,
- // representing inTangent, splineVertex, and outTangent. As a result, track.getValueSize()
- // must be divided by three to get the interpolant's sampleSize argument.
+ VisualResponseProperty: Object.freeze({
+ TRANSFORM: 'transform',
+ VISIBILITY: 'visibility'
+ })
+ };
+
+ /**
+ * @description Static helper function to fetch a JSON file and turn it into a JS object
+ * @param {string} path - Path to JSON file to be fetched
+ */
+ async function fetchJsonFile(path) {
+ const response = await fetch(path);
+ if (!response.ok) {
+ throw new Error(response.statusText);
+ } else {
+ return response.json();
+ }
+ }
- return new GLTFCubicSplineInterpolant( this.times, this.values, this.getValueSize() / 3, result );
+ async function fetchProfilesList(basePath) {
+ if (!basePath) {
+ throw new Error('No basePath supplied');
+ }
- };
+ const profileListFileName = 'profilesList.json';
+ const profilesList = await fetchJsonFile(`${basePath}/${profileListFileName}`);
+ return profilesList;
+ }
- // Mark as CUBICSPLINE. `track.getInterpolation()` doesn't support custom interpolants.
- track.createInterpolant.isInterpolantFactoryMethodGLTFCubicSpline = true;
+ async function fetchProfile(xrInputSource, basePath, defaultProfile = null, getAssetPath = true) {
+ if (!xrInputSource) {
+ throw new Error('No xrInputSource supplied');
+ }
- }
+ if (!basePath) {
+ throw new Error('No basePath supplied');
+ }
- tracks.push( track );
+ // Get the list of profiles
+ const supportedProfilesList = await fetchProfilesList(basePath);
- }
+ // Find the relative path to the first requested profile that is recognized
+ let match;
+ xrInputSource.profiles.some((profileId) => {
+ const supportedProfile = supportedProfilesList[profileId];
+ if (supportedProfile) {
+ match = {
+ profileId,
+ profilePath: `${basePath}/${supportedProfile.path}`,
+ deprecated: !!supportedProfile.deprecated
+ };
+ }
+ return !!match;
+ });
- }
+ if (!match) {
+ if (!defaultProfile) {
+ throw new Error('No matching profile name found');
+ }
- var name = animationDef.name ? animationDef.name : 'animation_' + animationIndex;
+ const supportedProfile = supportedProfilesList[defaultProfile];
+ if (!supportedProfile) {
+ throw new Error(`No matching profile name found and default profile "${defaultProfile}" missing.`);
+ }
- return new AnimationClip( name, undefined, tracks );
+ match = {
+ profileId: defaultProfile,
+ profilePath: `${basePath}/${supportedProfile.path}`,
+ deprecated: !!supportedProfile.deprecated
+ };
+ }
- } );
+ const profile = await fetchJsonFile(match.profilePath);
- };
+ let assetPath;
+ if (getAssetPath) {
+ let layout;
+ if (xrInputSource.handedness === 'any') {
+ layout = profile.layouts[Object.keys(profile.layouts)[0]];
+ } else {
+ layout = profile.layouts[xrInputSource.handedness];
+ }
+ if (!layout) {
+ throw new Error(
+ `No matching handedness, ${xrInputSource.handedness}, in profile ${match.profileId}`
+ );
+ }
- /**
- * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#nodes-and-hierarchy
- * @param {number} nodeIndex
- * @return {Promise}
- */
- GLTFParser.prototype.loadNode = function ( nodeIndex ) {
+ if (layout.assetPath) {
+ assetPath = match.profilePath.replace('profile.json', layout.assetPath);
+ }
+ }
- var json = this.json;
- var extensions = this.extensions;
- var parser = this;
+ return { profile, assetPath };
+ }
- var nodeDef = json.nodes[ nodeIndex ];
+ /** @constant {Object} */
+ const defaultComponentValues = {
+ xAxis: 0,
+ yAxis: 0,
+ button: 0,
+ state: Constants.ComponentState.DEFAULT
+ };
- // reserve node's name before its dependencies, so the root has the intended name.
- var nodeName = nodeDef.name ? parser.createUniqueName( nodeDef.name ) : '';
+ /**
+ * @description Converts an X, Y coordinate from the range -1 to 1 (as reported by the Gamepad
+ * API) to the range 0 to 1 (for interpolation). Also caps the X, Y values to be bounded within
+ * a circle. This ensures that thumbsticks are not animated outside the bounds of their physical
+ * range of motion and touchpads do not report touch locations off their physical bounds.
+ * @param {number} x The original x coordinate in the range -1 to 1
+ * @param {number} y The original y coordinate in the range -1 to 1
+ */
+ function normalizeAxes(x = 0, y = 0) {
+ let xAxis = x;
+ let yAxis = y;
- return ( function () {
+ // Determine if the point is outside the bounds of the circle
+ // and, if so, place it on the edge of the circle
+ const hypotenuse = Math.sqrt((x * x) + (y * y));
+ if (hypotenuse > 1) {
+ const theta = Math.atan2(y, x);
+ xAxis = Math.cos(theta);
+ yAxis = Math.sin(theta);
+ }
- var pending = [];
+ // Scale and move the circle so values are in the interpolation range. The circle's origin moves
+ // from (0, 0) to (0.5, 0.5). The circle's radius scales from 1 to be 0.5.
+ const result = {
+ normalizedXAxis: (xAxis * 0.5) + 0.5,
+ normalizedYAxis: (yAxis * 0.5) + 0.5
+ };
+ return result;
+ }
- if ( nodeDef.mesh !== undefined ) {
+ /**
+ * Contains the description of how the 3D model should visually respond to a specific user input.
+ * This is accomplished by initializing the object with the name of a node in the 3D model and
+ * property that need to be modified in response to user input, the name of the nodes representing
+ * the allowable range of motion, and the name of the input which triggers the change. In response
+ * to the named input changing, this object computes the appropriate weighting to use for
+ * interpolating between the range of motion nodes.
+ */
+ class VisualResponse {
+ constructor(visualResponseDescription) {
+ this.componentProperty = visualResponseDescription.componentProperty;
+ this.states = visualResponseDescription.states;
+ this.valueNodeName = visualResponseDescription.valueNodeName;
+ this.valueNodeProperty = visualResponseDescription.valueNodeProperty;
- pending.push( parser.getDependency( 'mesh', nodeDef.mesh ).then( function ( mesh ) {
+ if (this.valueNodeProperty === Constants.VisualResponseProperty.TRANSFORM) {
+ this.minNodeName = visualResponseDescription.minNodeName;
+ this.maxNodeName = visualResponseDescription.maxNodeName;
+ }
- var node = parser._getNodeRef( parser.meshCache, nodeDef.mesh, mesh );
+ // Initializes the response's current value based on default data
+ this.value = 0;
+ this.updateFromComponent(defaultComponentValues);
+ }
- // if weights are provided on the node, override weights on the mesh.
- if ( nodeDef.weights !== undefined ) {
+ /**
+ * Computes the visual response's interpolation weight based on component state
+ * @param {Object} componentValues - The component from which to update
+ * @param {number} xAxis - The reported X axis value of the component
+ * @param {number} yAxis - The reported Y axis value of the component
+ * @param {number} button - The reported value of the component's button
+ * @param {string} state - The component's active state
+ */
+ updateFromComponent({
+ xAxis, yAxis, button, state
+ }) {
+ const { normalizedXAxis, normalizedYAxis } = normalizeAxes(xAxis, yAxis);
+ switch (this.componentProperty) {
+ case Constants.ComponentProperty.X_AXIS:
+ this.value = (this.states.includes(state)) ? normalizedXAxis : 0.5;
+ break;
+ case Constants.ComponentProperty.Y_AXIS:
+ this.value = (this.states.includes(state)) ? normalizedYAxis : 0.5;
+ break;
+ case Constants.ComponentProperty.BUTTON:
+ this.value = (this.states.includes(state)) ? button : 0;
+ break;
+ case Constants.ComponentProperty.STATE:
+ if (this.valueNodeProperty === Constants.VisualResponseProperty.VISIBILITY) {
+ this.value = (this.states.includes(state));
+ } else {
+ this.value = this.states.includes(state) ? 1.0 : 0.0;
+ }
+ break;
+ default:
+ throw new Error(`Unexpected visualResponse componentProperty ${this.componentProperty}`);
+ }
+ }
+ }
- node.traverse( function ( o ) {
+ class Component {
+ /**
+ * @param {Object} componentId - Id of the component
+ * @param {Object} componentDescription - Description of the component to be created
+ */
+ constructor(componentId, componentDescription) {
+ if (!componentId
+ || !componentDescription
+ || !componentDescription.visualResponses
+ || !componentDescription.gamepadIndices
+ || Object.keys(componentDescription.gamepadIndices).length === 0) {
+ throw new Error('Invalid arguments supplied');
+ }
- if ( ! o.isMesh ) return;
+ this.id = componentId;
+ this.type = componentDescription.type;
+ this.rootNodeName = componentDescription.rootNodeName;
+ this.touchPointNodeName = componentDescription.touchPointNodeName;
- for ( var i = 0, il = nodeDef.weights.length; i < il; i ++ ) {
+ // Build all the visual responses for this component
+ this.visualResponses = {};
+ Object.keys(componentDescription.visualResponses).forEach((responseName) => {
+ const visualResponse = new VisualResponse(componentDescription.visualResponses[responseName]);
+ this.visualResponses[responseName] = visualResponse;
+ });
- o.morphTargetInfluences[ i ] = nodeDef.weights[ i ];
+ // Set default values
+ this.gamepadIndices = Object.assign({}, componentDescription.gamepadIndices);
- }
+ this.values = {
+ state: Constants.ComponentState.DEFAULT,
+ button: (this.gamepadIndices.button !== undefined) ? 0 : undefined,
+ xAxis: (this.gamepadIndices.xAxis !== undefined) ? 0 : undefined,
+ yAxis: (this.gamepadIndices.yAxis !== undefined) ? 0 : undefined
+ };
+ }
- } );
+ get data() {
+ const data = { id: this.id, ...this.values };
+ return data;
+ }
- }
+ /**
+ * @description Poll for updated data based on current gamepad state
+ * @param {Object} gamepad - The gamepad object from which the component data should be polled
+ */
+ updateFromGamepad(gamepad) {
+ // Set the state to default before processing other data sources
+ this.values.state = Constants.ComponentState.DEFAULT;
- return node;
+ // Get and normalize button
+ if (this.gamepadIndices.button !== undefined
+ && gamepad.buttons.length > this.gamepadIndices.button) {
+ const gamepadButton = gamepad.buttons[this.gamepadIndices.button];
+ this.values.button = gamepadButton.value;
+ this.values.button = (this.values.button < 0) ? 0 : this.values.button;
+ this.values.button = (this.values.button > 1) ? 1 : this.values.button;
- } ) );
+ // Set the state based on the button
+ if (gamepadButton.pressed || this.values.button === 1) {
+ this.values.state = Constants.ComponentState.PRESSED;
+ } else if (gamepadButton.touched || this.values.button > Constants.ButtonTouchThreshold) {
+ this.values.state = Constants.ComponentState.TOUCHED;
+ }
+ }
+
+ // Get and normalize x axis value
+ if (this.gamepadIndices.xAxis !== undefined
+ && gamepad.axes.length > this.gamepadIndices.xAxis) {
+ this.values.xAxis = gamepad.axes[this.gamepadIndices.xAxis];
+ this.values.xAxis = (this.values.xAxis < -1) ? -1 : this.values.xAxis;
+ this.values.xAxis = (this.values.xAxis > 1) ? 1 : this.values.xAxis;
- }
+ // If the state is still default, check if the xAxis makes it touched
+ if (this.values.state === Constants.ComponentState.DEFAULT
+ && Math.abs(this.values.xAxis) > Constants.AxisTouchThreshold) {
+ this.values.state = Constants.ComponentState.TOUCHED;
+ }
+ }
- if ( nodeDef.camera !== undefined ) {
+ // Get and normalize Y axis value
+ if (this.gamepadIndices.yAxis !== undefined
+ && gamepad.axes.length > this.gamepadIndices.yAxis) {
+ this.values.yAxis = gamepad.axes[this.gamepadIndices.yAxis];
+ this.values.yAxis = (this.values.yAxis < -1) ? -1 : this.values.yAxis;
+ this.values.yAxis = (this.values.yAxis > 1) ? 1 : this.values.yAxis;
- pending.push( parser.getDependency( 'camera', nodeDef.camera ).then( function ( camera ) {
+ // If the state is still default, check if the yAxis makes it touched
+ if (this.values.state === Constants.ComponentState.DEFAULT
+ && Math.abs(this.values.yAxis) > Constants.AxisTouchThreshold) {
+ this.values.state = Constants.ComponentState.TOUCHED;
+ }
+ }
- return parser._getNodeRef( parser.cameraCache, nodeDef.camera, camera );
+ // Update the visual response weights based on the current component data
+ Object.values(this.visualResponses).forEach((visualResponse) => {
+ visualResponse.updateFromComponent(this.values);
+ });
+ }
+ }
- } ) );
+ /**
+ * @description Builds a motion controller with components and visual responses based on the
+ * supplied profile description. Data is polled from the xrInputSource's gamepad.
+ * @author Nell Waliczek / https://github.com/NellWaliczek
+ */
+ class MotionController {
+ /**
+ * @param {Object} xrInputSource - The XRInputSource to build the MotionController around
+ * @param {Object} profile - The best matched profile description for the supplied xrInputSource
+ * @param {Object} assetUrl
+ */
+ constructor(xrInputSource, profile, assetUrl) {
+ if (!xrInputSource) {
+ throw new Error('No xrInputSource supplied');
+ }
- }
+ if (!profile) {
+ throw new Error('No profile supplied');
+ }
- parser._invokeAll( function ( ext ) {
+ this.xrInputSource = xrInputSource;
+ this.assetUrl = assetUrl;
+ this.id = profile.profileId;
- return ext.createNodeAttachment && ext.createNodeAttachment( nodeIndex );
+ // Build child components as described in the profile description
+ this.layoutDescription = profile.layouts[xrInputSource.handedness];
+ this.components = {};
+ Object.keys(this.layoutDescription.components).forEach((componentId) => {
+ const componentDescription = this.layoutDescription.components[componentId];
+ this.components[componentId] = new Component(componentId, componentDescription);
+ });
- } ).forEach( function ( promise ) {
+ // Initialize components based on current gamepad state
+ this.updateFromGamepad();
+ }
- pending.push( promise );
+ get gripSpace() {
+ return this.xrInputSource.gripSpace;
+ }
- } );
+ get targetRaySpace() {
+ return this.xrInputSource.targetRaySpace;
+ }
- return Promise.all( pending );
+ /**
+ * @description Returns a subset of component data for simplified debugging
+ */
+ get data() {
+ const data = [];
+ Object.values(this.components).forEach((component) => {
+ data.push(component.data);
+ });
+ return data;
+ }
- }() ).then( function ( objects ) {
+ /**
+ * @description Poll for updated data based on current gamepad state
+ */
+ updateFromGamepad() {
+ Object.values(this.components).forEach((component) => {
+ component.updateFromGamepad(this.xrInputSource.gamepad);
+ });
+ }
+ }
- var node;
+ const DEFAULT_PROFILES_PATH = 'https://cdn.jsdelivr.net/npm/@webxr-input-profiles/assets@1.0/dist/profiles';
+ const DEFAULT_PROFILE = 'generic-trigger';
- // .isBone isn't in glTF spec. See ._markDefs
- if ( nodeDef.isBone === true ) {
+ function XRControllerModel( ) {
- node = new Bone();
+ Object3D.call( this );
- } else if ( objects.length > 1 ) {
+ this.motionController = null;
+ this.envMap = null;
- node = new Group();
+ }
- } else if ( objects.length === 1 ) {
+ XRControllerModel.prototype = Object.assign( Object.create( Object3D.prototype ), {
- node = objects[ 0 ];
+ constructor: XRControllerModel,
- } else {
+ setEnvironmentMap: function ( envMap ) {
- node = new Object3D();
+ if ( this.envMap == envMap ) {
- }
+ return this;
- if ( node !== objects[ 0 ] ) {
+ }
- for ( var i = 0, il = objects.length; i < il; i ++ ) {
+ this.envMap = envMap;
+ this.traverse( ( child ) => {
- node.add( objects[ i ] );
+ if ( child.isMesh ) {
- }
+ child.material.envMap = this.envMap;
+ child.material.needsUpdate = true;
}
- if ( nodeDef.name ) {
+ } );
- node.userData.name = nodeDef.name;
- node.name = nodeName;
+ return this;
- }
+ },
- assignExtrasToUserData( node, nodeDef );
+ /**
+ * Polls data from the XRInputSource and updates the model's components to match
+ * the real world data
+ */
+ updateMatrixWorld: function ( force ) {
- if ( nodeDef.extensions ) addUnknownExtensionsToUserData( extensions, node, nodeDef );
+ Object3D.prototype.updateMatrixWorld.call( this, force );
- if ( nodeDef.matrix !== undefined ) {
+ if ( ! this.motionController ) return;
- var matrix = new Matrix4();
- matrix.fromArray( nodeDef.matrix );
- node.applyMatrix4( matrix );
+ // Cause the MotionController to poll the Gamepad for data
+ this.motionController.updateFromGamepad();
- } else {
+ // Update the 3D model to reflect the button, thumbstick, and touchpad state
+ Object.values( this.motionController.components ).forEach( ( component ) => {
- if ( nodeDef.translation !== undefined ) {
+ // Update node data based on the visual responses' current states
+ Object.values( component.visualResponses ).forEach( ( visualResponse ) => {
- node.position.fromArray( nodeDef.translation );
+ const { valueNode, minNode, maxNode, value, valueNodeProperty } = visualResponse;
- }
+ // Skip if the visual response node is not found. No error is needed,
+ // because it will have been reported at load time.
+ if ( ! valueNode ) return;
- if ( nodeDef.rotation !== undefined ) {
+ // Calculate the new properties based on the weight supplied
+ if ( valueNodeProperty === Constants.VisualResponseProperty.VISIBILITY ) {
- node.quaternion.fromArray( nodeDef.rotation );
+ valueNode.visible = value;
- }
+ } else if ( valueNodeProperty === Constants.VisualResponseProperty.TRANSFORM ) {
- if ( nodeDef.scale !== undefined ) {
+ Quaternion.slerp(
+ minNode.quaternion,
+ maxNode.quaternion,
+ valueNode.quaternion,
+ value
+ );
- node.scale.fromArray( nodeDef.scale );
+ valueNode.position.lerpVectors(
+ minNode.position,
+ maxNode.position,
+ value
+ );
}
- }
+ } );
- parser.associations.set( node, { type: 'nodes', index: nodeIndex } );
+ } );
- return node;
+ }
- } );
+ } );
- };
+ /**
+ * Walks the model's tree to find the nodes needed to animate the components and
+ * saves them to the motionContoller components for use in the frame loop. When
+ * touchpads are found, attaches a touch dot to them.
+ */
+ function findNodes( motionController, scene ) {
- /**
- * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#scenes
- * @param {number} sceneIndex
- * @return {Promise}
- */
- GLTFParser.prototype.loadScene = function () {
+ // Loop through the components and find the nodes needed for each components' visual responses
+ Object.values( motionController.components ).forEach( ( component ) => {
- // scene node hierachy builder
+ const { type, touchPointNodeName, visualResponses } = component;
- function buildNodeHierachy( nodeId, parentObject, json, parser ) {
+ if ( type === Constants.ComponentType.TOUCHPAD ) {
- var nodeDef = json.nodes[ nodeId ];
+ component.touchPointNode = scene.getObjectByName( touchPointNodeName );
+ if ( component.touchPointNode ) {
- return parser.getDependency( 'node', nodeId ).then( function ( node ) {
+ // Attach a touch dot to the touchpad.
+ const sphereGeometry = new SphereBufferGeometry( 0.001 );
+ const material = new MeshBasicMaterial( { color: 0x0000FF } );
+ const sphere = new Mesh( sphereGeometry, material );
+ component.touchPointNode.add( sphere );
- if ( nodeDef.skin === undefined ) return node;
+ } else {
- // build skeleton here as well
+ console.warn( `Could not find touch dot, ${component.touchPointNodeName}, in touchpad component ${component.id}` );
- var skinEntry;
+ }
- return parser.getDependency( 'skin', nodeDef.skin ).then( function ( skin ) {
+ }
- skinEntry = skin;
+ // Loop through all the visual responses to be applied to this component
+ Object.values( visualResponses ).forEach( ( visualResponse ) => {
- var pendingJoints = [];
+ const { valueNodeName, minNodeName, maxNodeName, valueNodeProperty } = visualResponse;
- for ( var i = 0, il = skinEntry.joints.length; i < il; i ++ ) {
+ // If animating a transform, find the two nodes to be interpolated between.
+ if ( valueNodeProperty === Constants.VisualResponseProperty.TRANSFORM ) {
- pendingJoints.push( parser.getDependency( 'node', skinEntry.joints[ i ] ) );
+ visualResponse.minNode = scene.getObjectByName( minNodeName );
+ visualResponse.maxNode = scene.getObjectByName( maxNodeName );
- }
+ // If the extents cannot be found, skip this animation
+ if ( ! visualResponse.minNode ) {
- return Promise.all( pendingJoints );
+ console.warn( `Could not find ${minNodeName} in the model` );
+ return;
- } ).then( function ( jointNodes ) {
+ }
- node.traverse( function ( mesh ) {
+ if ( ! visualResponse.maxNode ) {
- if ( ! mesh.isMesh ) return;
+ console.warn( `Could not find ${maxNodeName} in the model` );
+ return;
- var bones = [];
- var boneInverses = [];
+ }
- for ( var j = 0, jl = jointNodes.length; j < jl; j ++ ) {
+ }
- var jointNode = jointNodes[ j ];
+ // If the target node cannot be found, skip this animation
+ visualResponse.valueNode = scene.getObjectByName( valueNodeName );
+ if ( ! visualResponse.valueNode ) {
- if ( jointNode ) {
+ console.warn( `Could not find ${valueNodeName} in the model` );
- bones.push( jointNode );
+ }
- var mat = new Matrix4();
+ } );
- if ( skinEntry.inverseBindMatrices !== undefined ) {
+ } );
- mat.fromArray( skinEntry.inverseBindMatrices.array, j * 16 );
+ }
- }
+ function addAssetSceneToControllerModel( controllerModel, scene ) {
- boneInverses.push( mat );
+ // Find the nodes needed for animation and cache them on the motionController.
+ findNodes( controllerModel.motionController, scene );
- } else {
+ // Apply any environment map that the mesh already has set.
+ if ( controllerModel.envMap ) {
- console.warn( 'THREE.GLTFLoader: Joint "%s" could not be found.', skinEntry.joints[ j ] );
+ scene.traverse( ( child ) => {
- }
+ if ( child.isMesh ) {
- }
+ child.material.envMap = controllerModel.envMap;
+ child.material.needsUpdate = true;
- mesh.bind( new Skeleton( bones, boneInverses ), mesh.matrixWorld );
+ }
- } );
+ } );
- return node;
+ }
- } );
+ // Add the glTF scene to the controllerModel.
+ controllerModel.add( scene );
- } ).then( function ( node ) {
+ }
- // build node hierachy
+ var XRControllerModelFactory = ( function () {
- parentObject.add( node );
+ function XRControllerModelFactory( gltfLoader = null ) {
- var pending = [];
+ this.gltfLoader = gltfLoader;
+ this.path = DEFAULT_PROFILES_PATH;
+ this._assetCache = {};
- if ( nodeDef.children ) {
+ // If a GLTFLoader wasn't supplied to the constructor create a new one.
+ if ( ! this.gltfLoader ) {
- var children = nodeDef.children;
+ this.gltfLoader = new GLTFLoader();
- for ( var i = 0, il = children.length; i < il; i ++ ) {
+ }
- var child = children[ i ];
- pending.push( buildNodeHierachy( child, node, json, parser ) );
+ }
- }
+ XRControllerModelFactory.prototype = {
- }
+ constructor: XRControllerModelFactory,
- return Promise.all( pending );
+ createControllerModel: function ( controller ) {
- } );
+ const controllerModel = new XRControllerModel();
+ let scene = null;
- }
+ controller.addEventListener( 'connected', ( event ) => {
- return function loadScene( sceneIndex ) {
+ const xrInputSource = event.data;
- var json = this.json;
- var extensions = this.extensions;
- var sceneDef = this.json.scenes[ sceneIndex ];
- var parser = this;
+ if ( xrInputSource.targetRayMode !== 'tracked-pointer' || ! xrInputSource.gamepad ) return;
- // Loader returns Group, not Scene.
- // See: https://github.com/mrdoob/three.js/issues/18342#issuecomment-578981172
- var scene = new Group();
- if ( sceneDef.name ) scene.name = parser.createUniqueName( sceneDef.name );
+ fetchProfile( xrInputSource, this.path, DEFAULT_PROFILE ).then( ( { profile, assetPath } ) => {
- assignExtrasToUserData( scene, sceneDef );
+ controllerModel.motionController = new MotionController(
+ xrInputSource,
+ profile,
+ assetPath
+ );
- if ( sceneDef.extensions ) addUnknownExtensionsToUserData( extensions, scene, sceneDef );
+ const cachedAsset = this._assetCache[ controllerModel.motionController.assetUrl ];
+ if ( cachedAsset ) {
- var nodeIds = sceneDef.nodes || [];
+ scene = cachedAsset.scene.clone();
- var pending = [];
+ addAssetSceneToControllerModel( controllerModel, scene );
- for ( var i = 0, il = nodeIds.length; i < il; i ++ ) {
+ } else {
- pending.push( buildNodeHierachy( nodeIds[ i ], scene, json, parser ) );
+ if ( ! this.gltfLoader ) {
- }
+ throw new Error( 'GLTFLoader not set.' );
- return Promise.all( pending ).then( function () {
+ }
- return scene;
+ this.gltfLoader.setPath( '' );
+ this.gltfLoader.load( controllerModel.motionController.assetUrl, ( asset ) => {
- } );
+ this._assetCache[ controllerModel.motionController.assetUrl ] = asset;
- };
+ scene = asset.scene.clone();
- }();
+ addAssetSceneToControllerModel( controllerModel, scene );
- return GLTFLoader;
+ },
+ null,
+ () => {
- } )();
+ throw new Error( `Asset ${controllerModel.motionController.assetUrl} missing or malformed.` );
- /**
- * @webxr-input-profiles/motion-controllers 1.0.0 https://github.com/immersive-web/webxr-input-profiles
- */
+ } );
- const Constants = {
- Handedness: Object.freeze({
- NONE: 'none',
- LEFT: 'left',
- RIGHT: 'right'
- }),
+ }
- ComponentState: Object.freeze({
- DEFAULT: 'default',
- TOUCHED: 'touched',
- PRESSED: 'pressed'
- }),
+ } ).catch( ( err ) => {
- ComponentProperty: Object.freeze({
- BUTTON: 'button',
- X_AXIS: 'xAxis',
- Y_AXIS: 'yAxis',
- STATE: 'state'
- }),
+ console.warn( err );
- ComponentType: Object.freeze({
- TRIGGER: 'trigger',
- SQUEEZE: 'squeeze',
- TOUCHPAD: 'touchpad',
- THUMBSTICK: 'thumbstick',
- BUTTON: 'button'
- }),
+ } );
- ButtonTouchThreshold: 0.05,
+ } );
- AxisTouchThreshold: 0.1,
+ controller.addEventListener( 'disconnected', () => {
- VisualResponseProperty: Object.freeze({
- TRANSFORM: 'transform',
- VISIBILITY: 'visibility'
- })
- };
+ controllerModel.motionController = null;
+ controllerModel.remove( scene );
+ scene = null;
- /**
- * @description Static helper function to fetch a JSON file and turn it into a JS object
- * @param {string} path - Path to JSON file to be fetched
- */
- async function fetchJsonFile(path) {
- const response = await fetch(path);
- if (!response.ok) {
- throw new Error(response.statusText);
- } else {
- return response.json();
- }
- }
+ } );
- async function fetchProfilesList(basePath) {
- if (!basePath) {
- throw new Error('No basePath supplied');
- }
+ return controllerModel;
- const profileListFileName = 'profilesList.json';
- const profilesList = await fetchJsonFile(`${basePath}/${profileListFileName}`);
- return profilesList;
- }
+ }
- async function fetchProfile(xrInputSource, basePath, defaultProfile = null, getAssetPath = true) {
- if (!xrInputSource) {
- throw new Error('No xrInputSource supplied');
- }
+ };
- if (!basePath) {
- throw new Error('No basePath supplied');
- }
+ return XRControllerModelFactory;
- // Get the list of profiles
- const supportedProfilesList = await fetchProfilesList(basePath);
+ } )();
- // Find the relative path to the first requested profile that is recognized
- let match;
- xrInputSource.profiles.some((profileId) => {
- const supportedProfile = supportedProfilesList[profileId];
- if (supportedProfile) {
- match = {
- profileId,
- profilePath: `${basePath}/${supportedProfile.path}`,
- deprecated: !!supportedProfile.deprecated
- };
- }
- return !!match;
- });
+ let fakeCam = new PerspectiveCamera();
- if (!match) {
- if (!defaultProfile) {
- throw new Error('No matching profile name found');
- }
+ function toScene(vec, ref){
+ let node = ref.clone();
+ node.updateMatrix();
+ node.updateMatrixWorld();
- const supportedProfile = supportedProfilesList[defaultProfile];
- if (!supportedProfile) {
- throw new Error(`No matching profile name found and default profile "${defaultProfile}" missing.`);
- }
+ let result = vec.clone().applyMatrix4(node.matrix);
+ result.z -= 0.8 * node.scale.x;
- match = {
- profileId: defaultProfile,
- profilePath: `${basePath}/${supportedProfile.path}`,
- deprecated: !!supportedProfile.deprecated
- };
- }
+ return result;
+ };
- const profile = await fetchJsonFile(match.profilePath);
+ function computeMove(vrControls, controller){
- let assetPath;
- if (getAssetPath) {
- let layout;
- if (xrInputSource.handedness === 'any') {
- layout = profile.layouts[Object.keys(profile.layouts)[0]];
- } else {
- layout = profile.layouts[xrInputSource.handedness];
- }
- if (!layout) {
- throw new Error(
- `No matching handedness, ${xrInputSource.handedness}, in profile ${match.profileId}`
- );
- }
+ if(!controller || !controller.inputSource || !controller.inputSource.gamepad){
+ return null;
+ }
- if (layout.assetPath) {
- assetPath = match.profilePath.replace('profile.json', layout.assetPath);
- }
- }
+ let pad = controller.inputSource.gamepad;
- return { profile, assetPath };
- }
+ let axes = pad.axes;
+ // [0,1] are for touchpad, [2,3] for thumbsticks?
+ let y = 0;
+ if(axes.length === 2){
+ y = axes[1];
+ }else if(axes.length === 4){
+ y = axes[3];
+ }
- /** @constant {Object} */
- const defaultComponentValues = {
- xAxis: 0,
- yAxis: 0,
- button: 0,
- state: Constants.ComponentState.DEFAULT
- };
+ y = Math.sign(y) * (2 * y) ** 2;
- /**
- * @description Converts an X, Y coordinate from the range -1 to 1 (as reported by the Gamepad
- * API) to the range 0 to 1 (for interpolation). Also caps the X, Y values to be bounded within
- * a circle. This ensures that thumbsticks are not animated outside the bounds of their physical
- * range of motion and touchpads do not report touch locations off their physical bounds.
- * @param {number} x The original x coordinate in the range -1 to 1
- * @param {number} y The original y coordinate in the range -1 to 1
- */
- function normalizeAxes(x = 0, y = 0) {
- let xAxis = x;
- let yAxis = y;
+ let maxSize = 0;
+ for(let pc of viewer.scene.pointclouds){
+ let size = pc.boundingBox.min.distanceTo(pc.boundingBox.max);
+ maxSize = Math.max(maxSize, size);
+ }
+ let multiplicator = Math.pow(maxSize, 0.5) / 2;
- // Determine if the point is outside the bounds of the circle
- // and, if so, place it on the edge of the circle
- const hypotenuse = Math.sqrt((x * x) + (y * y));
- if (hypotenuse > 1) {
- const theta = Math.atan2(y, x);
- xAxis = Math.cos(theta);
- yAxis = Math.sin(theta);
- }
+ let scale = vrControls.node.scale.x;
+ let moveSpeed = viewer.getMoveSpeed();
+ let amount = multiplicator * y * (moveSpeed ** 0.5) / scale;
- // Scale and move the circle so values are in the interpolation range. The circle's origin moves
- // from (0, 0) to (0.5, 0.5). The circle's radius scales from 1 to be 0.5.
- const result = {
- normalizedXAxis: (xAxis * 0.5) + 0.5,
- normalizedYAxis: (yAxis * 0.5) + 0.5
- };
- return result;
- }
- /**
- * Contains the description of how the 3D model should visually respond to a specific user input.
- * This is accomplished by initializing the object with the name of a node in the 3D model and
- * property that need to be modified in response to user input, the name of the nodes representing
- * the allowable range of motion, and the name of the input which triggers the change. In response
- * to the named input changing, this object computes the appropriate weighting to use for
- * interpolating between the range of motion nodes.
- */
- class VisualResponse {
- constructor(visualResponseDescription) {
- this.componentProperty = visualResponseDescription.componentProperty;
- this.states = visualResponseDescription.states;
- this.valueNodeName = visualResponseDescription.valueNodeName;
- this.valueNodeProperty = visualResponseDescription.valueNodeProperty;
+ let rotation = new Quaternion().setFromEuler(controller.rotation);
+ let dir = new Vector3(0, 0, -1);
+ dir.applyQuaternion(rotation);
- if (this.valueNodeProperty === Constants.VisualResponseProperty.TRANSFORM) {
- this.minNodeName = visualResponseDescription.minNodeName;
- this.maxNodeName = visualResponseDescription.maxNodeName;
- }
+ let move = dir.clone().multiplyScalar(amount);
- // Initializes the response's current value based on default data
- this.value = 0;
- this.updateFromComponent(defaultComponentValues);
- }
+ let p1 = vrControls.toScene(controller.position);
+ let p2 = vrControls.toScene(controller.position.clone().add(move));
- /**
- * Computes the visual response's interpolation weight based on component state
- * @param {Object} componentValues - The component from which to update
- * @param {number} xAxis - The reported X axis value of the component
- * @param {number} yAxis - The reported Y axis value of the component
- * @param {number} button - The reported value of the component's button
- * @param {string} state - The component's active state
- */
- updateFromComponent({
- xAxis, yAxis, button, state
- }) {
- const { normalizedXAxis, normalizedYAxis } = normalizeAxes(xAxis, yAxis);
- switch (this.componentProperty) {
- case Constants.ComponentProperty.X_AXIS:
- this.value = (this.states.includes(state)) ? normalizedXAxis : 0.5;
- break;
- case Constants.ComponentProperty.Y_AXIS:
- this.value = (this.states.includes(state)) ? normalizedYAxis : 0.5;
- break;
- case Constants.ComponentProperty.BUTTON:
- this.value = (this.states.includes(state)) ? button : 0;
- break;
- case Constants.ComponentProperty.STATE:
- if (this.valueNodeProperty === Constants.VisualResponseProperty.VISIBILITY) {
- this.value = (this.states.includes(state));
- } else {
- this.value = this.states.includes(state) ? 1.0 : 0.0;
- }
- break;
- default:
- throw new Error(`Unexpected visualResponse componentProperty ${this.componentProperty}`);
- }
- }
- }
+ move = p2.clone().sub(p1);
+
+ return move;
+ };
- class Component {
- /**
- * @param {Object} componentId - Id of the component
- * @param {Object} componentDescription - Description of the component to be created
- */
- constructor(componentId, componentDescription) {
- if (!componentId
- || !componentDescription
- || !componentDescription.visualResponses
- || !componentDescription.gamepadIndices
- || Object.keys(componentDescription.gamepadIndices).length === 0) {
- throw new Error('Invalid arguments supplied');
- }
- this.id = componentId;
- this.type = componentDescription.type;
- this.rootNodeName = componentDescription.rootNodeName;
- this.touchPointNodeName = componentDescription.touchPointNodeName;
+ class FlyMode{
- // Build all the visual responses for this component
- this.visualResponses = {};
- Object.keys(componentDescription.visualResponses).forEach((responseName) => {
- const visualResponse = new VisualResponse(componentDescription.visualResponses[responseName]);
- this.visualResponses[responseName] = visualResponse;
- });
+ constructor(vrControls){
+ this.moveFactor = 1;
+ this.dbgLabel = null;
+ }
- // Set default values
- this.gamepadIndices = Object.assign({}, componentDescription.gamepadIndices);
+ start(vrControls){
+ if(!this.dbgLabel){
+ this.dbgLabel = new Potree.TextSprite("abc");
+ this.dbgLabel.name = "debug label";
+ vrControls.viewer.sceneVR.add(this.dbgLabel);
+ this.dbgLabel.visible = false;
+ }
+ }
+
+ end(){
- this.values = {
- state: Constants.ComponentState.DEFAULT,
- button: (this.gamepadIndices.button !== undefined) ? 0 : undefined,
- xAxis: (this.gamepadIndices.xAxis !== undefined) ? 0 : undefined,
- yAxis: (this.gamepadIndices.yAxis !== undefined) ? 0 : undefined
- };
- }
+ }
- get data() {
- const data = { id: this.id, ...this.values };
- return data;
- }
+ update(vrControls, delta){
- /**
- * @description Poll for updated data based on current gamepad state
- * @param {Object} gamepad - The gamepad object from which the component data should be polled
- */
- updateFromGamepad(gamepad) {
- // Set the state to default before processing other data sources
- this.values.state = Constants.ComponentState.DEFAULT;
+ let primary = vrControls.cPrimary;
+ let secondary = vrControls.cSecondary;
- // Get and normalize button
- if (this.gamepadIndices.button !== undefined
- && gamepad.buttons.length > this.gamepadIndices.button) {
- const gamepadButton = gamepad.buttons[this.gamepadIndices.button];
- this.values.button = gamepadButton.value;
- this.values.button = (this.values.button < 0) ? 0 : this.values.button;
- this.values.button = (this.values.button > 1) ? 1 : this.values.button;
+ let move1 = computeMove(vrControls, primary);
+ let move2 = computeMove(vrControls, secondary);
- // Set the state based on the button
- if (gamepadButton.pressed || this.values.button === 1) {
- this.values.state = Constants.ComponentState.PRESSED;
- } else if (gamepadButton.touched || this.values.button > Constants.ButtonTouchThreshold) {
- this.values.state = Constants.ComponentState.TOUCHED;
- }
- }
- // Get and normalize x axis value
- if (this.gamepadIndices.xAxis !== undefined
- && gamepad.axes.length > this.gamepadIndices.xAxis) {
- this.values.xAxis = gamepad.axes[this.gamepadIndices.xAxis];
- this.values.xAxis = (this.values.xAxis < -1) ? -1 : this.values.xAxis;
- this.values.xAxis = (this.values.xAxis > 1) ? 1 : this.values.xAxis;
+ if(!move1){
+ move1 = new Vector3();
+ }
- // If the state is still default, check if the xAxis makes it touched
- if (this.values.state === Constants.ComponentState.DEFAULT
- && Math.abs(this.values.xAxis) > Constants.AxisTouchThreshold) {
- this.values.state = Constants.ComponentState.TOUCHED;
- }
- }
+ if(!move2){
+ move2 = new Vector3();
+ }
- // Get and normalize Y axis value
- if (this.gamepadIndices.yAxis !== undefined
- && gamepad.axes.length > this.gamepadIndices.yAxis) {
- this.values.yAxis = gamepad.axes[this.gamepadIndices.yAxis];
- this.values.yAxis = (this.values.yAxis < -1) ? -1 : this.values.yAxis;
- this.values.yAxis = (this.values.yAxis > 1) ? 1 : this.values.yAxis;
+ let move = move1.clone().add(move2);
- // If the state is still default, check if the yAxis makes it touched
- if (this.values.state === Constants.ComponentState.DEFAULT
- && Math.abs(this.values.yAxis) > Constants.AxisTouchThreshold) {
- this.values.state = Constants.ComponentState.TOUCHED;
- }
- }
+ move.multiplyScalar(-delta * this.moveFactor);
+ vrControls.node.position.add(move);
+
- // Update the visual response weights based on the current component data
- Object.values(this.visualResponses).forEach((visualResponse) => {
- visualResponse.updateFromComponent(this.values);
- });
- }
- }
+ let scale = vrControls.node.scale.x;
- /**
- * @description Builds a motion controller with components and visual responses based on the
- * supplied profile description. Data is polled from the xrInputSource's gamepad.
- * @author Nell Waliczek / https://github.com/NellWaliczek
- */
- class MotionController {
- /**
- * @param {Object} xrInputSource - The XRInputSource to build the MotionController around
- * @param {Object} profile - The best matched profile description for the supplied xrInputSource
- * @param {Object} assetUrl
- */
- constructor(xrInputSource, profile, assetUrl) {
- if (!xrInputSource) {
- throw new Error('No xrInputSource supplied');
- }
+ let camVR = vrControls.viewer.renderer.xr.getCamera(fakeCam);
+
+ let vrPos = camVR.getWorldPosition(new Vector3());
+ let vrDir = camVR.getWorldDirection(new Vector3());
+ let vrTarget = vrPos.clone().add(vrDir.multiplyScalar(scale));
- if (!profile) {
- throw new Error('No profile supplied');
- }
+ let scenePos = toScene(vrPos, vrControls.node);
+ let sceneDir = toScene(vrPos.clone().add(vrDir), vrControls.node).sub(scenePos);
+ sceneDir.normalize().multiplyScalar(scale);
+ let sceneTarget = scenePos.clone().add(sceneDir);
- this.xrInputSource = xrInputSource;
- this.assetUrl = assetUrl;
- this.id = profile.profileId;
+ vrControls.viewer.scene.view.setView(scenePos, sceneTarget);
- // Build child components as described in the profile description
- this.layoutDescription = profile.layouts[xrInputSource.handedness];
- this.components = {};
- Object.keys(this.layoutDescription.components).forEach((componentId) => {
- const componentDescription = this.layoutDescription.components[componentId];
- this.components[componentId] = new Component(componentId, componentDescription);
- });
+ if(Potree.debug.message){
+ this.dbgLabel.visible = true;
+ this.dbgLabel.setText(Potree.debug.message);
+ this.dbgLabel.scale.set(0.1, 0.1, 0.1);
+ this.dbgLabel.position.copy(primary.position);
+ }
+ }
+ };
- // Initialize components based on current gamepad state
- this.updateFromGamepad();
- }
+ class TranslationMode{
- get gripSpace() {
- return this.xrInputSource.gripSpace;
- }
+ constructor(){
+ this.controller = null;
+ this.startPos = null;
+ this.debugLine = null;
+ }
- get targetRaySpace() {
- return this.xrInputSource.targetRaySpace;
- }
+ start(vrControls){
+ this.controller = vrControls.triggered.values().next().value;
+ this.startPos = vrControls.node.position.clone();
+ }
+
+ end(vrControls){
- /**
- * @description Returns a subset of component data for simplified debugging
- */
- get data() {
- const data = [];
- Object.values(this.components).forEach((component) => {
- data.push(component.data);
- });
- return data;
- }
+ }
- /**
- * @description Poll for updated data based on current gamepad state
- */
- updateFromGamepad() {
- Object.values(this.components).forEach((component) => {
- component.updateFromGamepad(this.xrInputSource.gamepad);
- });
- }
- }
+ update(vrControls, delta){
- const DEFAULT_PROFILES_PATH = 'https://cdn.jsdelivr.net/npm/@webxr-input-profiles/assets@1.0/dist/profiles';
- const DEFAULT_PROFILE = 'generic-trigger';
+ let start = this.controller.start.position;
+ let end = this.controller.position;
- function XRControllerModel( ) {
+ start = vrControls.toScene(start);
+ end = vrControls.toScene(end);
+
+ let diff = end.clone().sub(start);
+ diff.set(-diff.x, -diff.y, -diff.z);
+
+ let pos = new Vector3().addVectors(this.startPos, diff);
+
+ vrControls.node.position.copy(pos);
+ }
+
+ };
+
+ class RotScaleMode{
- Object3D.call( this );
+ constructor(){
+ this.line = null;
+ this.startState = null;
+ }
- this.motionController = null;
- this.envMap = null;
+ start(vrControls){
+ if(!this.line){
+ this.line = Potree.Utils.debugLine(
+ vrControls.viewer.sceneVR,
+ new Vector3(0, 0, 0),
+ new Vector3(0, 0, 0),
+ 0xffff00,
+ );
- }
+ this.dbgLabel = new Potree.TextSprite("abc");
+ this.dbgLabel.scale.set(0.1, 0.1, 0.1);
+ vrControls.viewer.sceneVR.add(this.dbgLabel);
+ }
- XRControllerModel.prototype = Object.assign( Object.create( Object3D.prototype ), {
+ this.line.node.visible = true;
- constructor: XRControllerModel,
+ this.startState = vrControls.node.clone();
+ }
- setEnvironmentMap: function ( envMap ) {
+ end(vrControls){
+ this.line.node.visible = false;
+ this.dbgLabel.visible = false;
+ }
- if ( this.envMap == envMap ) {
+ update(vrControls, delta){
- return this;
+ let start_c1 = vrControls.cPrimary.start.position.clone();
+ let start_c2 = vrControls.cSecondary.start.position.clone();
+ let start_center = start_c1.clone().add(start_c2).multiplyScalar(0.5);
+ let start_c1_c2 = start_c2.clone().sub(start_c1);
+ let end_c1 = vrControls.cPrimary.position.clone();
+ let end_c2 = vrControls.cSecondary.position.clone();
+ let end_center = end_c1.clone().add(end_c2).multiplyScalar(0.5);
+ let end_c1_c2 = end_c2.clone().sub(end_c1);
- }
+ let d1 = start_c1_c2.length();
+ let d2 = end_c1_c2.length();
- this.envMap = envMap;
- this.traverse( ( child ) => {
+ let angleStart = new Vector2(start_c1_c2.x, start_c1_c2.z).angle();
+ let angleEnd = new Vector2(end_c1_c2.x, end_c1_c2.z).angle();
+ let angleDiff = angleEnd - angleStart;
+
+ let scale = d2 / d1;
- if ( child.isMesh ) {
+ let node = this.startState.clone();
+ node.updateMatrix();
+ node.matrixAutoUpdate = false;
- child.material.envMap = this.envMap;
- child.material.needsUpdate = true;
+ let mToOrigin = new Matrix4().makeTranslation(...toScene(start_center, this.startState).multiplyScalar(-1).toArray());
+ let mToStart = new Matrix4().makeTranslation(...toScene(start_center, this.startState).toArray());
+ let mRotate = new Matrix4().makeRotationZ(angleDiff);
+ let mScale = new Matrix4().makeScale(1 / scale, 1 / scale, 1 / scale);
- }
+ node.applyMatrix4(mToOrigin);
+ node.applyMatrix4(mRotate);
+ node.applyMatrix4(mScale);
+ node.applyMatrix4(mToStart);
- } );
+ let oldScenePos = toScene(start_center, this.startState);
+ let newScenePos = toScene(end_center, node);
+ let toNew = oldScenePos.clone().sub(newScenePos);
+ let mToNew = new Matrix4().makeTranslation(...toNew.toArray());
+ node.applyMatrix4(mToNew);
- return this;
+ node.matrix.decompose(node.position, node.quaternion, node.scale );
- },
+ vrControls.node.position.copy(node.position);
+ vrControls.node.quaternion.copy(node.quaternion);
+ vrControls.node.scale.copy(node.scale);
+ vrControls.node.updateMatrix();
- /**
- * Polls data from the XRInputSource and updates the model's components to match
- * the real world data
- */
- updateMatrixWorld: function ( force ) {
+ {
+ let scale = vrControls.node.scale.x;
+ let camVR = vrControls.viewer.renderer.xr.getCamera(fakeCam);
+
+ let vrPos = camVR.getWorldPosition(new Vector3());
+ let vrDir = camVR.getWorldDirection(new Vector3());
+ let vrTarget = vrPos.clone().add(vrDir.multiplyScalar(scale));
- Object3D.prototype.updateMatrixWorld.call( this, force );
+ let scenePos = toScene(vrPos, this.startState);
+ let sceneDir = toScene(vrPos.clone().add(vrDir), this.startState).sub(scenePos);
+ sceneDir.normalize().multiplyScalar(scale);
+ let sceneTarget = scenePos.clone().add(sceneDir);
- if ( ! this.motionController ) return;
+ vrControls.viewer.scene.view.setView(scenePos, sceneTarget);
+ vrControls.viewer.setMoveSpeed(scale);
+ }
- // Cause the MotionController to poll the Gamepad for data
- this.motionController.updateFromGamepad();
+ { // update "GUI"
+ this.line.set(end_c1, end_c2);
- // Update the 3D model to reflect the button, thumbstick, and touchpad state
- Object.values( this.motionController.components ).forEach( ( component ) => {
+ let scale = vrControls.node.scale.x;
+ this.dbgLabel.visible = true;
+ this.dbgLabel.position.copy(end_center);
+ this.dbgLabel.setText(`scale: 1 : ${scale.toFixed(2)}`);
+ this.dbgLabel.scale.set(0.05, 0.05, 0.05);
+ }
- // Update node data based on the visual responses' current states
- Object.values( component.visualResponses ).forEach( ( visualResponse ) => {
+ }
- const { valueNode, minNode, maxNode, value, valueNodeProperty } = visualResponse;
+ };
- // Skip if the visual response node is not found. No error is needed,
- // because it will have been reported at load time.
- if ( ! valueNode ) return;
- // Calculate the new properties based on the weight supplied
- if ( valueNodeProperty === Constants.VisualResponseProperty.VISIBILITY ) {
+ class VRControls extends EventDispatcher{
- valueNode.visible = value;
+ constructor(viewer){
+ super(viewer);
- } else if ( valueNodeProperty === Constants.VisualResponseProperty.TRANSFORM ) {
+ this.viewer = viewer;
- Quaternion.slerp(
- minNode.quaternion,
- maxNode.quaternion,
- valueNode.quaternion,
- value
- );
+ viewer.addEventListener("vr_start", this.onStart.bind(this));
+ viewer.addEventListener("vr_end", this.onEnd.bind(this));
- valueNode.position.lerpVectors(
- minNode.position,
- maxNode.position,
- value
- );
+ this.node = new Object3D();
+ this.node.up.set(0, 0, 1);
+ this.triggered = new Set();
- }
+ let xr = viewer.renderer.xr;
- } );
+ { // lights
+
+ const light = new PointLight( 0xffffff, 5, 0, 1 );
+ light.position.set(0, 2, 0);
+ this.viewer.sceneVR.add(light);
+ }
- } );
+ this.menu = null;
- }
+ const controllerModelFactory = new XRControllerModelFactory();
- } );
+ let sg = new SphereGeometry(1, 32, 32);
+ let sm = new MeshNormalMaterial();
- /**
- * Walks the model's tree to find the nodes needed to animate the components and
- * saves them to the motionContoller components for use in the frame loop. When
- * touchpads are found, attaches a touch dot to them.
- */
- function findNodes( motionController, scene ) {
+ { // setup primary controller
+ let controller = xr.getController(0);
- // Loop through the components and find the nodes needed for each components' visual responses
- Object.values( motionController.components ).forEach( ( component ) => {
+ let grip = xr.getControllerGrip(0);
+ grip.name = "grip(0)";
- const { type, touchPointNodeName, visualResponses } = component;
+ // ADD CONTROLLERMODEL
+ grip.add( controllerModelFactory.createControllerModel( grip ) );
+ this.viewer.sceneVR.add(grip);
- if ( type === Constants.ComponentType.TOUCHPAD ) {
+ // ADD SPHERE
+ let sphere = new Mesh(sg, sm);
+ sphere.scale.set(0.005, 0.005, 0.005);
- component.touchPointNode = scene.getObjectByName( touchPointNodeName );
- if ( component.touchPointNode ) {
+ controller.add(sphere);
+ controller.visible = true;
+ this.viewer.sceneVR.add(controller);
- // Attach a touch dot to the touchpad.
- const sphereGeometry = new SphereBufferGeometry( 0.001 );
- const material = new MeshBasicMaterial( { color: 0x0000FF } );
- const sphere = new Mesh( sphereGeometry, material );
- component.touchPointNode.add( sphere );
+ { // ADD LINE
+
+ let lineGeometry = new LineGeometry();
- } else {
+ lineGeometry.setPositions([
+ 0, 0, -0.15,
+ 0, 0, 0.05,
+ ]);
- console.warn( `Could not find touch dot, ${component.touchPointNodeName}, in touchpad component ${component.id}` );
+ let lineMaterial = new LineMaterial({
+ color: 0xff0000,
+ linewidth: 2,
+ resolution: new Vector2(1000, 1000),
+ });
+ const line = new Line2(lineGeometry, lineMaterial);
+
+ controller.add(line);
}
- }
- // Loop through all the visual responses to be applied to this component
- Object.values( visualResponses ).forEach( ( visualResponse ) => {
+ controller.addEventListener( 'connected', function ( event ) {
+ const xrInputSource = event.data;
+ controller.inputSource = xrInputSource;
+ // initInfo(controller);
+ });
- const { valueNodeName, minNodeName, maxNodeName, valueNodeProperty } = visualResponse;
+ controller.addEventListener( 'selectstart', () => {this.onTriggerStart(controller);});
+ controller.addEventListener( 'selectend', () => {this.onTriggerEnd(controller);});
- // If animating a transform, find the two nodes to be interpolated between.
- if ( valueNodeProperty === Constants.VisualResponseProperty.TRANSFORM ) {
+ this.cPrimary = controller;
- visualResponse.minNode = scene.getObjectByName( minNodeName );
- visualResponse.maxNode = scene.getObjectByName( maxNodeName );
+ }
- // If the extents cannot be found, skip this animation
- if ( ! visualResponse.minNode ) {
+ { // setup secondary controller
+ let controller = xr.getController(1);
- console.warn( `Could not find ${minNodeName} in the model` );
- return;
+ let grip = xr.getControllerGrip(1);
- }
+ // ADD CONTROLLER MODEL
+ let model = controllerModelFactory.createControllerModel( grip );
+ grip.add(model);
+ this.viewer.sceneVR.add( grip );
- if ( ! visualResponse.maxNode ) {
+ // ADD SPHERE
+ let sphere = new Mesh(sg, sm);
+ sphere.scale.set(0.005, 0.005, 0.005);
+ controller.add(sphere);
+ controller.visible = true;
+ this.viewer.sceneVR.add(controller);
- console.warn( `Could not find ${maxNodeName} in the model` );
- return;
+ { // ADD LINE
+
+ let lineGeometry = new LineGeometry();
- }
+ lineGeometry.setPositions([
+ 0, 0, -0.15,
+ 0, 0, 0.05,
+ ]);
+
+ let lineMaterial = new LineMaterial({
+ color: 0xff0000,
+ linewidth: 2,
+ resolution: new Vector2(1000, 1000),
+ });
+ const line = new Line2(lineGeometry, lineMaterial);
+
+ controller.add(line);
}
- // If the target node cannot be found, skip this animation
- visualResponse.valueNode = scene.getObjectByName( valueNodeName );
- if ( ! visualResponse.valueNode ) {
+ controller.addEventListener( 'connected', (event) => {
+ const xrInputSource = event.data;
+ controller.inputSource = xrInputSource;
+ this.initMenu(controller);
+ });
- console.warn( `Could not find ${valueNodeName} in the model` );
+ controller.addEventListener( 'selectstart', () => {this.onTriggerStart(controller);});
+ controller.addEventListener( 'selectend', () => {this.onTriggerEnd(controller);});
- }
+ this.cSecondary = controller;
+ }
- } );
+ this.mode_fly = new FlyMode();
+ this.mode_translate = new TranslationMode();
+ this.mode_rotScale = new RotScaleMode();
+ this.setMode(this.mode_fly);
+ }
- } );
+ createSlider(label, min, max){
- }
+ let sg = new SphereGeometry(1, 8, 8);
+ let cg = new CylinderGeometry(1, 1, 1, 8);
+ let matHandle = new MeshBasicMaterial({color: 0xff0000});
+ let matScale = new MeshBasicMaterial({color: 0xff4444});
+ let matValue = new MeshNormalMaterial();
- function addAssetSceneToControllerModel( controllerModel, scene ) {
+ let node = new Object3D("slider");
+ let nLabel = new Potree.TextSprite(`${label}: 0`);
+ let nMax = new Mesh(sg, matHandle);
+ let nMin = new Mesh(sg, matHandle);
+ let nValue = new Mesh(sg, matValue);
+ let nScale = new Mesh(cg, matScale);
- // Find the nodes needed for animation and cache them on the motionController.
- findNodes( controllerModel.motionController, scene );
+ nLabel.scale.set(0.2, 0.2, 0.2);
+ nLabel.position.set(0, 0.35, 0);
- // Apply any environment map that the mesh already has set.
- if ( controllerModel.envMap ) {
+ nMax.scale.set(0.02, 0.02, 0.02);
+ nMax.position.set(0, 0.25, 0);
- scene.traverse( ( child ) => {
+ nMin.scale.set(0.02, 0.02, 0.02);
+ nMin.position.set(0, -0.25, 0);
- if ( child.isMesh ) {
+ nValue.scale.set(0.02, 0.02, 0.02);
+ nValue.position.set(0, 0, 0);
- child.material.envMap = controllerModel.envMap;
- child.material.needsUpdate = true;
+ nScale.scale.set(0.005, 0.5, 0.005);
- }
+ node.add(nLabel);
+ node.add(nMax);
+ node.add(nMin);
+ node.add(nValue);
+ node.add(nScale);
- } );
+ return node;
+ }
+ createInfo(){
+
+ let texture = new TextureLoader().load(`${Potree.resourcePath}/images/vr_controller_help.jpg`);
+ let plane = new PlaneBufferGeometry(1, 1, 1, 1);
+ let infoMaterial = new MeshBasicMaterial({map: texture});
+ let infoNode = new Mesh(plane, infoMaterial);
+
+ return infoNode;
}
- // Add the glTF scene to the controllerModel.
- controllerModel.add( scene );
+ initMenu(controller){
- }
+ if(this.menu){
+ return;
+ }
- var XRControllerModelFactory = ( function () {
+ let node = new Object3D("vr menu");
- function XRControllerModelFactory( gltfLoader = null ) {
+ // let nSlider = this.createSlider("speed", 0, 1);
+ // let nInfo = this.createInfo();
- this.gltfLoader = gltfLoader;
- this.path = DEFAULT_PROFILES_PATH;
- this._assetCache = {};
+ // // node.add(nSlider);
+ // node.add(nInfo);
- // If a GLTFLoader wasn't supplied to the constructor create a new one.
- if ( ! this.gltfLoader ) {
+ // {
+ // node.rotation.set(-1.5, 0, 0)
+ // node.scale.set(0.3, 0.3, 0.3);
+ // node.position.set(-0.2, -0.002, -0.1)
- this.gltfLoader = new GLTFLoader();
+ // // nInfo.position.set(0.5, 0, 0);
+ // nInfo.scale.set(0.8, 0.6, 0);
- }
+ // // controller.add(node);
+ // }
+
+ // node.position.set(-0.3, 1.2, 0.2);
+ // node.scale.set(0.3, 0.2, 0.3);
+ // node.lookAt(new THREE.Vector3(0, 1.5, 0.1));
+
+ // this.viewer.sceneVR.add(node);
+
+ this.menu = node;
+
+ // window.vrSlider = nSlider;
+ window.vrMenu = node;
}
- XRControllerModelFactory.prototype = {
- constructor: XRControllerModelFactory,
+ toScene(vec){
+ let camVR = this.getCamera();
- createControllerModel: function ( controller ) {
+ let mat = camVR.matrixWorld;
+ let result = vec.clone().applyMatrix4(mat);
- const controllerModel = new XRControllerModel();
- let scene = null;
+ return result;
+ }
- controller.addEventListener( 'connected', ( event ) => {
+ toVR(vec){
+ let camVR = this.getCamera();
- const xrInputSource = event.data;
+ let mat = camVR.matrixWorld.clone();
+ mat.invert();
+ let result = vec.clone().applyMatrix4(mat);
- if ( xrInputSource.targetRayMode !== 'tracked-pointer' || ! xrInputSource.gamepad ) return;
+ return result;
+ }
- fetchProfile( xrInputSource, this.path, DEFAULT_PROFILE ).then( ( { profile, assetPath } ) => {
+ setMode(mode){
- controllerModel.motionController = new MotionController(
- xrInputSource,
- profile,
- assetPath
- );
+ if(this.mode === mode){
+ return;
+ }
- const cachedAsset = this._assetCache[ controllerModel.motionController.assetUrl ];
- if ( cachedAsset ) {
+ if(this.mode){
+ this.mode.end(this);
+ }
- scene = cachedAsset.scene.clone();
+ for(let controller of [this.cPrimary, this.cSecondary]){
- addAssetSceneToControllerModel( controllerModel, scene );
+ let start = {
+ position: controller.position.clone(),
+ rotation: controller.rotation.clone(),
+ };
- } else {
+ controller.start = start;
+ }
+
+ this.mode = mode;
+ this.mode.start(this);
+ }
- if ( ! this.gltfLoader ) {
+ onTriggerStart(controller){
+ this.triggered.add(controller);
- throw new Error( 'GLTFLoader not set.' );
+ if(this.triggered.size === 0){
+ this.setMode(this.mode_fly);
+ }else if(this.triggered.size === 1){
+ this.setMode(this.mode_translate);
+ }else if(this.triggered.size === 2){
+ this.setMode(this.mode_rotScale);
+ }
+ }
- }
+ onTriggerEnd(controller){
+ this.triggered.delete(controller);
- this.gltfLoader.setPath( '' );
- this.gltfLoader.load( controllerModel.motionController.assetUrl, ( asset ) => {
+ if(this.triggered.size === 0){
+ this.setMode(this.mode_fly);
+ }else if(this.triggered.size === 1){
+ this.setMode(this.mode_translate);
+ }else if(this.triggered.size === 2){
+ this.setMode(this.mode_rotScale);
+ }
+ }
- this._assetCache[ controllerModel.motionController.assetUrl ] = asset;
+ onStart(){
- scene = asset.scene.clone();
+ let position = this.viewer.scene.view.position.clone();
+ let direction = this.viewer.scene.view.direction;
+ direction.multiplyScalar(-1);
- addAssetSceneToControllerModel( controllerModel, scene );
+ let target = position.clone().add(direction);
+ target.z = position.z;
- },
- null,
- () => {
+ let scale = this.viewer.getMoveSpeed();
- throw new Error( `Asset ${controllerModel.motionController.assetUrl} missing or malformed.` );
+ this.node.position.copy(position);
+ this.node.lookAt(target);
+ this.node.scale.set(scale, scale, scale);
+ this.node.updateMatrix();
+ this.node.updateMatrixWorld();
+ }
- } );
+ onEnd(){
+
+ }
- }
- } ).catch( ( err ) => {
+ setScene(scene){
+ this.scene = scene;
+ }
- console.warn( err );
+ getCamera(){
+ let reference = this.viewer.scene.getActiveCamera();
+ let camera = new PerspectiveCamera();
- } );
+ // let scale = this.node.scale.x;
+ let scale = this.viewer.getMoveSpeed();
+ //camera.near = 0.01 / scale;
+ camera.near = 0.1;
+ camera.far = 1000;
+ // camera.near = reference.near / scale;
+ // camera.far = reference.far / scale;
+ camera.up.set(0, 0, 1);
+ camera.lookAt(new Vector3(0, -1, 0));
+ camera.updateMatrix();
+ camera.updateMatrixWorld();
- } );
+ camera.position.copy(this.node.position);
+ camera.rotation.copy(this.node.rotation);
+ camera.scale.set(scale, scale, scale);
+ camera.updateMatrix();
+ camera.updateMatrixWorld();
+ camera.matrixAutoUpdate = false;
+ camera.parent = camera;
- controller.addEventListener( 'disconnected', () => {
+ return camera;
+ }
- controllerModel.motionController = null;
- controllerModel.remove( scene );
- scene = null;
+ update(delta){
- } );
+
- return controllerModel;
+ // if(this.mode === this.mode_fly){
+ // let ray = new THREE.Ray(origin, direction);
+
+ // for(let object of this.selectables){
- }
+ // if(object.intersectsRay(ray)){
+ // object.onHit(ray);
+ // }
- };
+ // }
- return XRControllerModelFactory;
+ // }
- } )();
+ this.mode.update(this, delta);
+
+
- let fakeCam = new PerspectiveCamera();
-
- function toScene(vec, ref){
- let node = ref.clone();
- node.updateMatrix();
- node.updateMatrixWorld();
-
- let result = vec.clone().applyMatrix4(node.matrix);
- result.z -= 0.8 * node.scale.x;
-
- return result;
- };
-
- function computeMove(vrControls, controller){
-
- if(!controller || !controller.inputSource || !controller.inputSource.gamepad){
- return null;
- }
-
- let pad = controller.inputSource.gamepad;
-
- let axes = pad.axes;
- // [0,1] are for touchpad, [2,3] for thumbsticks?
- let y = 0;
- if(axes.length === 2){
- y = axes[1];
- }else if(axes.length === 4){
- y = axes[3];
- }
-
- y = Math.sign(y) * (2 * y) ** 2;
-
- let maxSize = 0;
- for(let pc of viewer.scene.pointclouds){
- let size = pc.boundingBox.min.distanceTo(pc.boundingBox.max);
- maxSize = Math.max(maxSize, size);
- }
- let multiplicator = Math.pow(maxSize, 0.5) / 2;
-
- let scale = vrControls.node.scale.x;
- let moveSpeed = viewer.getMoveSpeed();
- let amount = multiplicator * y * (moveSpeed ** 0.5) / scale;
-
-
- let rotation = new Quaternion().setFromEuler(controller.rotation);
- let dir = new Vector3(0, 0, -1);
- dir.applyQuaternion(rotation);
-
- let move = dir.clone().multiplyScalar(amount);
-
- let p1 = vrControls.toScene(controller.position);
- let p2 = vrControls.toScene(controller.position.clone().add(move));
-
- move = p2.clone().sub(p1);
-
- return move;
- };
-
-
- class FlyMode{
-
- constructor(vrControls){
- this.moveFactor = 1;
- this.dbgLabel = null;
- }
-
- start(vrControls){
- if(!this.dbgLabel){
- this.dbgLabel = new Potree.TextSprite("abc");
- this.dbgLabel.name = "debug label";
- vrControls.viewer.sceneVR.add(this.dbgLabel);
- this.dbgLabel.visible = false;
- }
- }
-
- end(){
-
- }
-
- update(vrControls, delta){
-
- let primary = vrControls.cPrimary;
- let secondary = vrControls.cSecondary;
-
- let move1 = computeMove(vrControls, primary);
- let move2 = computeMove(vrControls, secondary);
-
-
- if(!move1){
- move1 = new Vector3();
- }
-
- if(!move2){
- move2 = new Vector3();
- }
-
- let move = move1.clone().add(move2);
-
- move.multiplyScalar(-delta * this.moveFactor);
- vrControls.node.position.add(move);
-
-
- let scale = vrControls.node.scale.x;
-
- let camVR = vrControls.viewer.renderer.xr.getCamera(fakeCam);
-
- let vrPos = camVR.getWorldPosition(new Vector3());
- let vrDir = camVR.getWorldDirection(new Vector3());
- let vrTarget = vrPos.clone().add(vrDir.multiplyScalar(scale));
-
- let scenePos = toScene(vrPos, vrControls.node);
- let sceneDir = toScene(vrPos.clone().add(vrDir), vrControls.node).sub(scenePos);
- sceneDir.normalize().multiplyScalar(scale);
- let sceneTarget = scenePos.clone().add(sceneDir);
-
- vrControls.viewer.scene.view.setView(scenePos, sceneTarget);
-
- if(Potree.debug.message){
- this.dbgLabel.visible = true;
- this.dbgLabel.setText(Potree.debug.message);
- this.dbgLabel.scale.set(0.1, 0.1, 0.1);
- this.dbgLabel.position.copy(primary.position);
- }
- }
- };
-
- class TranslationMode{
-
- constructor(){
- this.controller = null;
- this.startPos = null;
- this.debugLine = null;
- }
-
- start(vrControls){
- this.controller = vrControls.triggered.values().next().value;
- this.startPos = vrControls.node.position.clone();
- }
-
- end(vrControls){
-
- }
-
- update(vrControls, delta){
-
- let start = this.controller.start.position;
- let end = this.controller.position;
-
- start = vrControls.toScene(start);
- end = vrControls.toScene(end);
-
- let diff = end.clone().sub(start);
- diff.set(-diff.x, -diff.y, -diff.z);
-
- let pos = new Vector3().addVectors(this.startPos, diff);
-
- vrControls.node.position.copy(pos);
- }
-
- };
-
- class RotScaleMode{
-
- constructor(){
- this.line = null;
- this.startState = null;
- }
-
- start(vrControls){
- if(!this.line){
- this.line = Potree.Utils.debugLine(
- vrControls.viewer.sceneVR,
- new Vector3(0, 0, 0),
- new Vector3(0, 0, 0),
- 0xffff00,
- );
-
- this.dbgLabel = new Potree.TextSprite("abc");
- this.dbgLabel.scale.set(0.1, 0.1, 0.1);
- vrControls.viewer.sceneVR.add(this.dbgLabel);
- }
-
- this.line.node.visible = true;
-
- this.startState = vrControls.node.clone();
- }
-
- end(vrControls){
- this.line.node.visible = false;
- this.dbgLabel.visible = false;
- }
-
- update(vrControls, delta){
-
- let start_c1 = vrControls.cPrimary.start.position.clone();
- let start_c2 = vrControls.cSecondary.start.position.clone();
- let start_center = start_c1.clone().add(start_c2).multiplyScalar(0.5);
- let start_c1_c2 = start_c2.clone().sub(start_c1);
- let end_c1 = vrControls.cPrimary.position.clone();
- let end_c2 = vrControls.cSecondary.position.clone();
- let end_center = end_c1.clone().add(end_c2).multiplyScalar(0.5);
- let end_c1_c2 = end_c2.clone().sub(end_c1);
-
- let d1 = start_c1_c2.length();
- let d2 = end_c1_c2.length();
-
- let angleStart = new Vector2(start_c1_c2.x, start_c1_c2.z).angle();
- let angleEnd = new Vector2(end_c1_c2.x, end_c1_c2.z).angle();
- let angleDiff = angleEnd - angleStart;
-
- let scale = d2 / d1;
-
- let node = this.startState.clone();
- node.updateMatrix();
- node.matrixAutoUpdate = false;
-
- let mToOrigin = new Matrix4().makeTranslation(...toScene(start_center, this.startState).multiplyScalar(-1).toArray());
- let mToStart = new Matrix4().makeTranslation(...toScene(start_center, this.startState).toArray());
- let mRotate = new Matrix4().makeRotationZ(angleDiff);
- let mScale = new Matrix4().makeScale(1 / scale, 1 / scale, 1 / scale);
-
- node.applyMatrix4(mToOrigin);
- node.applyMatrix4(mRotate);
- node.applyMatrix4(mScale);
- node.applyMatrix4(mToStart);
-
- let oldScenePos = toScene(start_center, this.startState);
- let newScenePos = toScene(end_center, node);
- let toNew = oldScenePos.clone().sub(newScenePos);
- let mToNew = new Matrix4().makeTranslation(...toNew.toArray());
- node.applyMatrix4(mToNew);
-
- node.matrix.decompose(node.position, node.quaternion, node.scale );
-
- vrControls.node.position.copy(node.position);
- vrControls.node.quaternion.copy(node.quaternion);
- vrControls.node.scale.copy(node.scale);
- vrControls.node.updateMatrix();
-
- {
- let scale = vrControls.node.scale.x;
- let camVR = vrControls.viewer.renderer.xr.getCamera(fakeCam);
-
- let vrPos = camVR.getWorldPosition(new Vector3());
- let vrDir = camVR.getWorldDirection(new Vector3());
- let vrTarget = vrPos.clone().add(vrDir.multiplyScalar(scale));
-
- let scenePos = toScene(vrPos, this.startState);
- let sceneDir = toScene(vrPos.clone().add(vrDir), this.startState).sub(scenePos);
- sceneDir.normalize().multiplyScalar(scale);
- let sceneTarget = scenePos.clone().add(sceneDir);
-
- vrControls.viewer.scene.view.setView(scenePos, sceneTarget);
- vrControls.viewer.setMoveSpeed(scale);
- }
-
- { // update "GUI"
- this.line.set(end_c1, end_c2);
-
- let scale = vrControls.node.scale.x;
- this.dbgLabel.visible = true;
- this.dbgLabel.position.copy(end_center);
- this.dbgLabel.setText(`scale: 1 : ${scale.toFixed(2)}`);
- this.dbgLabel.scale.set(0.05, 0.05, 0.05);
- }
-
- }
-
- };
-
-
- class VRControls extends EventDispatcher{
-
- constructor(viewer){
- super(viewer);
-
- this.viewer = viewer;
-
- viewer.addEventListener("vr_start", this.onStart.bind(this));
- viewer.addEventListener("vr_end", this.onEnd.bind(this));
-
- this.node = new Object3D();
- this.node.up.set(0, 0, 1);
- this.triggered = new Set();
-
- let xr = viewer.renderer.xr;
-
- { // lights
-
- const light = new PointLight( 0xffffff, 5, 0, 1 );
- light.position.set(0, 2, 0);
- this.viewer.sceneVR.add(light);
- }
-
- this.menu = null;
-
- const controllerModelFactory = new XRControllerModelFactory();
-
- let sg = new SphereGeometry(1, 32, 32);
- let sm = new MeshNormalMaterial();
-
- { // setup primary controller
- let controller = xr.getController(0);
-
- let grip = xr.getControllerGrip(0);
- grip.name = "grip(0)";
-
- // ADD CONTROLLERMODEL
- grip.add( controllerModelFactory.createControllerModel( grip ) );
- this.viewer.sceneVR.add(grip);
-
- // ADD SPHERE
- let sphere = new Mesh(sg, sm);
- sphere.scale.set(0.005, 0.005, 0.005);
-
- controller.add(sphere);
- controller.visible = true;
- this.viewer.sceneVR.add(controller);
-
- { // ADD LINE
-
- let lineGeometry = new LineGeometry();
-
- lineGeometry.setPositions([
- 0, 0, -0.15,
- 0, 0, 0.05,
- ]);
-
- let lineMaterial = new LineMaterial({
- color: 0xff0000,
- linewidth: 2,
- resolution: new Vector2(1000, 1000),
- });
-
- const line = new Line2(lineGeometry, lineMaterial);
-
- controller.add(line);
- }
-
-
- controller.addEventListener( 'connected', function ( event ) {
- const xrInputSource = event.data;
- controller.inputSource = xrInputSource;
- // initInfo(controller);
- });
-
- controller.addEventListener( 'selectstart', () => {this.onTriggerStart(controller);});
- controller.addEventListener( 'selectend', () => {this.onTriggerEnd(controller);});
-
- this.cPrimary = controller;
-
- }
-
- { // setup secondary controller
- let controller = xr.getController(1);
-
- let grip = xr.getControllerGrip(1);
-
- // ADD CONTROLLER MODEL
- let model = controllerModelFactory.createControllerModel( grip );
- grip.add(model);
- this.viewer.sceneVR.add( grip );
-
- // ADD SPHERE
- let sphere = new Mesh(sg, sm);
- sphere.scale.set(0.005, 0.005, 0.005);
- controller.add(sphere);
- controller.visible = true;
- this.viewer.sceneVR.add(controller);
-
- { // ADD LINE
-
- let lineGeometry = new LineGeometry();
-
- lineGeometry.setPositions([
- 0, 0, -0.15,
- 0, 0, 0.05,
- ]);
-
- let lineMaterial = new LineMaterial({
- color: 0xff0000,
- linewidth: 2,
- resolution: new Vector2(1000, 1000),
- });
-
- const line = new Line2(lineGeometry, lineMaterial);
-
- controller.add(line);
- }
-
- controller.addEventListener( 'connected', (event) => {
- const xrInputSource = event.data;
- controller.inputSource = xrInputSource;
- this.initMenu(controller);
- });
-
- controller.addEventListener( 'selectstart', () => {this.onTriggerStart(controller);});
- controller.addEventListener( 'selectend', () => {this.onTriggerEnd(controller);});
-
- this.cSecondary = controller;
- }
-
- this.mode_fly = new FlyMode();
- this.mode_translate = new TranslationMode();
- this.mode_rotScale = new RotScaleMode();
- this.setMode(this.mode_fly);
- }
-
- createSlider(label, min, max){
-
- let sg = new SphereGeometry(1, 8, 8);
- let cg = new CylinderGeometry(1, 1, 1, 8);
- let matHandle = new MeshBasicMaterial({color: 0xff0000});
- let matScale = new MeshBasicMaterial({color: 0xff4444});
- let matValue = new MeshNormalMaterial();
-
- let node = new Object3D("slider");
- let nLabel = new Potree.TextSprite(`${label}: 0`);
- let nMax = new Mesh(sg, matHandle);
- let nMin = new Mesh(sg, matHandle);
- let nValue = new Mesh(sg, matValue);
- let nScale = new Mesh(cg, matScale);
-
- nLabel.scale.set(0.2, 0.2, 0.2);
- nLabel.position.set(0, 0.35, 0);
-
- nMax.scale.set(0.02, 0.02, 0.02);
- nMax.position.set(0, 0.25, 0);
-
- nMin.scale.set(0.02, 0.02, 0.02);
- nMin.position.set(0, -0.25, 0);
-
- nValue.scale.set(0.02, 0.02, 0.02);
- nValue.position.set(0, 0, 0);
-
- nScale.scale.set(0.005, 0.5, 0.005);
-
- node.add(nLabel);
- node.add(nMax);
- node.add(nMin);
- node.add(nValue);
- node.add(nScale);
-
- return node;
- }
-
- createInfo(){
-
- let texture = new TextureLoader().load(`${Potree.resourcePath}/images/vr_controller_help.jpg`);
- let plane = new PlaneBufferGeometry(1, 1, 1, 1);
- let infoMaterial = new MeshBasicMaterial({map: texture});
- let infoNode = new Mesh(plane, infoMaterial);
-
- return infoNode;
- }
-
- initMenu(controller){
-
- if(this.menu){
- return;
- }
-
- let node = new Object3D("vr menu");
-
- // let nSlider = this.createSlider("speed", 0, 1);
- // let nInfo = this.createInfo();
-
- // // node.add(nSlider);
- // node.add(nInfo);
-
- // {
- // node.rotation.set(-1.5, 0, 0)
- // node.scale.set(0.3, 0.3, 0.3);
- // node.position.set(-0.2, -0.002, -0.1)
-
- // // nInfo.position.set(0.5, 0, 0);
- // nInfo.scale.set(0.8, 0.6, 0);
-
- // // controller.add(node);
- // }
-
- // node.position.set(-0.3, 1.2, 0.2);
- // node.scale.set(0.3, 0.2, 0.3);
- // node.lookAt(new THREE.Vector3(0, 1.5, 0.1));
-
- // this.viewer.sceneVR.add(node);
-
- this.menu = node;
-
- // window.vrSlider = nSlider;
- window.vrMenu = node;
-
- }
-
-
- toScene(vec){
- let camVR = this.getCamera();
-
- let mat = camVR.matrixWorld;
- let result = vec.clone().applyMatrix4(mat);
-
- return result;
- }
-
- toVR(vec){
- let camVR = this.getCamera();
-
- let mat = camVR.matrixWorld.clone();
- mat.invert();
- let result = vec.clone().applyMatrix4(mat);
-
- return result;
- }
-
- setMode(mode){
-
- if(this.mode === mode){
- return;
- }
-
- if(this.mode){
- this.mode.end(this);
- }
-
- for(let controller of [this.cPrimary, this.cSecondary]){
-
- let start = {
- position: controller.position.clone(),
- rotation: controller.rotation.clone(),
- };
-
- controller.start = start;
- }
-
- this.mode = mode;
- this.mode.start(this);
- }
-
- onTriggerStart(controller){
- this.triggered.add(controller);
-
- if(this.triggered.size === 0){
- this.setMode(this.mode_fly);
- }else if(this.triggered.size === 1){
- this.setMode(this.mode_translate);
- }else if(this.triggered.size === 2){
- this.setMode(this.mode_rotScale);
- }
- }
-
- onTriggerEnd(controller){
- this.triggered.delete(controller);
-
- if(this.triggered.size === 0){
- this.setMode(this.mode_fly);
- }else if(this.triggered.size === 1){
- this.setMode(this.mode_translate);
- }else if(this.triggered.size === 2){
- this.setMode(this.mode_rotScale);
- }
- }
-
- onStart(){
-
- let position = this.viewer.scene.view.position.clone();
- let direction = this.viewer.scene.view.direction;
- direction.multiplyScalar(-1);
-
- let target = position.clone().add(direction);
- target.z = position.z;
-
- let scale = this.viewer.getMoveSpeed();
-
- this.node.position.copy(position);
- this.node.lookAt(target);
- this.node.scale.set(scale, scale, scale);
- this.node.updateMatrix();
- this.node.updateMatrixWorld();
- }
-
- onEnd(){
-
- }
-
-
- setScene(scene){
- this.scene = scene;
- }
-
- getCamera(){
- let reference = this.viewer.scene.getActiveCamera();
- let camera = new PerspectiveCamera();
-
- // let scale = this.node.scale.x;
- let scale = this.viewer.getMoveSpeed();
- //camera.near = 0.01 / scale;
- camera.near = 0.1;
- camera.far = 1000;
- // camera.near = reference.near / scale;
- // camera.far = reference.far / scale;
- camera.up.set(0, 0, 1);
- camera.lookAt(new Vector3(0, -1, 0));
- camera.updateMatrix();
- camera.updateMatrixWorld();
-
- camera.position.copy(this.node.position);
- camera.rotation.copy(this.node.rotation);
- camera.scale.set(scale, scale, scale);
- camera.updateMatrix();
- camera.updateMatrixWorld();
- camera.matrixAutoUpdate = false;
- camera.parent = camera;
-
- return camera;
- }
-
- update(delta){
-
-
-
- // if(this.mode === this.mode_fly){
- // let ray = new THREE.Ray(origin, direction);
-
- // for(let object of this.selectables){
-
- // if(object.intersectsRay(ray)){
- // object.onHit(ray);
- // }
-
- // }
-
- // }
-
- this.mode.update(this, delta);
-
-
-
- }
+ }
};
// Adapted from three.js VRButton
`);
- //this.viewer.scene.scene.remove(this.debug);
- //this.debug = new THREE.Object3D();
- //this.viewer.scene.scene.add(this.debug);
- //Utils.debugSphere(this.debug, drag.location, 3, 0xaaaaaa);
- //let debugEnd = drag.location.clone().add(n.clone().multiplyScalar(20));
- //Utils.debugLine(this.debug, drag.location, debugEnd, 0xff0000);
+ return img;
+ }
- drag.intersectionStart = drag.location;
- drag.objectStart = drag.object.getWorldPosition(new Vector3());
- drag.handle = handle;
+ };
- let plane = new Plane().setFromNormalAndCoplanarPoint(n, drag.intersectionStart);
+ class PotreeRenderer {
- drag.dragPlane = plane;
- drag.pivot = drag.intersectionStart;
+ constructor (viewer) {
+ this.viewer = viewer;
+ this.renderer = viewer.renderer;
+
+ {
+ let dummyScene = new Scene();
+ let geometry = new SphereGeometry(0.001, 2, 2);
+ let mesh = new Mesh(geometry, new MeshBasicMaterial());
+ mesh.position.set(36453, 35163, 764712);
+ dummyScene.add(mesh);
+
+ this.dummyMesh = mesh;
+ this.dummyScene = dummyScene;
+ }
+ }
+
+ clearTargets(){
+
+ }
+
+ clear(){
+ let {viewer, renderer} = this;
+
+
+ // render skybox
+ if(viewer.background === "skybox"){
+ renderer.setClearColor(0xff0000, 1);
+ }else if(viewer.background === "gradient"){
+ renderer.setClearColor(0x00ff00, 1);
+ }else if(viewer.background === "black"){
+ renderer.setClearColor(0x000000, 1);
+ }else if(viewer.background === "white"){
+ renderer.setClearColor(0xFFFFFF, 1);
}else {
- handle = drag.handle;
+ renderer.setClearColor(0x000000, 0);
}
- this.dragging = true;
+ renderer.clear();
+ }
+
+ render(params){
+ let {viewer, renderer} = this;
- let mouse = drag.end;
- let domElement = this.viewer.renderer.domElement;
- let ray = Utils.mouseToRay(mouse, camera, domElement.clientWidth, domElement.clientHeight);
+ const camera = params.camera ? params.camera : viewer.scene.getActiveCamera();
+
+ viewer.dispatchEvent({type: "render.pass.begin",viewer: viewer});
+
+ const renderAreaSize = renderer.getSize(new Vector2());
+ const width = params.viewport ? params.viewport[2] : renderAreaSize.x;
+ const height = params.viewport ? params.viewport[3] : renderAreaSize.y;
+
+ // render skybox
+ if(viewer.background === "skybox"){
+ viewer.skybox.camera.rotation.copy(viewer.scene.cameraP.rotation);
+ viewer.skybox.camera.fov = viewer.scene.cameraP.fov;
+ viewer.skybox.camera.aspect = viewer.scene.cameraP.aspect;
+
+ viewer.skybox.parent.rotation.x = 0;
+ viewer.skybox.parent.updateMatrixWorld();
+
+ viewer.skybox.camera.updateProjectionMatrix();
+ renderer.render(viewer.skybox.scene, viewer.skybox.camera);
+ }else if(viewer.background === "gradient"){
+ renderer.render(viewer.scene.sceneBG, viewer.scene.cameraBG);
+ }
- let I = ray.intersectPlane(drag.dragPlane, new Vector3());
+ for(let pointcloud of this.viewer.scene.pointclouds){
+ const {material} = pointcloud;
+ material.useEDL = false;
+ }
+
+ viewer.pRenderer.render(viewer.scene.scenePointCloud, camera, null, {
+ clipSpheres: viewer.scene.volumes.filter(v => (v instanceof Potree.SphereVolume)),
+ });
+
+ // render scene
+ renderer.render(viewer.scene.scene, camera);
- if (I) {
- let center = this.scene.getWorldPosition(new Vector3());
- let from = drag.pivot;
- let to = I;
+ viewer.dispatchEvent({type: "render.pass.scene",viewer: viewer});
+
+ viewer.clippingTool.update();
+ renderer.render(viewer.clippingTool.sceneMarker, viewer.scene.cameraScreenSpace); //viewer.scene.cameraScreenSpace);
+ renderer.render(viewer.clippingTool.sceneVolume, camera);
- let v1 = from.clone().sub(center).normalize();
- let v2 = to.clone().sub(center).normalize();
+ renderer.render(viewer.controls.sceneControls, camera);
+
+ renderer.clearDepth();
+
+ viewer.transformationTool.update();
+
+ viewer.dispatchEvent({type: "render.pass.perspective_overlay",viewer: viewer});
- let angle = Math.acos(v1.dot(v2));
- let sign = Math.sign(v1.cross(v2).dot(n));
- angle = angle * sign;
- if (Number.isNaN(angle)) {
- return;
- }
+ // renderer.render(viewer.controls.sceneControls, camera);
+ // renderer.render(viewer.clippingTool.sceneVolume, camera);
+ // renderer.render(viewer.transformationTool.scene, camera);
+
+ // renderer.setViewport(width - viewer.navigationCube.width,
+ // height - viewer.navigationCube.width,
+ // viewer.navigationCube.width, viewer.navigationCube.width);
+ // renderer.render(viewer.navigationCube, viewer.navigationCube.camera);
+ // renderer.setViewport(0, 0, width, height);
+
+ viewer.dispatchEvent({type: "render.pass.end",viewer: viewer});
+ }
- let normal = new Vector3(...handle.alignment);
- for (let selection of this.selection) {
- selection.rotateOnAxis(normal, angle);
- selection.dispatchEvent({
- type: "orientation_changed",
- object: selection
- });
- }
+ }
+
+ class EDLRenderer{
+ constructor(viewer){
+ this.viewer = viewer;
+
+ this.edlMaterial = null;
+
+ this.rtRegular;
+ this.rtEDL;
+
+ this.gl = viewer.renderer.getContext();
+
+ this.shadowMap = new PointCloudSM(this.viewer.pRenderer);
+ }
+
+ initEDL(){
+ if (this.edlMaterial != null) {
+ return;
+ }
+
+ this.edlMaterial = new EyeDomeLightingMaterial();
+ this.edlMaterial.depthTest = true;
+ this.edlMaterial.depthWrite = true;
+ this.edlMaterial.transparent = true;
+
+ this.rtEDL = new WebGLRenderTarget(1024, 1024, {
+ minFilter: NearestFilter,
+ magFilter: NearestFilter,
+ format: RGBAFormat,
+ type: FloatType,
+ depthTexture: new DepthTexture(undefined, undefined, UnsignedIntType)
+ });
+
+ this.rtRegular = new WebGLRenderTarget(1024, 1024, {
+ minFilter: NearestFilter,
+ magFilter: NearestFilter,
+ format: RGBAFormat,
+ depthTexture: new DepthTexture(undefined, undefined, UnsignedIntType)
+ });
+ };
- drag.pivot = I;
+ resize(width, height){
+ if(this.screenshot){
+ width = this.screenshot.target.width;
+ height = this.screenshot.target.height;
}
- }
- dropRotationHandle(e){
- this.dragging = false;
- this.setActiveHandle(null);
+ this.rtEDL.setSize(width , height);
+ this.rtRegular.setSize(width , height);
}
- dragTranslationHandle(e){
- let drag = e.drag;
- let handle = this.activeHandle;
- let camera = this.viewer.scene.getActiveCamera();
-
- if(!drag.intersectionStart && handle){
- drag.intersectionStart = drag.location;
- drag.objectStart = drag.object.getWorldPosition(new Vector3());
-
- let start = drag.intersectionStart;
- let dir = new Vector4(...handle.alignment, 0).applyMatrix4(this.scene.matrixWorld);
- let end = new Vector3().addVectors(start, dir);
- let line = new Line3(start.clone(), end.clone());
- drag.line = line;
+ makeScreenshot(camera, size, callback){
- let camOnLine = line.closestPointToPoint(camera.position, false, new Vector3());
- let normal = new Vector3().subVectors(camera.position, camOnLine);
- let plane = new Plane().setFromNormalAndCoplanarPoint(normal, drag.intersectionStart);
- drag.dragPlane = plane;
- drag.pivot = drag.intersectionStart;
- }else {
- handle = drag.handle;
+ if(camera === undefined || camera === null){
+ camera = this.viewer.scene.getActiveCamera();
}
- this.dragging = true;
-
- {
- let mouse = drag.end;
- let domElement = this.viewer.renderer.domElement;
- let ray = Utils.mouseToRay(mouse, camera, domElement.clientWidth, domElement.clientHeight);
- let I = ray.intersectPlane(drag.dragPlane, new Vector3());
-
- if (I) {
- let iOnLine = drag.line.closestPointToPoint(I, false, new Vector3());
+ if(size === undefined || size === null){
+ size = this.viewer.renderer.getSize(new Vector2());
+ }
- let diff = new Vector3().subVectors(iOnLine, drag.pivot);
+ let {width, height} = size;
- for (let selection of this.selection) {
- selection.position.add(diff);
- selection.dispatchEvent({
- type: "position_changed",
- object: selection
- });
- }
+ //let maxTextureSize = viewer.renderer.capabilities.maxTextureSize;
+ //if(width * 4 <
+ width = 2 * width;
+ height = 2 * height;
- drag.pivot = drag.pivot.add(diff);
- }
- }
- }
+ let target = new WebGLRenderTarget(width, height, {
+ format: RGBAFormat,
+ });
- dropTranslationHandle(e){
- this.dragging = false;
- this.setActiveHandle(null);
- }
+ this.screenshot = {
+ target: target
+ };
- dropScaleHandle(e){
- this.dragging = false;
- this.setActiveHandle(null);
- }
+ // HACK? removed because of error, was this important?
+ //this.viewer.renderer.clearTarget(target, true, true, true);
- dragScaleHandle(e){
- let drag = e.drag;
- let handle = this.activeHandle;
- let camera = this.viewer.scene.getActiveCamera();
+ this.render();
- if(!drag.intersectionStart){
- drag.intersectionStart = drag.location;
- drag.objectStart = drag.object.getWorldPosition(new Vector3());
- drag.handle = handle;
+ let pixelCount = width * height;
+ let buffer = new Uint8Array(4 * pixelCount);
- let start = drag.intersectionStart;
- let dir = new Vector4(...handle.alignment, 0).applyMatrix4(this.scene.matrixWorld);
- let end = new Vector3().addVectors(start, dir);
- let line = new Line3(start.clone(), end.clone());
- drag.line = line;
+ this.viewer.renderer.readRenderTargetPixels(target, 0, 0, width, height, buffer);
- let camOnLine = line.closestPointToPoint(camera.position, false, new Vector3());
- let normal = new Vector3().subVectors(camera.position, camOnLine);
- let plane = new Plane().setFromNormalAndCoplanarPoint(normal, drag.intersectionStart);
- drag.dragPlane = plane;
- drag.pivot = drag.intersectionStart;
+ // flip vertically
+ let bytesPerLine = width * 4;
+ for(let i = 0; i < parseInt(height / 2); i++){
+ let j = height - i - 1;
- //Utils.debugSphere(viewer.scene.scene, drag.pivot, 0.05);
- }else {
- handle = drag.handle;
+ let lineI = buffer.slice(i * bytesPerLine, i * bytesPerLine + bytesPerLine);
+ let lineJ = buffer.slice(j * bytesPerLine, j * bytesPerLine + bytesPerLine);
+ buffer.set(lineJ, i * bytesPerLine);
+ buffer.set(lineI, j * bytesPerLine);
}
- this.dragging = true;
+ this.screenshot.target.dispose();
+ delete this.screenshot;
- {
- let mouse = drag.end;
- let domElement = this.viewer.renderer.domElement;
- let ray = Utils.mouseToRay(mouse, camera, domElement.clientWidth, domElement.clientHeight);
- let I = ray.intersectPlane(drag.dragPlane, new Vector3());
+ return {
+ width: width,
+ height: height,
+ buffer: buffer
+ };
+ }
- if (I) {
- let iOnLine = drag.line.closestPointToPoint(I, false, new Vector3());
- let direction = handle.alignment.reduce( (a, v) => a + v, 0);
+ clearTargets(){
+ const viewer = this.viewer;
+ const {renderer} = viewer;
- let toObjectSpace = this.selection[0].matrixWorld.clone().invert();
- let iOnLineOS = iOnLine.clone().applyMatrix4(toObjectSpace);
- let pivotOS = drag.pivot.clone().applyMatrix4(toObjectSpace);
- let diffOS = new Vector3().subVectors(iOnLineOS, pivotOS);
- let dragDirectionOS = diffOS.clone().normalize();
- if(iOnLine.distanceTo(drag.pivot) === 0){
- dragDirectionOS.set(0, 0, 0);
- }
- let dragDirection = dragDirectionOS.dot(new Vector3(...handle.alignment));
+ const oldTarget = renderer.getRenderTarget();
- let diff = new Vector3().subVectors(iOnLine, drag.pivot);
- let diffScale = new Vector3(...handle.alignment).multiplyScalar(diff.length() * direction * dragDirection);
- let diffPosition = diff.clone().multiplyScalar(0.5);
+ renderer.setRenderTarget( this.rtEDL );
+ renderer.clear( true, true, true );
- for (let selection of this.selection) {
- selection.scale.add(diffScale);
- selection.scale.x = Math.max(0.1, selection.scale.x);
- selection.scale.y = Math.max(0.1, selection.scale.y);
- selection.scale.z = Math.max(0.1, selection.scale.z);
- selection.position.add(diffPosition);
- selection.dispatchEvent({
- type: "position_changed",
- object: selection
- });
- selection.dispatchEvent({
- type: "scale_changed",
- object: selection
- });
- }
+ renderer.setRenderTarget( this.rtRegular );
+ renderer.clear( true, true, false );
- drag.pivot.copy(iOnLine);
- //Utils.debugSphere(viewer.scene.scene, drag.pivot, 0.05);
- }
- }
+ renderer.setRenderTarget(oldTarget);
}
- setActiveHandle(handle){
- if(this.dragging){
- return;
- }
+ clear(){
+ this.initEDL();
+ const viewer = this.viewer;
- if(this.activeHandle === handle){
- return;
+ const {renderer, background} = viewer;
+
+ if(background === "skybox"){
+ renderer.setClearColor(0x000000, 0);
+ } else if (background === 'gradient') {
+ renderer.setClearColor(0x000000, 0);
+ } else if (background === 'black') {
+ renderer.setClearColor(0x000000, 1);
+ } else if (background === 'white') {
+ renderer.setClearColor(0xFFFFFF, 1);
+ } else {
+ renderer.setClearColor(0x000000, 0);
}
+
+ renderer.clear();
- this.activeHandle = handle;
+ this.clearTargets();
+ }
- if(handle === null){
- for(let handleName of Object.keys(this.handles)){
- let handle = this.handles[handleName];
- handle.node.setOpacity(0);
- }
- }
+ renderShadowMap(visiblePointClouds, camera, lights){
- for(let handleName of Object.keys(this.focusHandles)){
- let handle = this.focusHandles[handleName];
+ const {viewer} = this;
- if(this.activeHandle === handle){
- handle.node.setOpacity(1.0);
- }else {
- handle.node.setOpacity(0.4);
- }
- }
+ const doShadows = lights.length > 0 && !(lights[0].disableShadowUpdates);
+ if(doShadows){
+ let light = lights[0];
- for(let handleName of Object.keys(this.translationHandles)){
- let handle = this.translationHandles[handleName];
+ this.shadowMap.setLight(light);
- if(this.activeHandle === handle){
- handle.node.setOpacity(1.0);
- }else {
- handle.node.setOpacity(0.4);
+ let originalAttributes = new Map();
+ for(let pointcloud of viewer.scene.pointclouds){
+ // TODO IMPORTANT !!! check
+ originalAttributes.set(pointcloud, pointcloud.material.activeAttributeName);
+ pointcloud.material.disableEvents();
+ pointcloud.material.activeAttributeName = "depth";
+ //pointcloud.material.pointColorType = PointColorType.DEPTH;
}
- }
- for(let handleName of Object.keys(this.rotationHandles)){
- let handle = this.rotationHandles[handleName];
+ this.shadowMap.render(viewer.scene.scenePointCloud, camera);
- //if(this.activeHandle === handle){
- // handle.node.setOpacity(1.0);
- //}else{
- // handle.node.setOpacity(0.4)
- //}
+ for(let pointcloud of visiblePointClouds){
+ let originalAttribute = originalAttributes.get(pointcloud);
+ // TODO IMPORTANT !!! check
+ pointcloud.material.activeAttributeName = originalAttribute;
+ pointcloud.material.enableEvents();
+ }
- handle.node.setOpacity(0.4);
+ viewer.shadowTestCam.updateMatrixWorld();
+ viewer.shadowTestCam.matrixWorldInverse.copy(viewer.shadowTestCam.matrixWorld).invert();
+ viewer.shadowTestCam.updateProjectionMatrix();
}
- for(let handleName of Object.keys(this.scaleHandles)){
- let handle = this.scaleHandles[handleName];
+ }
- if(this.activeHandle === handle){
- handle.node.setOpacity(1.0);
+ render(params){
+ this.initEDL();
- let relatedFocusHandle = this.focusHandles[handle.name.replace("scale", "focus")];
- let relatedFocusNode = relatedFocusHandle.node;
- relatedFocusNode.setOpacity(0.4);
+ const viewer = this.viewer;
+ let camera = params.camera ? params.camera : viewer.scene.getActiveCamera();
+ const {width, height} = this.viewer.renderer.getSize(new Vector2());
- for(let translationHandleName of Object.keys(this.translationHandles)){
- let translationHandle = this.translationHandles[translationHandleName];
- translationHandle.node.setOpacity(0.4);
- }
- //let relatedTranslationHandle = this.translationHandles[
- // handle.name.replace("scale", "translation").replace(/[+-]/g, "")];
- //let relatedTranslationNode = relatedTranslationHandle.node;
- //relatedTranslationNode.setOpacity(0.4);
+ viewer.dispatchEvent({type: "render.pass.begin",viewer: viewer});
+
+ this.resize(width, height);
+ const visiblePointClouds = viewer.scene.pointclouds.filter(pc => pc.visible);
- }else {
- handle.node.setOpacity(0.4);
- }
+ if(this.screenshot){
+ let oldBudget = Potree.pointBudget;
+ Potree.pointBudget = Math.max(10 * 1000 * 1000, 2 * oldBudget);
+ let result = Potree.updatePointClouds(
+ viewer.scene.pointclouds,
+ camera,
+ viewer.renderer);
+ Potree.pointBudget = oldBudget;
}
-
+ let lights = [];
+ viewer.scene.scene.traverse(node => {
+ if(node.type === "SpotLight"){
+ lights.push(node);
+ }
+ });
+ if(viewer.background === "skybox"){
+ viewer.skybox.camera.rotation.copy(viewer.scene.cameraP.rotation);
+ viewer.skybox.camera.fov = viewer.scene.cameraP.fov;
+ viewer.skybox.camera.aspect = viewer.scene.cameraP.aspect;
+ viewer.skybox.parent.rotation.x = 0;
+ viewer.skybox.parent.updateMatrixWorld();
- if(handle){
- handle.node.setOpacity(1.0);
- }
+ viewer.skybox.camera.updateProjectionMatrix();
+ viewer.renderer.render(viewer.skybox.scene, viewer.skybox.camera);
+ } else if (viewer.background === 'gradient') {
+ viewer.renderer.render(viewer.scene.sceneBG, viewer.scene.cameraBG);
+ }
-
- }
+ //TODO adapt to multiple lights
+ this.renderShadowMap(visiblePointClouds, camera, lights);
- update () {
+ { // COLOR & DEPTH PASS
+ for (let pointcloud of visiblePointClouds) {
+ let octreeSize = pointcloud.pcoGeometry.boundingBox.getSize(new Vector3()).x;
- if(this.selection.length === 1){
+ let material = pointcloud.material;
+ material.weighted = false;
+ material.useLogarithmicDepthBuffer = false;
+ material.useEDL = true;
- this.scene.visible = true;
+ material.screenWidth = width;
+ material.screenHeight = height;
+ material.uniforms.visibleNodes.value = pointcloud.material.visibleNodesTexture;
+ material.uniforms.octreeSize.value = octreeSize;
+ material.spacing = pointcloud.pcoGeometry.spacing; // * Math.max(pointcloud.scale.x, pointcloud.scale.y, pointcloud.scale.z);
+ }
+
+ // TODO adapt to multiple lights
+ viewer.renderer.setRenderTarget(this.rtEDL);
+
+ if(lights.length > 0){
+ viewer.pRenderer.render(viewer.scene.scenePointCloud, camera, this.rtEDL, {
+ clipSpheres: viewer.scene.volumes.filter(v => (v instanceof SphereVolume)),
+ shadowMaps: [this.shadowMap],
+ transparent: false,
+ });
+ }else {
- this.scene.updateMatrix();
- this.scene.updateMatrixWorld();
+
+ // let test = camera.clone();
+ // test.matrixAutoUpdate = false;
- let selected = this.selection[0];
- let world = selected.matrixWorld;
- let camera = this.viewer.scene.getActiveCamera();
- let domElement = this.viewer.renderer.domElement;
- let mouse = this.viewer.inputHandler.mouse;
+ // //test.updateMatrixWorld = () => {};
- let center = selected.boundingBox.getCenter(new Vector3()).clone().applyMatrix4(selected.matrixWorld);
+ // let mat = new THREE.Matrix4().set(
+ // 1, 0, 0, 0,
+ // 0, 0, 1, 0,
+ // 0, -1, 0, 0,
+ // 0, 0, 0, 1,
+ // );
+ // mat.invert()
- this.scene.scale.copy(selected.boundingBox.getSize(new Vector3()).multiply(selected.scale));
- this.scene.position.copy(center);
- this.scene.rotation.copy(selected.rotation);
+ // test.matrix.multiplyMatrices(mat, test.matrix);
+ // test.updateMatrixWorld();
- this.scene.updateMatrixWorld();
+ //test.matrixWorld.multiplyMatrices(mat, test.matrixWorld);
+ //test.matrixWorld.multiply(mat);
+ //test.matrixWorldInverse.invert(test.matrixWorld);
+ //test.matrixWorldInverse.multiplyMatrices(test.matrixWorldInverse, mat);
+
- {
- // adjust scale of components
- for(let handleName of Object.keys(this.handles)){
- let handle = this.handles[handleName];
- let node = handle.node;
+ viewer.pRenderer.render(viewer.scene.scenePointCloud, camera, this.rtEDL, {
+ clipSpheres: viewer.scene.volumes.filter(v => (v instanceof SphereVolume)),
+ transparent: false,
+ });
+ }
- let handlePos = node.getWorldPosition(new Vector3());
- let distance = handlePos.distanceTo(camera.position);
- let pr = Utils.projectedRadius(1, camera, distance, domElement.clientWidth, domElement.clientHeight);
+
+ }
- let ws = node.parent.getWorldScale(new Vector3());
+ viewer.dispatchEvent({type: "render.pass.scene", viewer: viewer, renderTarget: this.rtRegular});
+ viewer.renderer.setRenderTarget(null);
+ viewer.renderer.render(viewer.scene.scene, camera);
- let s = (7 / pr);
- let scale = new Vector3(s, s, s).divide(ws);
+ { // EDL PASS
- let rot = new Matrix4().makeRotationFromEuler(node.rotation);
- let rotInv = rot.clone().invert();
+ const uniforms = this.edlMaterial.uniforms;
- scale.applyMatrix4(rotInv);
- scale.x = Math.abs(scale.x);
- scale.y = Math.abs(scale.y);
- scale.z = Math.abs(scale.z);
+ uniforms.screenWidth.value = width;
+ uniforms.screenHeight.value = height;
- node.scale.copy(scale);
- }
+ let proj = camera.projectionMatrix;
+ let projArray = new Float32Array(16);
+ projArray.set(proj.elements);
- // adjust rotation handles
- if(!this.dragging){
- let tWorld = this.scene.matrixWorld;
- let tObject = tWorld.clone().invert();
- let camObjectPos = camera.getWorldPosition(new Vector3()).applyMatrix4(tObject);
+ uniforms.uNear.value = camera.near;
+ uniforms.uFar.value = camera.far;
+ uniforms.uEDLColor.value = this.rtEDL.texture;
+ uniforms.uEDLDepth.value = this.rtEDL.depthTexture;
+ uniforms.uProj.value = projArray;
- let x = this.rotationHandles["rotation.x"].node.rotation;
- let y = this.rotationHandles["rotation.y"].node.rotation;
- let z = this.rotationHandles["rotation.z"].node.rotation;
+ uniforms.edlStrength.value = viewer.edlStrength;
+ uniforms.radius.value = viewer.edlRadius;
+ uniforms.opacity.value = viewer.edlOpacity; // HACK
+
+ Utils.screenPass.render(viewer.renderer, this.edlMaterial);
- x.order = "ZYX";
- y.order = "ZYX";
+ if(this.screenshot){
+ Utils.screenPass.render(viewer.renderer, this.edlMaterial, this.screenshot.target);
+ }
- let above = camObjectPos.z > 0;
- let below = !above;
- let PI_HALF = Math.PI / 2;
+ }
- if(above){
- if(camObjectPos.x > 0 && camObjectPos.y > 0){
- x.x = 1 * PI_HALF;
- y.y = 3 * PI_HALF;
- z.z = 0 * PI_HALF;
- }else if(camObjectPos.x < 0 && camObjectPos.y > 0){
- x.x = 1 * PI_HALF;
- y.y = 2 * PI_HALF;
- z.z = 1 * PI_HALF;
- }else if(camObjectPos.x < 0 && camObjectPos.y < 0){
- x.x = 2 * PI_HALF;
- y.y = 2 * PI_HALF;
- z.z = 2 * PI_HALF;
- }else if(camObjectPos.x > 0 && camObjectPos.y < 0){
- x.x = 2 * PI_HALF;
- y.y = 3 * PI_HALF;
- z.z = 3 * PI_HALF;
- }
- }else if(below){
- if(camObjectPos.x > 0 && camObjectPos.y > 0){
- x.x = 0 * PI_HALF;
- y.y = 0 * PI_HALF;
- z.z = 0 * PI_HALF;
- }else if(camObjectPos.x < 0 && camObjectPos.y > 0){
- x.x = 0 * PI_HALF;
- y.y = 1 * PI_HALF;
- z.z = 1 * PI_HALF;
- }else if(camObjectPos.x < 0 && camObjectPos.y < 0){
- x.x = 3 * PI_HALF;
- y.y = 1 * PI_HALF;
- z.z = 2 * PI_HALF;
- }else if(camObjectPos.x > 0 && camObjectPos.y < 0){
- x.x = 3 * PI_HALF;
- y.y = 0 * PI_HALF;
- z.z = 3 * PI_HALF;
- }
- }
- }
+ viewer.dispatchEvent({type: "render.pass.scene", viewer: viewer});
- {
- let ray = Utils.mouseToRay(mouse, camera, domElement.clientWidth, domElement.clientHeight);
- let raycaster = new Raycaster(ray.origin, ray.direction);
- let intersects = raycaster.intersectObjects(this.pickVolumes.filter(v => v.visible), true);
+ viewer.renderer.clearDepth();
- if(intersects.length > 0){
- let I = intersects[0];
- let handleName = I.object.handle;
- this.setActiveHandle(this.handles[handleName]);
- }else {
- this.setActiveHandle(null);
- }
- }
+ viewer.transformationTool.update();
- //
- for(let handleName of Object.keys(this.scaleHandles)){
- let handle = this.handles[handleName];
- let node = handle.node;
- let alignment = handle.alignment;
+ viewer.dispatchEvent({type: "render.pass.perspective_overlay",viewer: viewer});
+
+ viewer.renderer.render(viewer.controls.sceneControls, camera);
+ viewer.renderer.render(viewer.clippingTool.sceneVolume, camera);
+ viewer.renderer.render(viewer.transformationTool.scene, camera);
+
+ viewer.dispatchEvent({type: "render.pass.end",viewer: viewer});
+
+ }
+ }
+
+ class HQSplatRenderer{
+
+ constructor(viewer){
+ this.viewer = viewer;
+
+ this.depthMaterials = new Map();
+ this.attributeMaterials = new Map();
+ this.normalizationMaterial = null;
-
+ this.rtDepth = null;
+ this.rtAttribute = null;
+ this.gl = viewer.renderer.getContext();
- }
- }
+ this.initialized = false;
+ }
- }else {
- this.scene.visible = false;
+ init(){
+ if (this.initialized) {
+ return;
}
-
- }
- };
+ this.normalizationMaterial = new NormalizationMaterial();
+ this.normalizationMaterial.depthTest = true;
+ this.normalizationMaterial.depthWrite = true;
+ this.normalizationMaterial.transparent = true;
- class VolumeTool extends EventDispatcher{
- constructor (viewer) {
- super();
+ this.normalizationEDLMaterial = new NormalizationEDLMaterial();
+ this.normalizationEDLMaterial.depthTest = true;
+ this.normalizationEDLMaterial.depthWrite = true;
+ this.normalizationEDLMaterial.transparent = true;
- this.viewer = viewer;
- this.renderer = viewer.renderer;
+ this.rtDepth = new WebGLRenderTarget(1024, 1024, {
+ minFilter: NearestFilter,
+ magFilter: NearestFilter,
+ format: RGBAFormat,
+ type: FloatType,
+ depthTexture: new DepthTexture(undefined, undefined, UnsignedIntType)
+ });
- this.addEventListener('start_inserting_volume', e => {
- this.viewer.dispatchEvent({
- type: 'cancel_insertions'
- });
+ this.rtAttribute = new WebGLRenderTarget(1024, 1024, {
+ minFilter: NearestFilter,
+ magFilter: NearestFilter,
+ format: RGBAFormat,
+ type: FloatType,
+ depthTexture: this.rtDepth.depthTexture,
});
- this.scene = new Scene();
- this.scene.name = 'scene_volume';
+ this.initialized = true;
+ };
- this.viewer.inputHandler.registerInteractiveScene(this.scene);
+ resize(width, height){
+ this.rtDepth.setSize(width, height);
+ this.rtAttribute.setSize(width, height);
+ }
- this.onRemove = e => {
- this.scene.remove(e.volume);
- };
+ clearTargets(){
+ const viewer = this.viewer;
+ const {renderer} = viewer;
- this.onAdd = e => {
- this.scene.add(e.volume);
- };
+ const oldTarget = renderer.getRenderTarget();
- for(let volume of viewer.scene.volumes){
- this.onAdd({volume: volume});
- }
+ renderer.setClearColor(0x000000, 0);
- this.viewer.inputHandler.addEventListener('delete', e => {
- let volumes = e.selection.filter(e => (e instanceof Volume));
- volumes.forEach(e => this.viewer.scene.removeVolume(e));
- });
+ renderer.setRenderTarget( this.rtDepth );
+ renderer.clear( true, true, true );
- viewer.addEventListener("update", this.update.bind(this));
- viewer.addEventListener("render.pass.scene", e => this.render(e));
- viewer.addEventListener("scene_changed", this.onSceneChange.bind(this));
+ renderer.setRenderTarget( this.rtAttribute );
+ renderer.clear( true, true, true );
- viewer.scene.addEventListener('volume_added', this.onAdd);
- viewer.scene.addEventListener('volume_removed', this.onRemove);
+ renderer.setRenderTarget(oldTarget);
}
- onSceneChange(e){
- if(e.oldScene){
- e.oldScene.removeEventListeners('volume_added', this.onAdd);
- e.oldScene.removeEventListeners('volume_removed', this.onRemove);
- }
- e.scene.addEventListener('volume_added', this.onAdd);
- e.scene.addEventListener('volume_removed', this.onRemove);
- }
+ clear(){
+ this.init();
- startInsertion (args = {}) {
- let volume;
- if(args.type){
- volume = new args.type();
- }else {
- volume = new BoxVolume();
- }
-
- volume.clip = args.clip || false;
- volume.name = args.name || 'Volume';
+ const {renderer, background} = this.viewer;
- this.dispatchEvent({
- type: 'start_inserting_volume',
- volume: volume
- });
+ if(background === "skybox"){
+ renderer.setClearColor(0x000000, 0);
+ } else if (background === 'gradient') {
+ renderer.setClearColor(0x000000, 0);
+ } else if (background === 'black') {
+ renderer.setClearColor(0x000000, 1);
+ } else if (background === 'white') {
+ renderer.setClearColor(0xFFFFFF, 1);
+ } else {
+ renderer.setClearColor(0x000000, 0);
+ }
- this.viewer.scene.addVolume(volume);
- this.scene.add(volume);
+ renderer.clear();
- let cancel = {
- callback: null
- };
+ this.clearTargets();
+ }
- let drag = e => {
- let camera = this.viewer.scene.getActiveCamera();
-
- let I = Utils.getMousePointCloudIntersection(
- e.drag.end,
- this.viewer.scene.getActiveCamera(),
- this.viewer,
- this.viewer.scene.pointclouds,
- {pickClipped: false});
+ render (params) {
+ this.init();
- if (I) {
- volume.position.copy(I.location);
+ const viewer = this.viewer;
+ const camera = params.camera ? params.camera : viewer.scene.getActiveCamera();
+ const {width, height} = this.viewer.renderer.getSize(new Vector2());
- let wp = volume.getWorldPosition(new Vector3()).applyMatrix4(camera.matrixWorldInverse);
- // let pp = new THREE.Vector4(wp.x, wp.y, wp.z).applyMatrix4(camera.projectionMatrix);
- let w = Math.abs((wp.z / 5));
- volume.scale.set(w, w, w);
- }
- };
+ viewer.dispatchEvent({type: "render.pass.begin",viewer: viewer});
- let drop = e => {
- volume.removeEventListener('drag', drag);
- volume.removeEventListener('drop', drop);
+ this.resize(width, height);
- cancel.callback();
- };
+ const visiblePointClouds = viewer.scene.pointclouds.filter(pc => pc.visible);
+ const originalMaterials = new Map();
- cancel.callback = e => {
- volume.removeEventListener('drag', drag);
- volume.removeEventListener('drop', drop);
- this.viewer.removeEventListener('cancel_insertions', cancel.callback);
- };
+ for(let pointcloud of visiblePointClouds){
+ originalMaterials.set(pointcloud, pointcloud.material);
- volume.addEventListener('drag', drag);
- volume.addEventListener('drop', drop);
- this.viewer.addEventListener('cancel_insertions', cancel.callback);
+ if(!this.attributeMaterials.has(pointcloud)){
+ let attributeMaterial = new PointCloudMaterial$1();
+ this.attributeMaterials.set(pointcloud, attributeMaterial);
+ }
- this.viewer.inputHandler.startDragging(volume);
+ if(!this.depthMaterials.has(pointcloud)){
+ let depthMaterial = new PointCloudMaterial$1();
- return volume;
- }
+ depthMaterial.setDefine("depth_pass", "#define hq_depth_pass");
+ depthMaterial.setDefine("use_edl", "#define use_edl");
- update(){
- if (!this.viewer.scene) {
- return;
+ this.depthMaterials.set(pointcloud, depthMaterial);
+ }
}
-
- let camera = this.viewer.scene.getActiveCamera();
- let renderAreaSize = this.viewer.renderer.getSize(new Vector2());
- let clientWidth = renderAreaSize.width;
- let clientHeight = renderAreaSize.height;
- let volumes = this.viewer.scene.volumes;
- for (let volume of volumes) {
- let label = volume.label;
-
- {
+ { // DEPTH PASS
+ for (let pointcloud of visiblePointClouds) {
+ let octreeSize = pointcloud.pcoGeometry.boundingBox.getSize(new Vector3()).x;
- let distance = label.position.distanceTo(camera.position);
- let pr = Utils.projectedRadius(1, camera, distance, clientWidth, clientHeight);
+ let material = originalMaterials.get(pointcloud);
+ let depthMaterial = this.depthMaterials.get(pointcloud);
- let scale = (70 / pr);
- label.scale.set(scale, scale, scale);
- }
+ depthMaterial.size = material.size;
+ depthMaterial.minSize = material.minSize;
+ depthMaterial.maxSize = material.maxSize;
- let calculatedVolume = volume.getVolume();
- calculatedVolume = calculatedVolume / Math.pow(this.viewer.lengthUnit.unitspermeter, 3) * Math.pow(this.viewer.lengthUnitDisplay.unitspermeter, 3); //convert to cubic meters then to the cubic display unit
- let text = Utils.addCommas(calculatedVolume.toFixed(3)) + ' ' + this.viewer.lengthUnitDisplay.code + '\u00B3';
- label.setText(text);
- }
- }
+ depthMaterial.pointSizeType = material.pointSizeType;
+ depthMaterial.visibleNodesTexture = material.visibleNodesTexture;
+ depthMaterial.weighted = false;
+ depthMaterial.screenWidth = width;
+ depthMaterial.shape = PointShape.CIRCLE;
+ depthMaterial.screenHeight = height;
+ depthMaterial.uniforms.visibleNodes.value = material.visibleNodesTexture;
+ depthMaterial.uniforms.octreeSize.value = octreeSize;
+ depthMaterial.spacing = pointcloud.pcoGeometry.spacing; // * Math.max(...pointcloud.scale.toArray());
+ depthMaterial.classification = material.classification;
+ depthMaterial.uniforms.classificationLUT.value.image.data = material.uniforms.classificationLUT.value.image.data;
+ depthMaterial.classificationTexture.needsUpdate = true;
- render(params){
- const renderer = this.viewer.renderer;
+ depthMaterial.uniforms.uFilterReturnNumberRange.value = material.uniforms.uFilterReturnNumberRange.value;
+ depthMaterial.uniforms.uFilterNumberOfReturnsRange.value = material.uniforms.uFilterNumberOfReturnsRange.value;
+ depthMaterial.uniforms.uFilterGPSTimeClipRange.value = material.uniforms.uFilterGPSTimeClipRange.value;
+ depthMaterial.uniforms.uFilterPointSourceIDClipRange.value = material.uniforms.uFilterPointSourceIDClipRange.value;
- const oldTarget = renderer.getRenderTarget();
-
- if(params.renderTarget){
- renderer.setRenderTarget(params.renderTarget);
- }
- renderer.render(this.scene, this.viewer.scene.getActiveCamera());
- renderer.setRenderTarget(oldTarget);
- }
+ depthMaterial.clipTask = material.clipTask;
+ depthMaterial.clipMethod = material.clipMethod;
+ depthMaterial.setClipBoxes(material.clipBoxes);
+ depthMaterial.setClipPolygons(material.clipPolygons);
- }
+ pointcloud.material = depthMaterial;
+ }
+
+ viewer.pRenderer.render(viewer.scene.scenePointCloud, camera, this.rtDepth, {
+ clipSpheres: viewer.scene.volumes.filter(v => (v instanceof SphereVolume)),
+ });
+ }
- class Compass{
-
- constructor(viewer){
- this.viewer = viewer;
-
- this.visible = false;
- this.dom = this.createElement();
-
- viewer.addEventListener("update", () => {
- const direction = viewer.scene.view.direction.clone();
- direction.z = 0;
- direction.normalize();
-
- const camera = viewer.scene.getActiveCamera();
-
- const p1 = camera.getWorldPosition(new Vector3());
- const p2 = p1.clone().add(direction);
-
- const projection = viewer.getProjection();
- const azimuth = Utils.computeAzimuth(p1, p2, projection);
-
- this.dom.css("transform", `rotateZ(${-azimuth}rad)`);
- });
-
- this.dom.click( () => {
- viewer.setTopView();
- });
-
- const renderArea = $(viewer.renderArea);
- renderArea.append(this.dom);
-
- this.setVisible(this.visible);
- }
-
- setVisible(visible){
- this.visible = visible;
-
- const value = visible ? "" : "none";
- this.dom.css("display", value);
- }
-
- isVisible(){
- return this.visible;
- }
-
- createElement(){
- const style = `style="position: absolute; top: 10px; right: 10px; z-index: 10000; width: 64px;"`;
- const img = $(`
+ //
- this.elContent.find("#volume_make_uniform").click(() => {
- let mean = (measurement.scale.x + measurement.scale.y + measurement.scale.z) / 3;
- measurement.scale.set(mean, mean, mean);
- });
+ const addNewKeyframeItem = (index) => {
+ let elNewKeyframe = $(`
+ 
+
+
+ 
+
+
+ keyframe
+
+
+ 
+
+