mirror/blockbench
2
0
Fork 0
mirror of https://github.com/JannisX11/blockbench.git synced 2025-01-18 15:26:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

Make 3D scene colors customizable by CSS

Browse Source
This commit is contained in:
JannisX11 2022-02-12 00:06:31 +01:00
parent 1f153d3b24
commit db63aa6de5
9 changed files with 236 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/window.css
View File

@ -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;

4
js/display_mode.js
View File

@ -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()
}

2
js/interface/settings.js
View File

@ -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')) {

41
js/interface/themes.js
View File

@ -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);
var c_outline = parseInt('0x'+CustomTheme.data.colors.accent.replace('#', ''))
if (c_outline !== gizmo_colors.outline.getHex()) {
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;
}
})
let preview_style = window.getComputedStyle(document.getElementById('preview'));
function update(three_color, variable) {
let string = preview_style.getPropertyValue(variable).trim();
three_color.set(string);
}
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;

2
js/io/format.js
View File

@ -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;

181
js/preview/canvas.js
View File

@ -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)
rot_origin.add(helper2)
Canvas.pivot_marker.add(helper1)
Canvas.pivot_marker.add(helper2)
rot_origin.rotation.reorder('ZYX')
rot_origin.base_scale = new THREE.Vector3(1, 1, 1);
rot_origin.no_export = true;
Canvas.pivot_marker.rotation.reorder('ZYX')
Canvas.pivot_marker.base_scale = new THREE.Vector3(1, 1, 1);
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) {
rot_origin.parent.remove(rot_origin)
if (Canvas.pivot_marker.parent) {
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({

166
js/preview/preview.js
View File

@ -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),
g: new THREE.Color(0x26ec45),
b: new THREE.Color(0x2d5ee8),
grid: new THREE.Color(0x495061),
wire: new THREE.Color(0x576f82),
solid: new THREE.Color(0xc1c1c1),
outline: new THREE.Color(0x3e90ff)
r: new THREE.Color(),
g: new THREE.Color(),
b: new THREE.Color(),
grid: new THREE.Color(),
solid: new THREE.Color(),
outline: new THREE.Color(),
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', {

31
js/preview/transformer.js
View File

@ -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.r *= 1.2;
this.color.g *= 1.2;
this.color.b *= 1.2;
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;
}
@ -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.r *= 1.2;
this.color.g *= 1.2;
this.color.b *= 1.2;
this.color = gizmo_colors.gizmo_hover;
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;
rot_origin.scale.set( scale, scale, scale );
if (rot_origin.base_scale) {
rot_origin.scale.multiply(rot_origin.base_scale);
let scale = scope.camera.preview.calculateControlScale(Canvas.pivot_marker.getWorldPosition(new THREE.Vector3())) * settings.origin_size.value * 0.2;
Canvas.pivot_marker.scale.set( scale, scale, scale );
if (Canvas.pivot_marker.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;

35
lib/three_custom.js
View File

@ -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.g.r, c.g.g, c.g.b, c.g.r, c.g.g, c.g.b,
c.b.r, c.b.g, c.b.b, c.b.r, c.b.g, c.b.b,
...c.r.toArray(), ...c.r.toArray(),
...c.g.toArray(), ...c.g.toArray(),
...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 );