|
|
threejs实现渐变色矩形
317浏览 · 2023-07-25 17:17:34
要使用Three.js实现渐变色矩形，你需要使用Three.js的渐变色材质（GradientShader）和平面几何体（PlaneGeometry）。
首先，创建一个平面几何体，并设置其大小和位置。然后，使用渐变色材质来创建一个材质对象，并将其应用于平面几何体。最后，将平面几何体添加到场景中即可。
以下是示例代码：
```javascript
// 创建场景、相机和渲染器
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建平面几何体
var geometry = new THREE.PlaneGeometry(5, 5, 1);
geometry.translate(0, 0, -5);
// 创建渐变色材质
var material = new THREE.ShaderMaterial({
uniforms: {
color1: { value: new THREE.Color(0xff0000) },
color2: { value: new THREE.Color(0x00ff00) }
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
fragmentShader: `
uniform vec3 color1;
uniform vec3 color2;
varying vec2 vUv;
void main() {
gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0);
// 创建平面对象并应用材质
var plane = new THREE.Mesh(geometry, material);
// 添加平面对象到场景中
scene.add(plane);
// 设置相机位置
camera.position.z = 10;
// 渲染场景
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
render();
这里使用的渐变色材质使用了一个简单的顶点着色器和片段着色器来实现渐变色。顶点着色器只是将顶点位置变换到屏幕空间。片段着色器使用`mix()`函数来计算从一个颜色到另一个颜色的插值，并将结果作为片段颜色输出。
你可以通过修改`color1`和`color2`属性的值来更改渐变色的颜色。