Home

Index

How to use the Color function from three

Find comprehensive JavaScript three.Color code examples handpicked from public code repositorys.

three.Color is a class in the Three.js library that represents a color and its associated methods.

jupyter-ros.js

83
84
85
86
87
88
89
90
91
initialize: function(args) {
    OccupancyGridView.__super__.initialize.apply(this, arguments);
    this.viewer = this.options.viewer;
},
render: function() {
    this.three_color = new THREE.Color(this.model.get('color'));
    this.rgb_color = {r: this.three_color.r * 255, 
                      g: this.three_color.g * 255,
                      b: this.three_color.b * 255};

105

531

+ 39 other calls in file

3DTilesDebugWindow.js

GitHub: VCityTeam/UD-Viz

206
207
208
209
210
211
212
213
214
215
try {
  const tileId = Number.parseInt(this.groupColorTileInputElement.value);
  const batchIds = JSON.parse(
    '[' + this.groupColorBatchInputElement.value + ']'
  );
  const color = new THREE.Color(this.groupColorColorInputElement.value);
  const opacity = Number.parseFloat(
    this.groupColorOpacityInputElement.value
  );
  this.layerManager.tilesManagers[0].setStyle(

+ 9 other calls in file

How does three.Color work?

three.Color is a class in the Three.js library that allows for the creation and manipulation of colors in 3D space. It provides a variety of methods for setting and getting the color values, as well as manipulating them based on various color models.

To create a new three.Color object, you can call the constructor with three parameters: the red, green, and blue values, each ranging from 0 to 1. The class also provides several static properties for predefined colors, such as three.Color.RED, three.Color.BLUE, etc.

Once created, you can manipulate the color values using various methods, such as set(), setHex(), setHSL(), lerp(), and more. Additionally, there are methods for getting the color values in various formats, such as getHex(), getHexString(), getStyle(), etc.

Overall, three.Color provides a simple and powerful way to work with colors in Three.js, allowing for easy manipulation and conversion between various color models.

interactive_test.js

GitHub: shrekshao/Polyhedron3D

71
72
73
74
75
76
77
78
79
        bottom: 0,
        width: 0.5,
        height: 1.0
    },

    // background: new THREE.Color().setRGB( 0.5, 0.5, 0.7 )
    background: new THREE.Color().setRGB( 0.9, 0.9, 0.9 )
    // background: new THREE.Color().setRGB( 1, 1, 1 )
},

+ 23 other calls in file

App.js

GitHub: shrekshao/Polyhedron3D

72
73
74
75
76
77
78
79
80
81
        height: 1.0
    },

    // background: new THREE.Color().setRGB( 0.5, 0.5, 0.7 )
    background: new THREE.Color().setRGB( 0.9, 0.9, 0.9 )
    // background: new THREE.Color().setRGB( 1, 1, 1 )
},

{
    left: 0.5,

+ 23 other calls in file

Ai Example

1
2
3
4
import * as THREE from "three";

const redColor = new THREE.Color("red");
const material = new THREE.MeshBasicMaterial({ color: redColor });

In this example, a new Color object is created with the value 'red' and assigned to the redColor variable. This color is then used to create a MeshBasicMaterial with a red color for a mesh in the scene.

LinesMesh.js

GitHub: zziyifan/Medical-AI-learning-1

33
34
35
36
37
38
39
40
41
42
    transparent: config.opacity !== 1.0,
});
const radialSegments = config.radial_segments;
const {width} = config;
let verticesColors = (config.colors && config.colors.data) || [];
const color = new THREE.Color(config.color);
const colorRange = config.color_range;
const colorMap = (config.color_map && config.color_map.data) || null;
const attribute = (config.attribute && config.attribute.data) || [];
const modelMatrix = new THREE.Matrix4();

+ 9 other calls in file

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

2014
2015
2016
2017
2018
2019
2020
2021
2022
2023

materialType = THREE.MeshStandardMaterial;

var metallicRoughness = materialDef.pbrMetallicRoughness || {};

materialParams.color = new THREE.Color(1.0, 1.0, 1.0);
materialParams.opacity = 1.0;

