当前位置：首页 > JavaScript

js实现球状

2026-04-06 16:46:30JavaScript

使用Three.js创建3D球体

Three.js是一个流行的JavaScript 3D库，可以轻松创建和渲染3D球体。

安装Three.js：

npm install three

基础球体创建代码：

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
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);

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

使用Canvas绘制2D球体

对于简单的2D球体效果，可以使用HTML5 Canvas：

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

function drawSphere(x, y, radius) {
    // 创建径向渐变
    const gradient = ctx.createRadialGradient(
        x, y, radius * 0.2,
        x, y, radius
    );
    gradient.addColorStop(0, 'white');
    gradient.addColorStop(1, 'blue');

    // 绘制球体
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fillStyle = gradient;
    ctx.fill();
    ctx.closePath();

    // 添加高光
    ctx.beginPath();
    ctx.arc(x - radius/3, y - radius/3, radius/5, 0, Math.PI * 2);
    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
    ctx.fill();
    ctx.closePath();
}

drawSphere(150, 150, 100);

使用CSS创建球体效果

纯CSS也可以创建逼真的3D球体效果：

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

<style>
.sphere {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, 
        #fff 0%, 
        #aef 40%, 
        #6ae 70%, 
        #137 100%);
    box-shadow: inset -20px -20px 60px rgba(0,0,0,0.5),
                0 0 20px rgba(0,100,255,0.5);
}
</style>

物理引擎中的球体

使用物理引擎如Cannon.js或Ammo.js可以创建具有物理特性的球体：

import * as THREE from 'three';
import * as CANNON from 'cannon';

// Three.js部分
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshPhongMaterial({color: 0x00aaff});
const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphereMesh);

// Cannon.js物理部分
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);

const sphereShape = new CANNON.Sphere(1);
const sphereBody = new CANNON.Body({
    mass: 5,
    shape: sphereShape,
    position: new CANNON.Vec3(0, 10, 0)
});
world.addBody(sphereBody);

// 动画循环中更新
function animate() {
    world.step(1/60);
    sphereMesh.position.copy(sphereBody.position);
    sphereMesh.quaternion.copy(sphereBody.quaternion);
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}
animate();

性能优化技巧

对于需要渲染大量球体的场景，考虑使用实例化渲染：

js实现球状

const geometry = new THREE.SphereGeometry(0.5, 16, 16);
const material = new THREE.MeshPhongMaterial({color: 0x00aaff});
const spheres = new THREE.InstancedMesh(geometry, material, 1000);

const matrix = new THREE.Matrix4();
const color = new THREE.Color();

for (let i = 0; i < 1000; i++) {
    matrix.setPosition(
        Math.random() * 100 - 50,
        Math.random() * 100 - 50,
        Math.random() * 100 - 50
    );
    spheres.setMatrixAt(i, matrix);
    spheres.setColorAt(i, color.setHex(Math.random() * 0xffffff));
}

scene.add(spheres);