<Three.js>（第一节）环境搭建

最新推荐文章于 2025-01-02 09:21:32 发布

最新推荐文章于 2025-01-02 09:21:32 发布 · 1.8k 阅读

文章标签：

#javascript #ViewUI

本文介绍如何使用Three.js创建一个基本的3D场景。包括搭建本地服务器、下载Three.js库及项目目录结构设置等内容，并提供了初始化代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Three.js顾名思义3D的js库。是运行在浏览器的基于webgl的3D引擎。该引擎是github上的一个开源项目，下载地址：https://github.com/mrdoob/three.js/

1、搭建一个本地服务器。（本人用的是另外一台mac电脑的自带本地服务器）

2、下载three.js库。https://github.com/mrdoob/three.js/

准备好前面的操作后，接下来是创建一个项目的过程。

第一步：新建一个项目文件夹“Threejs”

第二步：在Threejs文件夹内新建一个html文件（index.html）。该文件是通过浏览器进入游戏的入口。

第三步：在Threejs文件夹内新建一个libs文件夹，用来存放three.js库和需要用到的其他库。

第四步：在Threejs文件夹内新建一个images文件夹，用来存放需要素材。

第五步：在Threejs文件夹内新建一个js文件夹，用来存放我们开发项目写的脚本。

这里写图片描述

html文件：

<!DOCTYPE html>
<html>
<head>
    <title>three.js</title>
    <script src="libs/three.js"></script>
    <script src="js/main.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<script>

</script>
<body>
</body>
</html>

下面开始写脚本。在js文件夹内新建一个main.js文件：


var renderer;
var scene;
var camera;
function init() {
    scene = new THREE.Scene();//场景
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//相机
    renderer = new THREE.WebGLRenderer();//渲染
    renderer.setClearColor(0x000000, 1.0);
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
    render();
}
function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}
window.onload = init;