用threejs实现一个漫天星光
以下是使用three.js实现一个漫天星光的代码示例：
<!DOCTYPE html>
<html>
<head>
<title>Three.js Starfield</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// 创建场景
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 starMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
// 创建星星
for (var i = 0; i < 5000; i++) {
var starGeometry = new THREE.SphereGeometry(0.1, 32, 32);
var star = new THREE.Mesh(starGeometry, starMaterial);
var x = Math.random() * 2000 - 1000;
var y = Math.random() * 2000 - 1000;
var z = Math.random() * 2000 - 1000;
star.position.set(x, y, z);
scene.add(star);
}
// 设置相机位置
camera.position.z = 5;
// 渲染场景
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
在上述代码中，我们首先创建了一个场景、相机和渲染器。然后，我们使用一个循环来创建5000个星星，每个星星都是一个具有0.1半径的球体。我们使用Math.random()函数来随机生成星星的位置。最后，我们将相机的位置设置为(0, 0, 5)，并使用requestAnimationFrame()函数来循环渲染场景。运行上述代码，您将看到一个漫天星光的效果。
原文地址: http://www.cveoy.top/t/topic/bngj 著作权归作者所有。请勿转载和采集!