资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

Three.js场景

创作时间:

作者:

@小白创作中心

Three.js场景

引用

CSDN

https://m.blog.csdn.net/mmc123125/article/details/145131723

Three.js是一个基于WebGL的JavaScript库，专注于在网页中创建交互式的3D图形。虽然听起来很酷，但其实入门比你想象中容易得多！今天，我们通过三步带你创建一个简单的Three.js场景，让你零基础也能绘制一个炫酷的3D世界。

一、准备工作

在开始之前，请确保你具备以下条件：

基础的HTML和JavaScript知识。
一台能运行现代浏览器的电脑（推荐使用Chrome）。
一个代码编辑器（如VS Code）。

引入Three.js

有两种方法使用Three.js：

通过CDN引入：推荐给初学者。只需在HTML中添加以下<script>标签即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

通过npm安装：如果你使用模块化开发或构建工具，可以通过以下命令安装：

npm install three

二、三步搭建你的第一个场景

第1步：创建基本场景

Three.js的基本场景需要以下三大核心组件：

场景（Scene）：这是你放置物体的地方。
相机（Camera）：就像观众的视角，用来观察场景。
渲染器（Renderer）：将场景和相机渲染为可在网页中显示的图像。

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js场景</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script>
        // 创建场景
        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); // 将渲染器的canvas添加到页面
    </script>
</body>
</html>

到这里，你已经创建了一个空的3D场景，但目前什么都看不到。接下来，我们会添加物体和灯光。

第2步：添加3D物体

Three.js提供了多种内置的几何体供我们使用，比如立方体、球体、平面等。你可以通过组合几何体（Geometry）和材质（Material）创建一个可视化的3D物体。

添加一个旋转的立方体：

// 创建一个立方体
const geometry = new THREE.BoxGeometry(); // 几何体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 材质
const cube = new THREE.Mesh(geometry, material); // 网格（几何体+材质）
scene.add(cube); // 将立方体添加到场景

实现旋转效果：

// 创建动画循环
function animate() {
    requestAnimationFrame(animate); // 循环调用
    cube.rotation.x += 0.01; // 绕x轴旋转
    cube.rotation.y += 0.01; // 绕y轴旋转
    renderer.render(scene, camera); // 渲染场景
}
animate(); // 启动动画

第3步：优化场景并添加交互

为了让场景更真实，我们需要添加灯光并支持用户交互。

添加灯光

// 添加点光源
const light = new THREE.PointLight(0xffffff, 1, 100); // 点光源，白光
light.position.set(10, 10, 10); // 设置光源位置
scene.add(light); // 添加光源到场景

响应屏幕大小调整

当用户调整浏览器窗口大小时，场景也需要重新调整：

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight; // 更新相机宽高比
    camera.updateProjectionMatrix(); // 更新投影矩阵
    renderer.setSize(window.innerWidth, window.innerHeight); // 更新渲染器尺寸
});

三、完整代码示例

以下是完整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js场景</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script>
        // 创建场景
        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.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        // 添加灯光
        const light = new THREE.PointLight(0xffffff, 1, 100);
        light.position.set(10, 10, 10);
        scene.add(light);
        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
        // 响应屏幕大小调整
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>