Superimposing of color


I want to paint cubes red color by means of a mouse. But thus the green cube (at the left) becomes not red, but black. The white cube (on the right) is colored normally. What to do? example <a href="http://neftek.legko.ufanet.ru/MyWebGL/_click/" rel="nofollow">here</a>

// init var material = new THREE.MeshLambertMaterial({ color: 0x00ff00, side: THREE.DoubleSide, vertexColors: THREE.FaceColors }); var geometry = new THREE.BoxGeometry(100, 100, 100, 4, 4, 4); var Cube = new THREE.Mesh(geometry, material); Cube.position.x = -100; scene.add(Cube); objects.push(Cube); var material = new THREE.MeshLambertMaterial({ color: 0xffffff, side: THREE.DoubleSide, vertexColors: THREE.FaceColors }); var geometry = new THREE.BoxGeometry(100, 100, 100, 4, 4, 4); var Cube = new THREE.Mesh(geometry, material); Cube.position.x = 100; scene.add(Cube); objects.push(Cube); document.addEventListener('mousedown', onDocumentMouseDown, false); // function onDocumentMouseDown(event) { var vector = new THREE.Vector3( (event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5); vector.unproject(camera); raycaster.set(camera.position, vector.sub(camera.position).normalize()); var intersects = raycaster.intersectObjects(objects); if (intersects.length > 0) { var index = intersects[0].faceIndex; // change the color of the closest face. intersects[0].face.color = color; intersects[0].object.geometry.colorsNeedUpdate = true; } }

<img alt="scrin" class="b-lazy" data-src="https://i.stack.imgur.com/ulANp.png" data-original="https://i.stack.imgur.com/ulANp.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />


In your example, the final color is the component-wise product of the material color ( 0x00ff00 ) and the face color ( 0xff0000 ), which results in black ( 0x000000 ).

For that reason, when you have face colors, it is a good idea to set the material color to white.

three.js r.69


I suspect your lighting model is the cause of this. If you try painting the dark sides of the white cube, you will also see black faces. There is a large difference between white ffffff and green 00ff00. Your white cube even appears blue due to the hemi light.

Try using a point light instead of your hemi light and see if it makes a difference.


  • Customizing shadow color
  • Am I right to read a nested lua table as argument from C function?
  • Generate stl mesh from csv
  • QML apply a texture to a Mesh
  • Firefox: mouseover doesn't work while mouse button is pressed
  • Camera-Offset | Project Tango
  • Binding color property from xaml to c#
  • Example from three.js but how to implement using SceneKit?
  • How to store Hex string in an Integer variable in android???
  • Securely encrypt integers (up to 2^48) into the shortest possible URL-safe string
  • Render face of cube map to a quad
  • Is Lambda code repeated with dynamically created controls?
  • Moved coordinates of the scene when DOM element with renderer is not at the top of the screen
  • display a overlay when input is clicked in react
  • avoid automatic jump to bottom on page with iframe video
  • Shadows for Instantiated Game Object bug?
  • Find unique tuples in a relation represented by a BDD
  • How to control Trigger state (Pause, Play) using code (not just buttons)
  • Can a variable be stored within an image or div tag?
  • button in popup.html not working
  • Is there any way to call saveCurrentTurnWithMatchData without sending a push notification?
  • Angular Bootstrap Carousel Slide Transition not working correctly
  • Silverlight DependencyProperty.SetCurrentValue Equivalent
  • Date Conversion from yyyy-mm-dd to dd-mm-yyyy
  • Debug.DrawLine not showing in the GameView
  • Blackberry - Custom EditField Cursor
  • How do I get HTML corresponding to current DOM tree?
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Body moving without any force applied? (Box2d)
  • CSS Linear-gradient formatting issue accross different browsers
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Change an a tag attribute in JavaScript based on screen width
  • JTable with a ScrollPane misbehaving
  • Angular 2 constructor injection vs direct access
  • Java static initializers and reflection
  • Android Google Maps API OnLocationChanged only called once
  • UserPrincipal.Current returns apppool on IIS
  • Python/Django TangoWithDjango Models and Databases
  • How to push additional view controllers onto NavigationController but keep the TabBar?