Make 3D scene colors customizable by CSS

css/window.css

@@ -67,11 +67,19 @@
 	div#center > div {
 		max-height: 100%;
 	}
-	div#preview {
+	#preview {
 		flex-grow: 1;
 		background-repeat: no-repeat;
 		background-size: 1000px;
 		position: relative;
+
+		--color-solid: #c1c1c1;
+		--color-outline: var(--color-accent);
+		--color-gizmohover: var(--color-outline);
+		--color-ground: var(--color-back);
+		--color-axis-x: #fd3043;
+		--color-axis-y: #26ec45;
+		--color-axis-z: #2d5ee8;
 	}
 	#status_bar {
 		grid-area: status_bar;

js/display_mode.js

@@ -1165,7 +1165,7 @@ enterDisplaySettings = function() {		//Enterung Display Setting Mode, changes th
 	$('#display_bar input#thirdperson_righthand').prop("checked", true)
 
 
-	buildGrid()
+	Canvas.buildGrid()
 	updateShading()
 	DisplayMode.loadThirdRight()
 
@@ -1192,7 +1192,7 @@ exitDisplaySettings = function() {		//Enterung Display Setting Mode, changes the
 		openQuadView()
 	}
 	scene.add(Transformer)
-	buildGrid()
+	Canvas.buildGrid()
 	updateShading()
 	Canvas.updateRenderSides()
 }

js/interface/settings.js

