How mix colors in Mesh basic material?

Questions
, ,
1

I created a sphere with mesh basic material and I was able to add only one color. I wanted to know how to mix two colors for mesh basic material!

2

Hi!
Any pictures of current and desired results?

1 Like
3

I don’t have desired picture! I’ll share the current one! in general how do you mix colors for mesh basic material? I want to give another color which will mix with it

4

blob-1

5

Do you mean something like this?

From the Collection of examples from discourse.threejs.org

BoxFaceColors
ChangeColorOfFaceByClick

1 Like
6

yes like that!! is it possible to blend??

7

What do you mean with “blend”?
Transition from one color to another for the whole object?
Or the object has to be painted in the manner, that color, for example, of the top part of the object smoothly goes into another color of the bottom part?

1 Like
8

blend in the sense mixture of two colors for example combination of red and yellow where it is not completely mixed however red will take some part and yellow will take some part

9

Then a shader material is probably better suited.
ShaderExamples_07

or


<!DOCTYPE html>
<!--  -->
<head>
  <title> ShaderExamples_01 </title>
  <meta charset="utf-8" />
  <style>
    body {
        overflow:hidden;
        margin: 0;
    }
  </style>
</head>

<body> </body>

<script type="module">

// @author hofk

import * as THREE from '../jsm/three.module.135.js';
import {OrbitControls} from '../jsm/OrbitControls.135.js';

const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 1000 );
camera.position.set( 0, 0, 7 );

const scene = new THREE.Scene();

const circleGeometry = new THREE.CircleBufferGeometry( 6, 64 );
const circleMesh = new THREE.Mesh( circleGeometry, new THREE.MeshBasicMaterial( {color: 0xff0000 } ) );
circleMesh.position.z = -4.0;
scene.add( circleMesh );

const shaderMaterial = new THREE.ShaderMaterial({
    uniforms: { 
            v_Uv: { value: new THREE.Vector2( ) }
    },
    vertexShader: vertexShader( ), 
    fragmentShader: fragmentShader( ),
    side: THREE.DoubleSide,
    transparent: true,
});
 
const planeGeometry = new THREE.PlaneBufferGeometry( 5, 5 );
const planeMesh = new THREE.Mesh( planeGeometry, shaderMaterial );
scene.add( planeMesh );

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xfefefe );
document.body.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );

animate();

function animate() {

    requestAnimationFrame( animate );   
    renderer.render( scene, camera );

}

function vertexShader ( ) { //   return `    `;   a multiline template literal 
    return `
        varying vec2 v_Uv;
        
		void main( ) {

				v_Uv = uv;
				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
				gl_Position = projectionMatrix * mvPosition;
            
		} 
    `;
}

function fragmentShader( ) {
    return `
        varying vec2 v_Uv;
        
        void main( ) {
            
            vec2 position = v_Uv;
            
            vec3 color = vec3( position.x, position );
            
            gl_FragColor = vec4( color, position.y ); // color, transparency
            
         // gl_FragColor = vec4( position.x, position.x, position.y, position.y ); // is identical
            
        }
    `;
}

</script>
</html>
1 Like
10

Looks like we’re coming to the point, where the training of telepathic ability begins.
As you don’t want or can’t or are unable to providea a reference picture of the desired result, this is my last attempt to choose what you want: three.js - How to Create a Multi-Colored Noise Shader - Stack Overflow

1 Like
11

Really appreciate for helping me out thank you. I have made rough sketch of the desired one I was hoping something similar by using mesh basic material rather than shader material.
blob-2

12

Thanks mate!