专栏首页玩转JavaEE一个简单的案例,理解threejs中几个基本概念

一个简单的案例,理解threejs中几个基本概念

种种原因吧,需要在和大伙分享Elasticsearch的间隙,也来分享一下threejs的一些用法。有一个小小愿望,希望这个threejs教程最终也能成一个系列。 随着浏览器性能的不断提升,以及对webgl的支持,在浏览器上展示3d模型早已不是痴人说梦,不过如果使用原生的webgl的话,开发起来难度还是略大,一个常见的解决方案就是使用threejs,这是一个封装的库,使用它我们可以更好的在网页上实现3d效果,threejs地址为https://github.com/mrdoob/three.js。

好了,废话不多说,接下来我想通过一个简单的案例,先和大伙来聊一聊threejs中几个简单的概念。

资源下载

首先,在GitHub上下载threejs,这个下载方式就不需要我多说了,相信大伙都能自己解决,下载地址https://github.com/mrdoob/three.js。

基本概念

在threejs中有几个基本的概念:

1.场景

场景就是你看到的花花世界,这就是一个场景,反映到threejs中,场景就是所有物体的容器,例如,我们想显示一个卡车,那就要将这个卡车放加入到场景中,然后才能显示出来。

2.相机

相机就相当于人的眼睛,人用眼睛看这花花世界,而在threejs中,使用相机来观察场景,相机的位置、相机的角度都决定了看到的场景会不同,相机有透视相机和正投影相机等。

3.渲染器

渲染器就是将相机拍摄的画面在页面的某个dom节点中显示出来。

4.组件

组件就是要显示的物体,这种物体有平面几何物体,有三维物体。

代码实现

创建一个普通项目,将下载到的threejs中的build/three.js文件拷贝到项目中,然后在项目中创建一个html页面,如下:

开始代码编写:

首先在需要将threejs引入到项目中,然后在js中分别创建场景、相机、渲染器以及组件:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth /window.innerHeight, 1, 1000);
var render = new THREE.WebGLRenderer();
render.setClearColor("#FFFFFF");
render.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(render.domElement);
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0xFFB6C1});
var cube = new THREE.Mesh(geometry, material);

代码解释:

  1. newTHREE.Scene()表示创建一个场景出来。
  2. 第2行代码表示创建一个相机,第一个参数视角为60度,第二个参数表示实际窗口的宽高比,第三个参数表示近平面,第四个参数表示远平面(关于最后两个参数,涉及到一点图形学的东西,人的眼睛看到的空间区域是一个四棱台,太近的太远的都看不到,近处的截面就是近平面,最远处的截面就是远平面,读者暂时可以这样理解)。
  3. 第3-5行代码表示创建一个渲染器,设置渲染器颜色为白色,同时设置渲染器的大小。
  4. 第6行代码表示将渲染器渲染的结果在页面的body元素中显示出来。
  5. 第7-9行代码表示创建一个三维的立方体,设置材料的颜色为粉色,然后利用THREE.Mesh构造一个立方体出来。

元素都创建出来了,接下来将组件添加到场景中,同时设置相机的深度为5,如下:

scene.add(cube);
camera.position.z = 5;

最后,通过如下方式将图像渲染出来:

function showCube() {
    render.render(scene, camera);
}
showCube()

传入场景和相机,利用渲染器将之渲染出来,最终执行结果如下:

此时的图像是静止不动的,让图像动起来,有两种不同的方式:

  1. 图像本身动起来
  2. 相机动起来

本案例采用第一种方式,让图像在三个坐标上旋转,修改showCube方法如下:

function showCube() {
    requestAnimationFrame(showCube)
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    cube.rotation.z += 0.01;
    render.render(scene, camera);
}

requestAnimationFrame是浏览器用于定时循环操作的一个接口,类似于setTimeout,主要用途是按帧对网页进行重绘,然后在重绘过程中使图像旋转起来,如下:

本项目案例完整下载地址: https://github.com/lenve/threejsDemo

好了,至此,一个简单的案例就完成了。不知道大伙对threejs有没有一点入门呢?

本文分享自微信公众号 - 牧码小子(gh_d1ca11234a30)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Spring Data Redis使用

    上文我们介绍了Redis,在开发环境中,我们还有另外一个解决方案,那就是Spring Data Redis。本文我们就来看看这个东西。

    江南一点雨
  • Spring Cloud中声明式服务调用Feign

    前面几篇文章我们详细的介绍了Ribbon、RestTemplate、Hystrix组件,这些组件是我们Spring Cloud中非常基础的组件,小伙伴们在使用的...

    江南一点雨
  • 接私活必备的10个开源项目!

    基于 Angular 2, Bootstrap 4 和 Webpack 的后台管理面板框架。

    江南一点雨
  • React 性能优化大挑战:一次理解 Immutable data跟shouldComponentUpdate

    作者: TechBridge Weekly/huli https://blog.techbridge.cc/2018/01/05/react-render-op...

    企鹅号小编
  • kube-on-kube-operator 开发(一)

    kubernetes 已经成为容器时代的分布式操作系统内核,目前也是所有公有云提供商的标配,在国内,阿里云、腾讯云、华为云这样的公有云大厂商都支持一键部署 ku...

    田飞雨
  • kube-on-kube-operator 开发(一)

    kubernetes 已经成为容器时代的分布式操作系统内核,目前也是所有公有云提供商的标配,在国内,阿里云、腾讯云、华为云这样的公有云大厂商都支持一键部署 ku...

    田飞雨
  • Spark图计算及GraphX简单入门

    Spark GraphX是一个分布式图处理框架,它是基于Spark平台提供对图计算和图挖掘简洁易用的而丰富的接口,极大的方便了对分布式图处理的需求。

    ZONGLYN
  • JAVA消息确认机制之ACK模式

    JMS API中约定了Client端可以使用四种ACK模式,在javax.jms.Session接口中:

    江湖前辈黄药师
  • 线上服务CPU使用率百分百,注册中心却看不到该服务

    线上某服务一直运行很稳定,最近突然就cpu百分百,rpc远程调用全部失败,并走了mock逻辑。重启后,一个小时后问题又重现。于是dump线程栈信息,但不仔细看也...

    猿天地
  • 【AlphaGo Zero 核心技术-深度强化学习教程笔记07】策略梯度

    【导读】Google DeepMind在Nature上发表最新论文,介绍了迄今最强最新的版本AlphaGo Zero,不使用人类先验知识,使用纯强化学习,将价值...

    WZEARW

扫码关注云+社区

领取腾讯云代金券