当前位置：首页 > JavaScript

js实现球

2026-04-06 21:58:13JavaScript

使用Three.js创建3D球体

Three.js是一个流行的JavaScript库，用于在浏览器中渲染3D图形。以下代码展示了如何创建一个简单的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();

关键参数说明：

SphereGeometry(radius, widthSegments, heightSegments)：控制球体大小和细分程度。
MeshBasicMaterial：基础材质，可通过color属性调整颜色。

使用Canvas绘制2D球体

通过Canvas的2D上下文可以绘制带有渐变效果的球体：

js实现球

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

// 绘制球体  
const centerX = canvas.width / 2;  
const centerY = canvas.height / 2;  
const radius = 100;  

// 创建径向渐变模拟光照  
const gradient = ctx.createRadialGradient(  
    centerX - radius * 0.3, centerY - radius * 0.3, radius * 0.1,  
    centerX, centerY, radius  
);  
gradient.addColorStop(0, 'white');  
gradient.addColorStop(1, 'blue');  

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

技巧：

调整渐变起点和颜色停止点可模拟不同光源方向。
添加阴影或高光可增强立体感。

使用CSS实现球形效果

通过CSS的border-radius和box-shadow可以创建简单的球形元素：

js实现球

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

优化建议：

使用radial-gradient模拟光照效果。
box-shadow的inset属性可添加内阴影增强深度。

物理引擎实现交互球体（如Matter.js）

结合物理引擎可实现球的弹跳和碰撞效果：

const { Engine, Render, Bodies, World } = Matter;  

// 创建引擎和渲染器  
const engine = Engine.create();  
const render = Render.create({  
    element: document.body,  
    engine: engine,  
    options: { width: 800, height: 600 }  
});  

// 添加球体和地面  
const ball = Bodies.circle(400, 100, 30, { restitution: 0.9 });  
const ground = Bodies.rectangle(400, 550, 800, 20, { isStatic: true });  

World.add(engine.world, [ball, ground]);  
Engine.run(engine);  
Render.run(render);

参数说明：