我需要为朝向飞机的脸着色。
我想到了两种不同的方法：
将光源放置在平面下方（平面只有一侧），以便对象的下方获得浅色。但是据我所知，我只能限制 PointLight 中的光线，但我的平面是矩形的。 RectArea 灯看起来不错，但不适用于我的材质。另外我希望我的光只影响一些物体，而不是每个物体。
在每次更新时计算每个对象的面法线，对照平面法线检查它们；如果它是我想要使用顶点/面颜色为它们着色的。我还需要将其他颜色涂成默认颜色。但这在我看来 CPU 太重了。
有没有更好的办法？
【问题讨论】：
标签： javascript three.js
正如@Mugen87 所指出的，实现这一目标的最简单方法是使用自定义着色器。
这是一个广泛的话题，可能需要一些时间来适应。但是那里有令人难以置信的资源来深入解释这个话题。 The Book of Shaders 是一个很好的起点。
通过计算表面法线和反视图方向之间的dot product，您可以获得有关某个表面“面向”相机的程度的信息。
使用此信息，我们可以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>【讨论】：
modelMatrix 预乘到法线向量，以考虑对象平移/旋转。如果答案有效，别忘了标记为正确；）干杯。
vNormal = normalize((modelMatrix * vec4 (normal, 0.0)).xyz); 我确实以这种方式计算法线，现在它可以工作了。感谢您的帮助。