ТРИ. js смешивание двух материалов на одном sh контролируется глубиной - PullRequest
Новая
       34

ТРИ. js смешивание двух материалов на одном sh контролируется глубиной

0 голосов
/ 05 августа 2020

Я хотел иметь два материала.

mat1 = красный цвет; mat2 = color blue;

Применить к одному объекту me sh под названием "mesh1". Расстояние между камерой и мной sh равно "1".

Если сетка 1 находится близко от камеры (0,1 - 0,4), сетка 1 красная. Если сетка 1 находится далеко от камеры (0,6 - 1), сетка 1 синего цвета. Во время перехода (0,41-0,59) управления глубиной перехода цвет объекта будет градиентом от красного к синему.

1 Ответ

1 голос
/ 05 августа 2020

Для такого эффекта вам не нужны два материала. Вместо этого вы можете модулировать цвет материала в зависимости от расстояния между камерой и мной sh. Посмотрите этот код: 

var camera, scene, renderer;
var mesh;

var speed = 0.0005;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    var geometry = new THREE.BoxGeometry( 0.1, 0.1, 0.1 );
    var material = new THREE.MeshBasicMaterial();

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

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

}

function animate() {

    requestAnimationFrame( animate );

    mesh.position.z = Math.sin( performance.now() * speed );
        
    var d = mesh.position.distanceTo( camera.position );
        
    if ( d < 0.4 ) {
        
        mesh.material.color.set( 0xff0000 );
        
    } else if ( d > 0.6 ) {
        
        mesh.material.color.set( 0x0000ff );
        
    } else {
        
        var s = d - 0.4;
        var b = s / 0.2;
        var r = 1 - b;
            
        mesh.material.color.setRGB( r, 0, b );
        
    }

    renderer.render( scene, camera );

}
body {
      margin: 0;
}
canvas {
    display: block;
}
<script src="https://cdn.jsdelivr.net/npm/three@0.119.1/build/three.js"></script>
...