我需要给朝向平面的脸着色。
我想到了两种不同的方法:
将光源放置在平面下方(平面只有一侧)，以便物体的下侧获得浅色。但据我所知，我只能限制点光源中的光线，但我的平面是矩形的。矩形区域光看起来不错，但不适用于我的 Material 。另外，我希望我的光只影响某些对象，而不是每个对象。
每次更新时计算每个对象的面法线，根据平面法线检查它们；如果这是我想要的，使用顶点/面颜色为它们着色。我还需要将其他所有颜色都绘制为默认颜色。但在我看来，这对 CPU 来说太重了。
还有什么更好的办法吗？
最佳答案
正如 @Mugen87 所指出的，实现这一目标的最简单方法是使用自定义着色器。
这是一个广泛的话题，可能需要一些时间来适应。但是有很多令人难以置信的资源可以深入解释这个主题。 The Book of Shaders是一个很好的起点。
<小时/>通过计算dot product在表面法线和逆 View 方向之间，您可以获得有关某个表面“面向”相机的程度的信息。
使用这些信息我们可以mix两种颜色，并将其用作屏幕上显示的最终颜色。
<html>
<head>
<title> view-based color </title>
<style>
body { margin: 0; position: fixed;}
canvas { width: 100%; height: 100%; display: block;}
</style>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<script>
var shader_vert = `
varying vec3 vNormal;
void main() {
vNormal = normalize( modelMatrix * vec4( normal, 1.0 ) ).xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`;
var shader_frag = `
uniform vec3 viewDirection;
varying vec3 vNormal;
void main() {
vec3 red = vec3( 1.0, 0.0, 0.0 );
vec3 pink = vec3( 1.0, 0.8, 0.8 );
float q = clamp( dot( vNormal, -viewDirection ), 0.0, 1.0 );
vec3 color = mix( red, pink, q );
gl_FragColor = vec4( color, 1.0 );
}
`;
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 2, 5 );
camera.lookAt( new THREE.Vector3() );
// plane
var geometry = new THREE.BoxBufferGeometry( 2, 2, 2 );
// custom shader
var material = new THREE.ShaderMaterial( {
uniforms: {
viewDirection: { value: new THREE.Vector3() }
},
vertexShader: shader_vert,
fragmentShader: shader_frag,
} );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );
window.addEventListener( 'resize', onResize );
function animate() {
requestAnimationFrame( animate );
plane.rotation.y += 0.01;
plane.rotation.x += 0.01;
camera.getWorldDirection( material.uniforms.viewDirection.value );
renderer.render( scene, camera );
};
function onResize() {
var w = window.innerWidth;
var h = window.innerHeight;
camera.aspect = w / h;
camera.updateProjectionMatrix();
renderer.setSize( w, h );
}
animate();
</script>
</body>
</html>关于javascript - 网格面朝向平面的颜色不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56884476/