potree/examples/gradient_colors.html at develop · i4works/potree · GitHub

History

148 lines (120 loc) · 5.12 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

<!DOCTYPE html>

<head>

<title>Potree Viewer</title>

</head>

<body>

</div>

import * as THREE from "../libs/three.js/build/three.module.js";

window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));

viewer.setEDLEnabled(true);

viewer.setFOV(60);

viewer.setPointBudget(1_000_000);

viewer.setMinNodeSize(10);

viewer.loadSettingsFromURL();

viewer.setDescription(`Available gradient color schemes.<br>

Set scheme with 'pointcloud.material.gradient = Potree.Gradients.<name>'`);

viewer.loadGUI(() => {

viewer.setLanguage('en');

$("#menu_scene").next().show();

viewer.toggleSidebar();

});

viewer.scene.view.position.set(1441.04, -826.93, 1604.68);

viewer.scene.view.lookAt(new THREE.Vector3(296.27, -162.42, 786.24));

let gradientNames = Object.keys(Potree.Gradients);

let radius = 520;

for(let i = 0; i < gradientNames.length; i++){

let gradientName = gradientNames[i];

let gradient = Potree.Gradients[gradientName];

let u = 2 * Math.PI * i / gradientNames.length;

let x = 0; //Math.cos(u) * radius + 2.5;

let y = 400 * u - 900; //Math.sin(u) * radius + 0.8;

Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", gradientName, e => {

viewer.scene.addPointCloud(e.pointcloud);

let material = e.pointcloud.material;

material.pointSizeType = Potree.PointSizeType.ADAPTIVE;

material.activeAttributeName = "elevation";

material.gradient = gradient;

if(gradientName === "CONTOUR"){

material.elevationRange = [750, 760];

viewer.setElevationGradientRepeat(Potree.ElevationGradientRepeat.REPEAT);

}else{

material.elevationRange = [720, 800];

}

e.pointcloud.position.set(x, y, e.pointcloud.position.z);

e.pointcloud.updateMatrixWorld();

let box = e.pointcloud.pcoGeometry.tightBoundingBox.clone();

box.applyMatrix4(e.pointcloud.matrixWorld);

let center = box.getCenter();

let annotation = new Potree.Annotation({

title: gradientName,

radius: 600

});

annotation.position = center;

annotation.position.z += 30;

viewer.scene.annotations.add(annotation);

});

}

Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", "custom", e => {

viewer.scene.addPointCloud(e.pointcloud);

let material = e.pointcloud.material;

material.pointSizeType = Potree.PointSizeType.ADAPTIVE;

material.activeAttributeName = "elevation";

material.gradient = [

[0.0, new THREE.Color(0.090, 0.545, 0.400)],

[0.1, new THREE.Color(0.180, 0.590, 0.400)],

[0.2, new THREE.Color(0.271, 0.635, 0.400)],

[0.3, new THREE.Color(0.365, 0.682, 0.400)],

[0.4, new THREE.Color(0.455, 0.727, 0.400)],

[0.5, new THREE.Color(0.545, 0.773, 0.400)],

[0.6, new THREE.Color(0.635, 0.818, 0.400)],

[0.7, new THREE.Color(0.729, 0.865, 0.400)],

[0.8, new THREE.Color(0.820, 0.910, 0.400)],

[0.9, new THREE.Color(0.910, 0.955, 0.400)],

[1.0, new THREE.Color(1.000, 1.000, 0.400)],

];

material.elevationRange = [720, 800];

e.pointcloud.position.set(0, -1200, e.pointcloud.position.z);

let annotation = new Potree.Annotation({

title: "custom",

radius: 600

});

e.pointcloud.updateMatrixWorld();

let box = e.pointcloud.pcoGeometry.tightBoundingBox.clone();

box.applyMatrix4(e.pointcloud.matrixWorld);

let center = box.getCenter();

annotation.position = center;

annotation.position.z += 30;

//annotation.position = new THREE.Vector3(0, 0, 5);

viewer.scene.annotations.add(annotation);

});

</script>

</body>

</html>

potree/examples/gradient_colors.html at develop · i4works/potree · GitHub

Expand file tree

Breadcrumbs

gradient_colors.html

Latest commit

History

Breadcrumbs

gradient_colors.html

File metadata and controls