Three.js搭建环境

VignyMy

已于 2022-08-10 12:11:29 修改

阅读量6.3k

点赞数 1

分类专栏： Three.js 文章标签： javascript 前端 html

于 2018-06-21 17:00:27 首次发布

本文链接：https://blog.csdn.net/qq_38660394/article/details/80763100

版权

Three.js 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

1、搭建一个本地服务器。

2、下载three.js库。GitHub - mrdoob/three.js: JavaScript 3D Library.

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

第一步：新建一个项目文件夹“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;

代码分析：
init()函数是我们整个项目的入口，类似我们平时编程时的main函数。

上面的脚本中还包含scene; camera; renderer；分别是场景，相机，渲染器。每个项目必须得有这三样才能把显示模型显示在屏幕上。
scene：像电影上的场景，类似容器包含各种我们能看到的精灵、地图等。后面还会讲到灯光等。

camera:通过camera，我们才能看到场景上的画面，类似我们的眼睛，有视角等。

renderer:渲染器，把3D空间上的事物渲染到一个2D的平面。在屏幕上显示场景上的事物。

运行结果：
这里写图片描述

一片黑呜呜的。因为我们还没向场景添加任何东西。

我们可以向场景中添加一些元素。例如添加一个正方体，效果如下：
这里写图片描述

VignyMy

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
Three.js搭建环境

1、搭建一个本地服务器。2、下载three.js库。https://github.com/mrdoob/three.js/准备好前面的操作后，接下来是创建一个项目的过程。第一步：新建一个项目文件夹“Threejs”第二步：在Threejs文件夹内新建一个html文件（index.html）。该文件是通过浏览器进入游戏的入口。第三步：在Threejs文件夹内新建一个libs文件夹，用来存放three......
复制链接

扫一扫