Seonghak Lee
CG Tutorial

Repository

AddEquation : Blend(Source, Destination) = (Source * 상수1) + (Destination * 상수2)
SubtractEquation : Blend(Source, Destination) = (Source * 상수1) - (Destination * 상수2)
ReverseSubtractEquation : Blend(Source, Destination) = (Destination * 상수2) - (Source * 상수1)
MinEquation : Blend(Source, Destination) = Min((Source * 상수1), (Destination * 상수2))
MaxEquation : Blend(Source, Destination) = Max((Source * 상수1), (Destination * 상수2))
Zero : 0
One : 1
SrcColor : Source의 Color값
OneMinusSrcColor : 1-(Source의 Color값)
SrcAlpha : Source의 Alpha값
OneMinusSrcAlpha : 1-(Source의 Alpha값)
DstAlpha : Destination의 Alpha값
OneMinusDstAlpha : 1-(Destination의 Alpha값)
SrcColor : Source의 Color값
OneMinusDstColor : 1-(Destination의 Color값)
Blend(Source, Destination) = (Source * Srcalpha) + (Destination * OneMinusSrcAlpha)
Blend(Source, Destination) = (Source * One) + (Destination * One)
Blend(Source, Destination) = (Source * Zero) + (Destination * SrcColor)

    const camera = new THREE.OrthographicCamera( -100, 100, 100, -100, 1, 1000 );
    camera.position.z = 100;
    camera.lookAt(1,0,0);

    const scene = new THREE.Scene();
    scene.background=new THREE.Color(0x777777);
    const renderer = new THREE.WebGLRenderer({canvas});

    const light = new THREE.AmbientLight( 0x505050 );
    const pointLight = new THREE.PointLight(0xffffff, 1.0, 1000, 1);
    pointLight.position.set (-100,200,150);
    scene.add(light , pointLight);

    const geometry = new THREE.SphereGeometry(30, 20, 20);
    const material1 = new THREE.MeshPhongMaterial( {
	    color: colorarr[0], shininess : 90.0 });
    const material2 = new THREE.MeshPhongMaterial( {
	    color: colorarr[1], shininess : 90.0 });
    const material3 = new THREE.MeshPhongMaterial( {
	    color: colorarr[2], shininess : 90.0 });
    const sphere1 = new THREE.Mesh( geometry, material1 );
    const sphere2 = new THREE.Mesh( geometry, material2 );
    const sphere3 = new THREE.Mesh( geometry, material3 );

    var rot = 0.0;
    var rad=18;
    const animate = function () {
	    requestAnimationFrame( animate );
	    if(rotate==true)
	    {
	        rot += 0.025;
	    }
	    sphere1.position.x = (Math.cos(rot+(-90 * Math.PI/180))*rad);
        sphere1.position.y = rad+(Math.sin(rot+(-90 * Math.PI/180))*rad);
        sphere2.position.x = rad*Math.cos(210 * Math.PI/180)+(Math.cos(rot+(30 * Math.PI/180))*rad);
        sphere2.position.y = rad*Math.sin(210 * Math.PI/180)+(Math.sin(rot+(30 * Math.PI/180))*rad);
        sphere3.position.x = rad*Math.cos(-30 * Math.PI/180)+(Math.cos(rot+(150 * Math.PI/180))*rad);
        sphere3.position.y = rad*Math.sin(-30 * Math.PI/180)+(Math.sin(rot+(150 * Math.PI/180))*rad);

	    renderer.render( scene, camera );
    };

	sphere1.material.blending = THREE.CustomBlending;
	sphere2.material.blending = THREE.CustomBlending;
	sphere3.material.blending = THREE.CustomBlending;

	sphere1.material.transparent = true;
	sphere2.material.transparent = true;
	sphere3.material.transparent = true;