初识 Three.js：第一个小 demo

Ozzie 的个人博客 / 272 / 0 / 创建于 4年前 / 更新于 4年前

第一次接触 Three.js，虽然目前没有确定以后是否从事 WebGL 的工作……这个蛮好玩的，先记录在这里

安装

安装 three.js
- 创建文件夹 ThreeJs，由于 Three.js 目前已经作为一个 npm 包来进行了发布，我们这里直接使用 npm 安装
```
npm install
npm install three
```
安装 webpack
- 由于浏览器不支持 ES6 的语法，所以这里需要打包
```
npm install webpack webpack-cli --save-dev
```

代码解析

创建 index.html

<!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8">
     <title></title>
 </head>
 <style type="text/css">
     body: { margin: 0; }
     canvas: { width: 100%; height: 100%; }
 </style>
 <body>
     <script src="./dist/bundle.js" type="text/javascript" charset="utf-8"></script>
 </body>
</html>

创建 demo.js

//引入文件
var THREE = require('three')
//场景、相机、渲染器
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);
//将渲染器的元素添加到HTML文档中
document.body.appendChild(renderer.domElement);
//创建立方体对象
//这个立方体对象包含了一个立方体中所有的顶点（vertices）和面（faces）
var geometry = new THREE.BoxGeometry(1, 1, 1);
//材质选择MeshBasicMaterial，所有的材质都将被应用于立方体的属性对象，为简单起见我们在此只设置了一个color属性
var material = new THREE.MeshBasicMaterial({
     color: 0x00ff00,
});
//创建网格（Mesh）
//网格是一个对象，它包含有一个几何体以及应用在此几何体上的材质
//我们可以直接将网格对象放置到我们的场景中，并让它在场景中自由移动
var cube = new THREE.Mesh(geometry, material);
//默认情况下，当我们调用 scene.add()，物体会被添加到左标为 (0, 0, 0) 的位置
scene.add(cube);
//默认位置可能会使摄像机和立方体互相重叠（即相机位于立方体中），为防止这种情况发生，我们可以将摄像机稍微向外移动一些即可
camera.position.z = 5;
//渲染场景
//现在网页中还没有出现任何东西，因为还没有对它进行真正的渲染
//我们需要调用：渲染或者动画循环
var animate = function () {
     //创建循环：让渲染器能够在屏幕每次刷新时对场景进行绘制（大多数屏幕的刷新频率为60次/秒）
     //用 requestAnimationFrame 来实现刷新功能的优点就是当用户切换到其他的标签页时，它会暂停，因此不用白白浪费处理器资源
     requestAnimationFrame(animate);
     //使立方体旋转
     //现在观察网页，确实有一个绿色的立方体，现在我们放它旋转起来
     cube.rotation.x += 0.01;
     cube.rotation.y += 0.01;
     renderer.render( scene, camera );
}
animate();

打包文件
- 由于项目比较简单，在此就不专门配置 webpack.config.js 了，直接执行命令打包
```
npx webpack --entry=./demo.js --output-filename=bundle.js --mode=development
```

查看结果

浏览器查看 index.html 即可查看结果

javascript

本作品采用《CC 协议》，转载必须注明作者和本文链接

Ozzie

81 声望

That's the price I pay...

1 人点赞

初识 Three.js：第一个小 demo

安装

代码解析

查看结果

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

初识 Three.js：第一个小 demo

安装

代码解析

查看结果

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录