个人中心
gpt4 book ai didi

javascript - 网格面朝向平面的颜色不同

转载 作者：行者123 更新时间：2023-12-01 00:52:13 24 4
gpt4 key购买 nike

我需要给朝向平面的脸着色。

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

  • 将光源放置在平面下方(平面只有一侧)，以便物体的下侧获得浅色。但据我所知，我只能限制点光源中的光线，但我的平面是矩形的。矩形区域光看起来不错，但不适用于我的 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/

24 4 0
文章推荐： php - 更新 MySQL 字段时更改的日期
文章推荐： python - 使用 2 个 SQS 订阅(每个订阅都有一个 lambda 触发器)向 SNS 主题发送消息会导致空队列
文章推荐： python - 使用生成器生成排列
文章推荐： python - 连接 pandas 数据帧的逆行选择
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com