Three.js实战--水天一色的小岛
发布人：shili8
发布时间：2025-03-02 12:58
阅读次数：0
**三维小岛实战**
在本文中，我们将使用 Three.js 库创建一个美丽的水天一色的小岛。我们将学习如何使用 Three.js 的各种功能，包括场景、摄像机、灯光、模型加载器等。
### 一、准备工作首先，我们需要安装 Three.js 库。如果你还没有安装，可以通过以下命令进行安装：
bashnpm install three
接下来，我们需要创建一个 HTML 文件来展示我们的小岛。我们将使用以下代码作为起点：
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水天一色的小岛</title>
<style>
body {
margin:0;
width:100%;
height:100vh;
padding:0;
background-color: #f0f0f0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src=" /> <script src="script.js"></script>
</body>
</html>
### 二、场景和摄像机在 Three.js 中，场景是整个3D 世界的容器。我们需要创建一个场景来放置我们的小岛。
javascript// 创建场景const scene = new THREE.Scene();
接下来，我们需要创建一个摄像机来观察我们的场景。摄像机决定了我们看到什么。
javascript// 创建摄像机const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight,0.1,1000); camera.position.z =5;
### 三、灯光在 Three.js 中，灯光是场景中的一个重要组成部分。我们需要创建一些灯光来照亮我们的小岛。
javascript// 创建点光源const pointLight = new THREE.PointLight(0xffffff,1,100); pointLight.position.set(5,5,5); // 添加到场景中scene.add(pointLight);
### 四、模型加载器在 Three.js 中，我们可以使用模型加载器来加载预先创建的3D 模型。我们将使用以下代码来加载一个小岛模型：
javascript// 加载模型const loader = new THREE.GLTFLoader();
loader.load(' (gltf) => {
const model = gltf.scene;
scene.add(model);
});
### 五、渲染最后，我们需要渲染我们的场景。我们将使用以下代码来进行渲染：
javascript// 渲染场景const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('canvas'),
antialias: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
### 六、总结在本文中，我们学习了如何使用 Three.js 库创建一个美丽的水天一色的小岛。我们学会了如何使用场景、摄像机、灯光和模型加载器等功能来构建我们的3D 世界。
**完整代码**
javascript// script.js// 创建场景const scene = new THREE.Scene();
// 创建摄像机const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight,0.1,1000);
camera.position.z =5;
// 创建点光源const pointLight = new THREE.PointLight(0xffffff,1,100);
pointLight.position.set(5,5,5);
// 添加到场景中scene.add(pointLight);
// 加载模型const loader = new THREE.GLTFLoader();
loader.load(' (gltf) => {
const model = gltf.scene;
scene.add(model);
});
// 渲染场景const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('canvas'),
antialias: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
**注意**
本文中的代码仅供参考，可能需要根据具体需求进行调整。
粤公网安备 44011102002787号