如何将透明度添加到简单的顶点对象？

// 创建场景、相机和渲染器
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.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 设置顶点着色器和片段着色器
material.vertexShader = `
    varying vec3 vColor;
    void main() {
        vColor = color;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`;
material.fragmentShader = `
    varying vec3 vColor;
    void main() {
        gl_FragColor = vec4(vColor, opacity);
    }
`;

// 启用混合模式
renderer.setClearColor(0x000000, 0); // 设置背景颜色为透明
renderer.autoClear = false;
renderer.sortObjects = false;
renderer.alpha = true;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 0); // 设置背景颜色为透明
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = 0;

// 渲染场景
function render() {
    requestAnimationFrame(render);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.clear();
    renderer.render(scene, camera);
}
render();