Question

我需要给面朝飞机的脸上色。

我想到了两种不同的方法：

将光源放置在平面下方（平面仅一侧），这样对象的下侧将变为浅色。但是AFAIK我只能在PointLight中限制光，但是我的平面是矩形的。 RectArea光源看起来不错，但不适用于我的材料。我也希望我的灯光只影响某些对象，而不是每个对象。
在每次更新时为每个对象计算面法线，并对照平面法线进行检查；如果它是我想要使用顶点/面颜色对其进行着色的颜色。另外，我还需要将其他颜色绘制为默认颜色。但是在我看来，这似乎占用了大量CPU资源。

还有更好的方法吗？

Answer 1

@ 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>

网格面上朝向平面的不同颜色

1 个答案: