当前位置：首页 > JavaScript

js实现球状

2026-03-14 23:03:21JavaScript

在JavaScript中实现球状效果可以通过多种方式实现，以下是几种常见的方法：

使用Three.js创建3D球体

Three.js是一个流行的3D库，可以轻松创建球状物体：

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const sphere = new THREE.Mesh(geometry, material);

scene.add(sphere);
camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
    sphere.rotation.x += 0.01;
    sphere.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

使用Canvas绘制2D球体

通过Canvas的渐变效果可以模拟球状外观：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 70;

const gradient = ctx.createRadialGradient(
    centerX, centerY, radius * 0.2,
    centerX, centerY, radius
);
gradient.addColorStop(0, '#fff');
gradient.addColorStop(1, '#00f');

ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.fillStyle = gradient;
ctx.fill();

使用CSS创建球状效果

纯CSS也能实现球状视觉效果：

<style>
    .sphere {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, #fff, #00f);
        box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
    }
</style>

<div class="sphere"></div>

使用WebGL原生API

对于更底层的控制，可以直接使用WebGL：

js实现球状

const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

// 顶点着色器
const vsSource = `
    attribute vec4 aVertexPosition;
    uniform mat4 uModelViewMatrix;
    uniform mat4 uProjectionMatrix;
    void main() {
        gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
    }
`;

// 片段着色器
const fsSource = `
    void main() {
        gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
    }
`;

// 初始化着色器程序
const shaderProgram = initShaderProgram(gl, vsSource, fsSource);

// 创建球体顶点数据
const sphereVertices = [];
const latitudeBands = 30;
const longitudeBands = 30;
for (let lat = 0; lat <= latitudeBands; lat++) {
    const theta = lat * Math.PI / latitudeBands;
    const sinTheta = Math.sin(theta);
    const cosTheta = Math.cos(theta);

    for (let long = 0; long <= longitudeBands; long++) {
        const phi = long * 2 * Math.PI / longitudeBands;
        const sinPhi = Math.sin(phi);
        const cosPhi = Math.cos(phi);

        sphereVertices.push(cosPhi * sinTheta);
        sphereVertices.push(cosTheta);
        sphereVertices.push(sinPhi * sinTheta);
    }
}

// 渲染逻辑...

这些方法从简单到复杂，可以根据项目需求选择合适的实现方式。Three.js方案适合需要完整3D功能的场景，Canvas方案适合2D球体效果，CSS方案最简单但功能有限，WebGL原生方案则提供最大控制权但复杂度最高。