if (Array.isArray(metallicRoughness.baseColorFactor)) {
  var array = metallicRoughness.baseColorFactor;

+ 119 other calls in file

t.js

GitHub: 52black/scratch-vm

430
431
432
433
434
435
436
437
438
439
	break;

case 'ks':

	// Specular color (color when light is reflected from shiny surface) using RGB values
	params.specular = new THREE.Color().fromArray( value );

	break;

case 'map_kd':

+ 37 other calls in file

glyphset.js

GitHub: alan-wu/ZincJS

30
31
32
33
34
35
36
37
38
39
let morphColours = false;
let morphVertices = false;
this.isGlyphset = true;
let _transformMatrix = new THREE.Matrix4();
const _bot_colour = new THREE.Color();
const _top_colour = new THREE.Color();
const _boundingBox1 = new THREE.Box3();
const _boundingBox2 = new THREE.Box3();
const _boundingBox3 = new THREE.Box3();
const _points = [];

+ 19 other calls in file

textureArray.js

GitHub: alan-wu/ZincJS

63
64
65
66
67
68
69
70
71
72
      material.glslVersion = options.glslVersion;
    }
  }
} else {
  material = new THREE.MeshBasicMaterial({
    color : new THREE.Color(1, 1, 1),
    transparent : false,
    opacity : 1.0,
    map : this.impl,
    side : THREE.DoubleSide

+ 7 other calls in file

JSONLoader.js

GitHub: alan-wu/ZincJS

2
3
4
5
6
7
8
9
10
11
var Loader = require('../three/Loader').Loader;
var LoaderUtils = THREE.LoaderUtils;
var AnimationClip = THREE.AnimationClip;
var Vector3 = THREE.Vector3;
var Vector4 = THREE.Vector4;
var Color = THREE.Color;
var Vector2 = THREE.Vector2;
var Face3 = require('../three/Geometry').Face3;
var Geometry = require('../three/Geometry').Geometry;
var FileLoader = THREE.FileLoader;

+ 47 other calls in file

THREE.MeshLine.js

GitHub: szu-advtech/AdvTech

371
372
373
374
375
376
377
378
379
380
this.lineWidth = check( parameters.lineWidth, 1 );
this.map = check( parameters.map, null );
this.useMap = check( parameters.useMap, 0 );
this.alphaMap = check( parameters.alphaMap, null );
this.useAlphaMap = check( parameters.useAlphaMap, 0 );
this.color = check( parameters.color, new THREE.Color( 0xffffff ) );
this.opacity = check( parameters.opacity, 1 );
this.resolution = check( parameters.resolution, new THREE.Vector2( 1, 1 ) );
this.sizeAttenuation = check( parameters.sizeAttenuation, 1 );
this.near = check( parameters.near, 1 );

398

+ 3 other calls in file

CanvasRenderer.js

GitHub: jupyter-widgets/pythreejs

104
105
106
107
108
109
110
111
112
113

_clipBox = new THREE.Box2(),
_clearBox = new THREE.Box2(),
_elemBox = new THREE.Box2(),

_ambientLight = new THREE.Color(),
_directionalLights = new THREE.Color(),
_pointLights = new THREE.Color(),

_vector3 = new THREE.Vector3(), // Needed for PointLight

185

866

+ 129 other calls in file

Projector.js

GitHub: jupyter-widgets/pythreejs

64
65
66
67
68
69
70
71
72
this.id = 0;

this.v1 = new RenderableVertex();
this.v2 = new RenderableVertex();

this.vertexColors = [ new THREE.Color(), new THREE.Color() ];
this.material = null;

this.z = 0;

185

866

+ 21 other calls in file

block.js

GitHub: whos-evan/kazwire

60
61
62
63
64
65
66
67
68
69
}

this.colorOffset = Math.round(Math.random() * 100);

// set color
this.color = new THREE.Color(color === null ? Math.random() * 0xffffff : color);

// set direction
let speed = blockConfig.initSpeed + blockConfig.acceleration;
speed = Math.min(speed, blockConfig.maxSpeed);

147

Scene.js

GitHub: K3D-tools/K3D-jupyter

187
188
189
190
191
192
193
194
195
196
const unitVectors = {
    x: new THREE.Vector3(1.0, 0.0, 0.0),
    y: new THREE.Vector3(0.0, 1.0, 0.0),
    z: new THREE.Vector3(0.0, 0.0, 1.0),
};
const gridColor = new THREE.Color(K3D.parameters.gridColor);
const labelColor = new THREE.Color(K3D.parameters.labelColor);

// axes Helper
updateAxesHelper = !K3D.parameters.axesHelper || (K3D.parameters.axesHelper && !axesHelper.x);

116

804

+ 3 other calls in file

THREEUtil.js

GitHub: VCityTeam/UD-Viz

51
52
53
54
55
56
57
58
59
60
camera.fov = config.cameraFov;

// Init renderer
this.initRenderer(
  renderer,
  new THREE.Color(
    configToApply.sky.color.r,
    configToApply.sky.color.g,
    configToApply.sky.color.b
  )

+ 4 other calls in file

scenes.js

GitHub: gracexu94/FinalProject

143
144
145
146
147
148
149
150
151
152
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(5, 5, 5);
camera.lookAt(new THREE.Vector3(0,0,0));

var scene = new THREE.Scene();
scene.background = new THREE.Color( 'whitesmoke' );
scene.add(new THREE.AmbientLight(0x333333));

var controls = new OrbitControls(camera, framework.renderer.domElement);
controls.enableDamping = true;

+ 11 other calls in file

denseview.js

GitHub: audunsh/evince

162
163
164
165
166
167
168
169
170



let mesh = new THREE.Mesh( geometry, material );
mesh.needsUpdate = true;
//mesh.color = new THREE.Color(0.7,0.7,0.98);
//mesh.color = new THREE.Color(70,70,98);

this.scene.add(mesh);

+ 8 other calls in file

morpheusview.js

GitHub: audunsh/evince

129
130
131
132
133
134
135
136
137
let material = new THREE.MeshPhysicalMaterial({  
    roughness: 0.7,   
    transmission: 0.5,  
    thickness: 1
});
material.color = new THREE.Color(0.7,0.7,0.98);

spotlightview_old.js

GitHub: audunsh/evince

3300
3301
3302
3303
3304
3305
3306
3307
3308
3309
for (let i = 0; i < this.pos.length; i++) {
    // aCurve.push(this.pos[i][0], this.pos[i][1], this.pos[i][2]);
    //aColor.push(.3 + .001*this.colors[i][0], .3+ .001*this.colors[i][1], .3+ .001*this.colors[i][2]);
    //aColor.push(this.colors[i][0], this.colors[i][1], this.colors[i][2]);
    
    //let mcolor = new THREE.Color(this.colors[i][0],  this.colors[i][1],  this.colors[i][2]);
    let baseGeometry = new THREE.SphereBufferGeometry(this.radius[i], 20, 10);
    let material = new THREE.MeshStandardMaterial( );
    material.color = new THREE.Color(this.colors[i][0],  this.colors[i][1],  this.colors[i][2]);
    material.roughness = 0.2;

+ 118 other calls in file

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About