时间戳

首页 > 解决方案 > THREE.js 在一个由深度控制的网格上混合两种材质

javascript - THREE.js 在一个由深度控制的网格上混合两种材质

问题描述

我想要两个材料。

mat1 =红色；mat2 =蓝色；

应用于名为“mesh1”的单个网格。相机和网格之间的距离为“1”。

如果mesh1 离相机很近（0.1 - 0.4）mesh1 是红色的。如果 mesh1 远离相机 (0.6 - 1)，则 mesh1 为蓝色。在过渡期间（0,41-0,59），深度控制过渡期间对象的颜色将从红色渐变到蓝色。

标签： javascriptthree.js

解决方案

这种效果不需要两种材料。相反，您可以根据相机和网格之间的距离调整材质的颜色。看看这段代码：

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>

推荐阅读