@@ -373,7 +373,7 @@ const Settings = {
 		}
 		if (hasSettingChanged('base_grid') || hasSettingChanged('large_grid') || hasSettingChanged('full_grid') || hasSettingChanged('large_grid_size')
 			||hasSettingChanged('large_box') || hasSettingChanged('display_grid') || hasSettingChanged('edit_size')) {
-			buildGrid()
+			Canvas.buildGrid()
 		}
 		Canvas.outlineMaterial.depthTest = !settings.seethrough_outline.value
 		if (hasSettingChanged('brightness')) {

js/interface/themes.js

@@ -368,28 +368,26 @@ const CustomTheme = {
 		$('meta[name=theme-color]').attr('content', CustomTheme.data.colors.frame);
 
 		if (typeof gizmo_colors != 'undefined') {
-			Canvas.ground_plane.material.color.set(CustomTheme.data.colors.back);
+			let preview_style = window.getComputedStyle(document.getElementById('preview'));
-
+			function update(three_color, variable) {
-			var c_outline = parseInt('0x'+CustomTheme.data.colors.accent.replace('#', ''))
+				let string = preview_style.getPropertyValue(variable).trim();
-			if (c_outline !== gizmo_colors.outline.getHex()) {
+				three_color.set(string);
-				gizmo_colors.outline.set(c_outline)
-				Canvas.outlineMaterial.color = gizmo_colors.outline
-			}
-			var c_wire = parseInt('0x'+CustomTheme.data.colors.wireframe.replace('#', ''))
-			if (c_wire !== gizmo_colors.wire.getHex()) {
-				gizmo_colors.wire.set(c_wire);
-				Canvas.wireframeMaterial.color = gizmo_colors.wire;
-			}
-
-			var c_grid = parseInt('0x'+CustomTheme.data.colors.grid.replace('#', ''))
-			if (c_grid !== gizmo_colors.grid.getHex()) {
-				gizmo_colors.grid.set(c_grid);
-				three_grid.children.forEach(c => {
-					if (c.name === 'grid' && c.material) {
-						c.material.color = gizmo_colors.grid;
-					}
-				})
 			}
+			update(gizmo_colors.r, '--color-axis-x');
+			update(gizmo_colors.g, '--color-axis-y');
+			update(gizmo_colors.b, '--color-axis-z');
+			update(gizmo_colors.grid, '--color-grid');
+			update(Canvas.gridMaterial.color, '--color-grid');
+			update(Canvas.wireframeMaterial.color, '--color-wireframe');
+			update(gizmo_colors.solid, '--color-solid');
+			update(gizmo_colors.outline, '--color-outline');
+			update(gizmo_colors.gizmo_hover, '--color-gizmohover');
+			update(Canvas.outlineMaterial.color, '--color-outline');
+			update(Canvas.ground_plane.material.color, '--color-ground');
+			
+			Canvas.pivot_marker.children.forEach(c => {
+				c.updateColors();
+			})
 		}
 	},
 	updateSettings() {
@@ -398,6 +396,7 @@ const CustomTheme = {
 		document.body.style.setProperty('--font-custom-code', CustomTheme.data.code_font);
 		document.body.classList.toggle('theme_borders', !!CustomTheme.data.borders);
 		$('style#theme_css').text(CustomTheme.data.css);
+		CustomTheme.updateColors();
 	},
 	loadTheme(theme) {
 		var app = CustomTheme.data;

js/io/format.js

@@ -34,7 +34,7 @@ class ModelFormat {
 		if (typeof this.onActivation == 'function') {
 			Format.onActivation()
 		}
-		buildGrid()
+		Canvas.buildGrid()
 		if (Format.centered_grid) {
 			scene.position.set(0, 0, 0);
 			Canvas.ground_plane.position.x = Canvas.ground_plane.position.z = 8;

js/preview/canvas.js

@@ -37,6 +37,12 @@ const Reusable = {
 }
 
 const Canvas = {
+	// Stores various colors for the 3D scene
+	gizmo_colors,
+	// Main Blockbench 3D scene
+	scene,
+	// Pivot marker
+	pivot_marker: rot_origin,
 	outlineMaterial: new THREE.LineBasicMaterial({
 		linewidth: 2,
 		transparent: true,
@@ -49,7 +55,6 @@ const Canvas = {
 	}),
 	meshVertexMaterial: new THREE.PointsMaterial({size: 7, sizeAttenuation: false, vertexColors: true}),
 	wireframeMaterial: new THREE.MeshBasicMaterial({
-		color: gizmo_colors.wire,
 		wireframe: true
 	}),
 	solidMaterial: (function() {
@@ -403,6 +408,155 @@ const Canvas = {
 	})(),
 	transparentMaterial: new THREE.MeshBasicMaterial({visible: false, name: 'invisible'}),
 	gridMaterial: new THREE.LineBasicMaterial({color: gizmo_colors.grid}),
+	buildGrid() {
+		three_grid.children.length = 0;
+		if (Canvas.side_grids) {
+			Canvas.side_grids.x.children.length = 0;
+			Canvas.side_grids.z.children.length = 0;
+		}
+		if (Modes.display && settings.display_grid.value === false) return;
+
+		three_grid.name = 'grid_group'
+		gizmo_colors.grid.set(parseInt('0x'+CustomTheme.data.colors.grid.replace('#', ''), 16));
+
+		Canvas.northMarkMaterial.color = gizmo_colors.grid
+
+		function setupAxisLine(origin, length, axis) {
+			var color = 'rgb'[getAxisNumber(axis)]
+			var material = new THREE.LineBasicMaterial({color: gizmo_colors[color]});
+			var dest = new THREE.Vector3().copy(origin);
+			dest[axis] += length;
+			let points = [
+				origin,
+				dest
+			];
+			let geometry = new THREE.BufferGeometry().setFromPoints(points)
+			
+
+			//geometry.vertices.push(origin)
+			//geometry.vertices.push(dest)
+
+			var line = new THREE.Line(geometry, material);
+			line.name = 'axis_line_'+axis;
+			three_grid.add(line)
+		}
+		//Axis Lines
+		if (settings.base_grid.value) {
+			var length = Format.centered_grid
+				? (settings.full_grid.value ? 24 : 8)
+				: 16
+			setupAxisLine(new THREE.Vector3( 0, 0.01, 0), length, 'x')
+			setupAxisLine(new THREE.Vector3( 0, 0.01, 0), length, 'z')
+
+		}
+
+		var side_grid = new THREE.Object3D()
+
+		if (settings.full_grid.value === true) {
+			//Grid
+			let size = settings.large_grid_size.value*16;
+			var grid = new THREE.GridHelper(size, size/canvasGridSize(), Canvas.gridMaterial);
+			if (Format.centered_grid) {
+				grid.position.set(0,0,0)
+			} else { 
+				grid.position.set(8,0,8)
+			}
+			grid.name = 'grid'
+			three_grid.add(grid)
+			side_grid.add(grid.clone())
+
+			//North
+			geometry = new THREE.PlaneGeometry(5, 5)
+			var north_mark = new THREE.Mesh(geometry, Canvas.northMarkMaterial)
+			if (Format.centered_grid) {
+				north_mark.position.set(0,0, -3 - size/2)
+			} else {
+				north_mark.position.set(8, 0, 5 - size/2)
+			}
+			north_mark.rotation.x = Math.PI / -2
+			three_grid.add(north_mark)
+
+		} else {
+			if (settings.large_grid.value === true) {
+				//Grid
+				let size = settings.large_grid_size.value
+				var grid = new THREE.GridHelper(size*16, size, Canvas.gridMaterial);
+				if (Format.centered_grid) {
+					grid.position.set(0,0,0)
+				} else { 
+					grid.position.set(8,0,8)
+				}
+				grid.name = 'grid'
+				three_grid.add(grid)
+				side_grid.add(grid.clone())
+			}
+
+			if (settings.base_grid.value === true) {
+				//Grid
+				var grid = new THREE.GridHelper(16, 16/canvasGridSize(), Canvas.gridMaterial);
+
+				if (Format.centered_grid) {
+					grid.position.set(0,0,0)
+				} else { 
+					grid.position.set(8,0,8)
+				}
+				grid.name = 'grid'
+				three_grid.add(grid)
+				side_grid.add(grid.clone())
+
+				//North
+				geometry = new THREE.PlaneGeometry(2.4, 2.4)
+				var north_mark = new THREE.Mesh(geometry, Canvas.northMarkMaterial)
+				if (Format.centered_grid) {
+					north_mark.position.set(0,0,-9.5)
+				} else {
+					north_mark.position.set(8,0,-1.5)
+				}
+				north_mark.rotation.x = Math.PI / -2
+				three_grid.add(north_mark)
+			}
+		}
+		if (settings.large_box.value === true) {
+			var geometry_box = new THREE.EdgesGeometry(new THREE.BoxBufferGeometry(48, 48, 48));
+
+			var line_material = new THREE.LineBasicMaterial({color: gizmo_colors.grid});
+			var large_box = new THREE.LineSegments( geometry_box, line_material);
+			if (Format.centered_grid) {
+				large_box.position.set(0,8,0)
+			} else { 
+				large_box.position.set(8,8,8)
+			}
+			large_box.name = 'grid'
+			three_grid.add(large_box)
+		}
+		scene.add(three_grid)
+
+		Canvas.side_grids = {
+			x: side_grid,
+			z: side_grid.clone()
+		}
+		three_grid.add(Canvas.side_grids.x)
+		Canvas.side_grids.x.name = 'side_grid_x'
+		Canvas.side_grids.x.visible = !Modes.display;
+		Canvas.side_grids.x.rotation.z = Math.PI/2;
+		Canvas.side_grids.x.position.y = Format.centered_grid ? 8 : 0;
+		Canvas.side_grids.z.position.z = 0
+		Canvas.side_grids.x.children.forEach(el => {
+			el.layers.set(1)
+		});
+
+		three_grid.add(Canvas.side_grids.z)
+		Canvas.side_grids.z.name = 'side_grid_z'
+		Canvas.side_grids.z.visible = !Modes.display;
+		Canvas.side_grids.z.rotation.z = Math.PI/2;
+		Canvas.side_grids.z.rotation.y = Math.PI/2
+		Canvas.side_grids.z.position.y = Format.centered_grid ? 8 : 0;
+		Canvas.side_grids.z.position.z = 0
+		Canvas.side_grids.z.children.forEach(el => {
+			el.layers.set(3)
+		});
+	},
+
 	face_order: ['east', 'west', 'up', 'down', 'south', 'north'],
 	temp_vectors: [new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()],
 
@@ -456,7 +610,6 @@ const Canvas = {
 		lights.west.intensity = lights.east.intensity = 0.1
 
 		updateShading()
-	
 
 		var img = new Image();
 		img.src = 'assets/north.png';
@@ -497,12 +650,12 @@ const Canvas = {
 		helper2.rotation.y = Math.PI / 1
 		helper2.scale.y = -1
 
-		rot_origin.add(helper1)
+		Canvas.pivot_marker.add(helper1)
-		rot_origin.add(helper2)
+		Canvas.pivot_marker.add(helper2)
 
-		rot_origin.rotation.reorder('ZYX')
+		Canvas.pivot_marker.rotation.reorder('ZYX')
-		rot_origin.base_scale = new THREE.Vector3(1, 1, 1);
+		Canvas.pivot_marker.base_scale = new THREE.Vector3(1, 1, 1);
-		rot_origin.no_export = true;
+		Canvas.pivot_marker.no_export = true;
 
 		Canvas.groundPlaneMaterial = new THREE.MeshBasicMaterial({
 			map: Canvas.emptyMaterials[0].uniforms.map.value,
@@ -543,7 +696,7 @@ const Canvas = {
 			edit(Canvas.side_grids.z)
 			edit(Transformer)
 			edit(Canvas.outlines)
-			edit(rot_origin)
+			edit(Canvas.pivot_marker)
 			edit(Vertexsnap.line)
 			edit(Animator.motion_trail)
 			Outliner.elements.forEach(element => {
@@ -823,20 +976,20 @@ const Canvas = {
 		}
 	},
 	updatePivotMarker() {
-		if (rot_origin.parent) {
+		if (Canvas.pivot_marker.parent) {
-			rot_origin.parent.remove(rot_origin)
+			Canvas.pivot_marker.parent.remove(Canvas.pivot_marker)
 		}
 		if (settings.origin_size.value > 0) {
 			if (Group.selected && Format.bone_rig) {
 				if (Group.selected.visibility) {
-					Group.selected.mesh.add(rot_origin)
+					Group.selected.mesh.add(Canvas.pivot_marker)
 				}
 			} else if ((Cube.selected.length && Format.rotate_cubes) || Mesh.selected.length) {
 				let selected_elements = [...Cube.selected, ...Mesh.selected];
 				if (selected_elements.length === 1) {
 					let mesh = selected_elements[0].mesh
 					if (mesh) {
-						mesh.add(rot_origin)
+						mesh.add(Canvas.pivot_marker)
 					}
 				} else {
 					var origin = null;
@@ -860,13 +1013,13 @@ const Canvas = {
 					if (first_visible && typeof origin === 'object') {
 						let mesh = first_visible.mesh
 						if (mesh) {
-							mesh.add(rot_origin)
+							mesh.add(Canvas.pivot_marker)
 						}
 					}
 				}
 			}
 		}
-		return !!rot_origin.parent;
+		return !!Canvas.pivot_marker.parent;
 	},
 	adaptObjectPosition(object, mesh) {
 		Canvas.updateView({

js/preview/preview.js

@@ -1,24 +1,22 @@
 var scene,
 	main_preview, MediaPreview,
 	Sun, lights,
-	outlines,
 	Transformer,
 	canvas_scenes,
 	display_scene, display_area, display_base;
 var framespersecond = 0;
 var display_mode = false;
-var doRender = false;
 var quad_previews = {};
 const three_grid = new THREE.Object3D();
 const rot_origin = new THREE.Object3D();
 var gizmo_colors = {
-	r: new THREE.Color(0xfd3043),
+	r: new THREE.Color(),
-	g: new THREE.Color(0x26ec45),
+	g: new THREE.Color(),
-	b: new THREE.Color(0x2d5ee8),
+	b: new THREE.Color(),
-	grid: new THREE.Color(0x495061),
+	grid: new THREE.Color(),
-	wire: new THREE.Color(0x576f82),
+	solid: new THREE.Color(),
-	solid: new THREE.Color(0xc1c1c1),
+	outline: new THREE.Color(),
-	outline: new THREE.Color(0x3e90ff)
+	gizmo_hover: new THREE.Color()
 }
 const DefaultCameraPresets = [
 	{
@@ -1984,156 +1982,6 @@ function updateCubeHighlights(hover_cube, force_off) {
 		}
 	})
 }
-//Helpers
-function buildGrid() {
-	three_grid.children.length = 0;
-	if (Canvas.side_grids) {
-		Canvas.side_grids.x.children.length = 0;
-		Canvas.side_grids.z.children.length = 0;
-	}
-	if (Modes.display && settings.display_grid.value === false) return;
-
-	three_grid.name = 'grid_group'
-	gizmo_colors.grid.set(parseInt('0x'+CustomTheme.data.colors.grid.replace('#', ''), 16));
-	var material;
-
-	Canvas.northMarkMaterial.color = gizmo_colors.grid
-
-	function setupAxisLine(origin, length, axis) {
-		var color = 'rgb'[getAxisNumber(axis)]
-		var material = new THREE.LineBasicMaterial({color: gizmo_colors[color]});
-		var dest = new THREE.Vector3().copy(origin);
-		dest[axis] += length;
-		let points = [
-			origin,
-			dest
-		];
-		let geometry = new THREE.BufferGeometry().setFromPoints(points)
-		
-
-		//geometry.vertices.push(origin)
-		//geometry.vertices.push(dest)
-
-		var line = new THREE.Line(geometry, material);
-		line.name = 'axis_line_'+axis;
-		three_grid.add(line)
-	}
-	//Axis Lines
-	if (settings.base_grid.value) {
-		var length = Format.centered_grid
-			? (settings.full_grid.value ? 24 : 8)
-			: 16
-		setupAxisLine(new THREE.Vector3( 0, 0.01, 0), length, 'x')
-		setupAxisLine(new THREE.Vector3( 0, 0.01, 0), length, 'z')
-
-	}
-
-	var side_grid = new THREE.Object3D()
-
-	if (settings.full_grid.value === true) {
-		//Grid
-		let size = settings.large_grid_size.value*16;
-		var grid = new THREE.GridHelper(size, size/canvasGridSize(), gizmo_colors.grid)
-		if (Format.centered_grid) {
-			grid.position.set(0,0,0)
-		} else { 
-			grid.position.set(8,0,8)
-		}
-		grid.name = 'grid'
-		three_grid.add(grid)
-		side_grid.add(grid.clone())
-
-		//North
-		geometry = new THREE.PlaneGeometry(5, 5)
-		var north_mark = new THREE.Mesh(geometry, Canvas.northMarkMaterial)
-		if (Format.centered_grid) {
-			north_mark.position.set(0,0, -3 - size/2)
-		} else {
-			north_mark.position.set(8, 0, 5 - size/2)
-		}
-		north_mark.rotation.x = Math.PI / -2
-		three_grid.add(north_mark)
-
-	} else {
-		if (settings.large_grid.value === true) {
-			//Grid
-			let size = settings.large_grid_size.value
-			var grid = new THREE.GridHelper(size*16, size, gizmo_colors.grid)
-			if (Format.centered_grid) {
-				grid.position.set(0,0,0)
-			} else { 
-				grid.position.set(8,0,8)
-			}
-			grid.name = 'grid'
-			three_grid.add(grid)
-			side_grid.add(grid.clone())
-		}
-
-		if (settings.base_grid.value === true) {
-			//Grid
-			var grid = new THREE.GridHelper(16, 16/canvasGridSize(), gizmo_colors.grid)
-
-			if (Format.centered_grid) {
-				grid.position.set(0,0,0)
-			} else { 
-				grid.position.set(8,0,8)
-			}
-			grid.name = 'grid'
-			three_grid.add(grid)
-			side_grid.add(grid.clone())
-
-			//North
-			geometry = new THREE.PlaneGeometry(2.4, 2.4)
-			var north_mark = new THREE.Mesh(geometry, Canvas.northMarkMaterial)
-			if (Format.centered_grid) {
-				north_mark.position.set(0,0,-9.5)
-			} else {
-				north_mark.position.set(8,0,-1.5)
-			}
-			north_mark.rotation.x = Math.PI / -2
-			three_grid.add(north_mark)
-		}
-	}
-	if (settings.large_box.value === true) {
-		var geometry_box = new THREE.EdgesGeometry(new THREE.BoxBufferGeometry(48, 48, 48));
-
-		var line_material = new THREE.LineBasicMaterial({color: gizmo_colors.grid});
-		var large_box = new THREE.LineSegments( geometry_box, line_material);
-		if (Format.centered_grid) {
-			large_box.position.set(0,8,0)
-		} else { 
-			large_box.position.set(8,8,8)
-		}
-		large_box.name = 'grid'
-		three_grid.add(large_box)
-	}
-	scene.add(three_grid)
-
-	Canvas.side_grids = {
-		x: side_grid,
-		z: side_grid.clone()
-	}
-	three_grid.add(Canvas.side_grids.x)
-	Canvas.side_grids.x.name = 'side_grid_x'
-	Canvas.side_grids.x.visible = !Modes.display;
-	Canvas.side_grids.x.rotation.z = Math.PI/2;
-	Canvas.side_grids.x.position.y = Format.centered_grid ? 8 : 0;
-	Canvas.side_grids.z.position.z = 0
-	Canvas.side_grids.x.children.forEach(el => {
-		el.layers.set(1)
-	});
-
-	three_grid.add(Canvas.side_grids.z)
-	Canvas.side_grids.z.name = 'side_grid_z'
-	Canvas.side_grids.z.visible = !Modes.display;
-	Canvas.side_grids.z.rotation.z = Math.PI/2;
-	Canvas.side_grids.z.rotation.y = Math.PI/2
-	Canvas.side_grids.z.position.y = Format.centered_grid ? 8 : 0;
-	Canvas.side_grids.z.position.z = 0
-	Canvas.side_grids.z.children.forEach(el => {
-		el.layers.set(3)
-	});
-}
 
 BARS.defineActions(function() {
 	new BarSelect('view_mode', {

js/preview/transformer.js

@@ -19,22 +19,22 @@
 	
 			this.setValues( parameters );
 	
-			this.oldColor = this.color.clone();
+			this.oldColor = this.color = parameters.color;
 			this.oldOpacity = this.opacity;
 	
 			this.highlight = function( highlighted ) {
 	
 				if ( highlighted ) {
 	
-					this.color.copy( gizmo_colors.outline );
+					this.color = gizmo_colors.gizmo_hover;
-					this.color.r *= 1.2;
+					//this.color.r *= 1.2;
-					this.color.g *= 1.2;
+					//this.color.g *= 1.2;
-					this.color.b *= 1.2;
+					//this.color.b *= 1.2;
 					this.opacity = 1;
 	
 				} else {
 	
-					this.color.copy( this.oldColor );
+					this.color = this.oldColor;
 					this.opacity = this.oldOpacity;
 	
 				}
@@ -54,22 +54,19 @@
 	
 			this.setValues( parameters );
 	
-			this.oldColor = this.color.clone();
+			this.oldColor = this.color = parameters.color;
 			this.oldOpacity = this.opacity;
 	
 			this.highlight = function( highlighted ) {
 	
 				if ( highlighted ) {
 	
-					this.color.copy( gizmo_colors.outline );
+					this.color = gizmo_colors.gizmo_hover;
-					this.color.r *= 1.2;
-					this.color.g *= 1.2;
-					this.color.b *= 1.2;
 					this.opacity = 1;
 	
 				} else {
 	
-					this.color.copy( this.oldColor );
+					this.color = this.oldColor;
 					this.opacity = this.oldOpacity;
 	
 				}
@@ -677,10 +674,10 @@
 				_gizmo.rotate.children[0].children[6].visible = !(Format && Format.rotation_limit && Modes.edit);
 
 				// Origin
-				let scale = scope.camera.preview.calculateControlScale(rot_origin.getWorldPosition(new THREE.Vector3())) * settings.origin_size.value * 0.2;
+				let scale = scope.camera.preview.calculateControlScale(Canvas.pivot_marker.getWorldPosition(new THREE.Vector3())) * settings.origin_size.value * 0.2;
-				rot_origin.scale.set( scale, scale, scale );
+				Canvas.pivot_marker.scale.set( scale, scale, scale );
-				if (rot_origin.base_scale) {
+				if (Canvas.pivot_marker.base_scale) {
-					rot_origin.scale.multiply(rot_origin.base_scale);
+					Canvas.pivot_marker.scale.multiply(Canvas.pivot_marker.base_scale);
 				}
 				
 				// Update Eye Position
@@ -970,7 +967,7 @@
 						var line = main_gizmo.children[(axisNumber*2 + (scope.direction?1:0)) * 2];
 						break;
 					case 'rotate':
-						var line = rot_origin;
+						var line = Canvas.pivot_marker;
 						break;
 				}
 				line.scale[axis] = long ? 20000 : 1;

lib/three_custom.js

@@ -185,9 +185,9 @@ THREE.AxesHelper = class AxesHelper extends THREE.LineSegments {
 
 		var c = gizmo_colors
 		var colors = [
-			c.r.r, c.r.g, c.r.b,	c.r.r, c.r.g, c.r.b, 
+			...c.r.toArray(),	...c.r.toArray(), 
-			c.g.r, c.g.g, c.g.b,	c.g.r, c.g.g, c.g.b, 
+			...c.g.toArray(),	...c.g.toArray(), 
-			c.b.r, c.b.g, c.b.b,	c.b.r, c.b.g, c.b.b,
+			...c.b.toArray(),	...c.b.toArray(),
 		]
 
 		var geometry = new THREE.BufferGeometry();
@@ -197,9 +197,17 @@ THREE.AxesHelper = class AxesHelper extends THREE.LineSegments {
 		var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
 
 		super(geometry, material);
+	}
+	updateColors() {
+		var colors = [
+			...gizmo_colors.r.toArray(), ...gizmo_colors.r.toArray(), 
+			...gizmo_colors.g.toArray(), ...gizmo_colors.g.toArray(), 
+			...gizmo_colors.b.toArray(), ...gizmo_colors.b.toArray(),
+		]
+		console.log(this)
 
-		//THREE.LineSegments.call( this, geometry, material );
+		this.geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
-
+		this.geometry.attri
 	}
 }
 
@@ -208,38 +216,25 @@ THREE.AxesHelper.prototype.constructor = THREE.AxesHelper;
 
 THREE.GridHelper = class GridHelper extends THREE.LineSegments {
 
-	constructor( size, divisions, color1, color2 ) {
+	constructor( size, divisions, material ) {
 
 		size = size || 10;
 		divisions = divisions || 10;
-		color1 = new THREE.Color( color1 !== undefined ? color1 : 0x444444 );
-		color2 = new THREE.Color( color2 !== undefined ? color2 : 0x888888 );
 
-		const center = divisions / 2;
 		const step = size / divisions;
 		const halfSize = size / 2;
 
-		const vertices = [], colors = [];
+		const vertices = [];
 
 		for ( let i = 0, j = 0, k = - halfSize; i <= divisions; i ++, k += step ) {
 
 			vertices.push( - halfSize, 0, k, halfSize, 0, k );
 			vertices.push( k, 0, - halfSize, k, 0, halfSize );
 
-			const color = i === center ? color1 : color2;
-
-			color.toArray( colors, j ); j += 3;
-			color.toArray( colors, j ); j += 3;
-			color.toArray( colors, j ); j += 3;
-			color.toArray( colors, j ); j += 3;
-
 		}
 
 		var geometry = new THREE.BufferGeometry();
 		geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
-		geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
-
-		const material = new THREE.LineBasicMaterial( { color: color1, toneMapped: false } );
 
 		super( geometry, material );