请给出three.js局部辉光的代码案例
时间: 2023-09-28 21:09:51 浏览: 81
threejs 局部泛光、局部发光使用
下面是一个简单的three.js局部辉光的代码案例:
```javascript
// 创建场景、相机和渲染器
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加一个立方体到场景中
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0xffffff });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 创建一个发光材质
var glowMaterial = new THREE.ShaderMaterial({
uniforms: {
"c": { type: "f", value: 1.0 },
"p": { type: "f", value: 1.4 },
glowColor: { type: "c", value: new THREE.Color(0xffffff) },
viewVector: { type: "v3", value: camera.position }
},
vertexShader: `
uniform vec3 viewVector;
uniform float c;
uniform float p;
varying float intensity;
void main() {
vec3 vNormal = normalize(normalMatrix * normal);
vec3 vNormel = normalize(normalMatrix * viewVector);
intensity = pow(c - dot(vNormal, vNormel), p);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform vec3 glowColor;
varying float intensity;
void main() {
vec3 glow = glowColor * intensity;
gl_FragColor = vec4(glow, 1.0);
}
`,
side: THREE.FrontSide,
blending: THREE.AdditiveBlending,
transparent: true
});
// 创建一个发光的立方体
var glowCube = new THREE.Mesh(geometry, glowMaterial.clone());
glowCube.position.copy(cube.position);
glowCube.scale.multiplyScalar(1.2);
scene.add(glowCube);
// 渲染场景
function render() {
requestAnimationFrame(render);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
glowMaterial.uniforms.viewVector.value = new THREE.Vector3().subVectors(camera.position, glowCube.position);
renderer.render(scene, camera);
}
render();
```
在这个案例中,我们首先创建了一个场景、相机和渲染器,并添加了一个普通的立方体到场景中。然后,我们创建了一个发光材质,其中包含了顶点着色器和片段着色器。顶点着色器计算了每个顶点的光照强度,而片段着色器根据这个强度计算出发光的颜色。接着,我们创建了一个发光的立方体,它使用了这个发光材质,并且放置在普通立方体的上方,稍微比它大一些。最后,我们在渲染循环中更新了光照强度和发光材质的视图向量,以便它能够跟随相机的位置。
运行这个案例,你将会看到一个普通的立方体和它上方的发光立方体。发光立方体已经被设置为只在正面渲染,并且使用了加法混合模式,这使得它看起来更加亮眼。随着相机的移动,发光立方体的颜色也会发生变化,这是因为它的发光效果是基于相机位置计算的。
阅读全文