搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > threejs技术流 > threejs 入门:第一课 一个能运行的简单代码

threejs 入门:第一课 一个能运行的简单代码

threejs技术流 2020-07-30

threejs 入门

第一课 一个能运行的简单代码

概述

这是 three.js 入门教程系列的第一课, three.js 就是一个封装 webgl 的引擎,让我们尽可能的更简单更容易的去实现一些 3d 内容和效果。threejs 是当前最流行的 web3d 引擎,你不知道学习什么 web3d 引擎,选它就没错。

很多人不知道 webgl 和 threejs 是什么关系,并且经常混淆这两个概念,threejs 就是封装使用 webgl,webgl 是一个绘制点线面的很基础很底层的渲染系统,实现一个功能往往需要书写大量代码,threejs 进行另一个高层次的封装,它帮我们处理了像场景、灯光、阴影、材质、贴图、空间运算、几乎所有你需要自己通过 WebGL 来实现的东西。大大的节省了开发时间。

所以 threejs 就是你从事 web3d 开发的利器,能让你轻松的入门和提高。

此教程是考虑你已经了解了 JavaScript 和开发环境的搭建,不是所有的游览器都支持,但几乎所有主流游览器最新版都支持 webgl,这点不必担心

正文

  1. 先解决有木有的问题 不管我们要学习什么,首先要建立一个能运行的基本程序,在此基础上不断的延伸扩展学习,所以我们先绘制一个正方形。

  2. 首先我们需要一个 canvas 的标签

<body>
<canvas id="canvas"></canvas>
</body>

然后获取这个 canvas 标签传给 threejs

const canvas = document.querySelector("#canvas");
const renderer = new THREE.WebGLRenderer({ canvas: canvas });

canvas 提供了画布的容器,我们的所有内容的都是绘制在 canvas 上,可以将 canvas 看做一个画板。

这画板要绘制什么内容,就像我们在现实世界中,眼睛身处在什么位置我们就看到这个位置相应场景。就像相机拍照一样。

  1. 我们在 threejs 中也是使用相机来计算你看到的内容来绘制,接下来我们创建一个相机

const fov = 45; //视角
const aspect = 1; //视口高宽比
const near = 0.1; //近平面
const far = 10000; //远平面
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); //创建相机
camera.position.z = 5; //这只相机位置

fov 是 field of view 的缩写,表示就是视角的意思,threejs 视角角度单位是角度,不是弧度。

aspect 是 canvas 的显示比例。可以看做是 canvas 的宽高比,一般情况下 aspect=canvas.width/canvas.height;

near 和 far 表示相机将要渲染的区间

这四个参数构成一个视椎体,英文为 frustum,视椎体内的空间都会渲染出来,而视椎体外不会被渲染

后续补上示例图

相机有了接下来我们是不是要有一个场景,这个场景,需要绘制的东西都需要加到场景中,现实世界我们要看到一个东西,这个世界就必须有这个东西。

我们开始创建场景

const scene = new THREE.Scene();

场景有了,我们往场景中添加东西。

const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

const material = new THREE.MeshBasicMaterial({
color: new THREE.Color(0.5, 0.7, 0.6),
});

const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

每一个渲染的东西都是一个 Mesh,每个 mesh 都是用形状(Geometry)和材质(Material)组成.

geometry 是指模型的形状,material 是指材质,比如模型的颜色,模型的透明度,反光度,明暗信息等。

mesh 建立号以后加入场景中,接下来我们就是要将他绘制出来

renderer.render(scene, camera); //可以简单理解为渲染在相机(camera)看到场景(scene)

但是由于这渲染出来我们看不出来是一个 3d 的物体,我们需要让他动起来。可以尝试让物体旋转起来。Mesh.rotation 表示物体旋转

这里我们需要持续的更新旋转状态 ,我们需要一个持续更新方法,js 提供了一个方法 requestAnimationFrame,

function render() {
mesh.rotation.x += 0.001;
mesh.rotation.y += 0.001;

renderer.render(scene, camera);
requestAnimationFrame(render); //再次调用render,但不会卡死,直接写成render(),会卡死报错
}

这样我们完成了一个基本的 threejs 绘制例子,效果如下: 


第一课内容到此结束。


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《threejs 入门:第一课 一个能运行的简单代码》的版权归原作者「threejs技术流」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注threejs技术流微信公众号

threejs技术流微信公众号:gh_223d6d2e54d8

threejs技术流

手机扫描上方二维码即可关注threejs技术流微信公众号

threejs技术流最新文章

精品公众号随机推荐