文档章节

WebGL中文教程,Web学习之一

哈全文
 哈全文
发布于 2017/05/24 22:44
字数 645
阅读 44
收藏 0

本文档主要是通过Three.js使用WebGL技术,在这节里我们主要通过一个旋转的立方体构建场景,

 

在开始之前,将下面的代码拷贝到一个HTML文件中:

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8>

<title>My first three.js app</title>

<style>

body { margin: 0; }

canvas { width: 100%; height: 100% }

</style> </head> <body>

<script src="js/three.js"></script> <script> // Our Javascript will go here. </script> </body> </html>

 

创建一个场景

想要利用three.js在一个场景中显示任何物体,我们需要了解三方面:

场景(scene):这里的场景主要指三维场景,分别表示X,Y,Z轴,其中Z轴垂直屏幕向外,由本节例子即可说明;

相机(camera):计算机屏幕是二维的,想要通过计算机屏幕看三维的物体,就需要通过透视的方法将三维场景投影在屏幕上面,类似于相机拍照,在构建整个三维场景时都要记得这点;

渲染器(renderer):对三维场景中的物体进行再处理,先不详谈。

具备了以上三方面,我们就可以用相机渲染场景了

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 );

document.body.appendChild( renderer.domElement );

通过PerspectiveCamera类定义了透视相机,其中第一个参数表示视角范围为75度,想象成一个四棱锥,对应两个面之间的夹角就是视角范围,第二个参数表示宽高比,第三、四个参数分别表示远近裁剪面,在远近才见面之间的部分有可能会被看到,在远近裁剪面之外的部分一定不会看到,下图为透视相机的原理示意图,有点粗糙,图中实心部分就是可能被相机看到的部分:

 

创建一个立方体并设置颜色并加入到场景中:

var geometry = new THREE.BoxGeometry( 1, 1, 1 );

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

var cube = new THREE.Mesh( geometry, material );

scene.add( cube );

camera.position.z = 5;

渲染场景

现在可以简单理解为屏幕是不断刷新的,下面代码表示当屏幕刷新一次时,立方体分别绕X轴和Y轴旋转0.1度;

function render() {

requestAnimationFrame( render );

cube.rotation.x += 0.1;
cube.rotation.y += 0.1;

renderer.render( scene, camera );

}

render();

© 著作权归作者所有

共有 人打赏支持
哈全文
粉丝 14
博文 92
码字总数 22122
作品 0
海淀
其他
私信 提问
Khronos发布WebGL标准规范 1.0

The Khronos Group在2011游戏开发者大会上发布了WebGL标准规范 R 1.0(中文), 支持WebGL的浏览器不借助任何插件便可提供硬件图形加速从而提供高质量的3D体验。 目前WebGL标准已经获得了业界大...

红薯
2011/03/04
520
0
Emscripten对OpenGL的支持

Emscripten对OpenGL的支持 翻译:云荒杯倾 本文是Emscripten-WebAssembly专栏系列文章之一,更多文章请查看专栏。 也可以去作者的博客阅读文章。 Emscripten支持三种OpenGL编译模式: OpenGL...

云荒杯倾
2017/10/02
0
0
ThreeJs 3D 全景项目开发总结

本文来自网易云社区 作者:唐钊 项目背景 那是在一个毫无征兆的下午,我还沉浸在 vue 的世界中,突然编辑跑过来说N的新官网想做一些3D全景的东西,一开始其实我的内心是拒绝的,一是没怎么实...

网易云
2018/09/27
0
0
原生 WebGL开发文章目录(持续更新)

版权声明:本文为博主原创文章,欢迎读者转载学习,转载请注明文章出处。 https://blog.csdn.net/qq_37338983/article/details/83096215 为了方便读者学习和阅读,这篇文章主要是列出笔者撰写...

Bruce_wjh
2018/10/16
0
0
原生webGL练习:利用点精灵实现字符串动画!

自从2017年2月份,写了一个基于canvas 2d的字符串动画的玩具之后,就一直想着怎么样把那个玩具性能优化一下。而且那玩意局限性很大,只能渲染纯色单色的字,而且通过每一帧疯狂调用方法,导致...

CharTen
2018/07/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java框架学习日志-13(Mybatis基本概念和简单的例子)

在mybatis初次学习Mybatis的时候,遇到了很多问题,虽然阿里云的视频有教学,但是视频教学所使用的软件和我自己使用的软件不用,我自己用的数据库是oracle数据库,开发环境是idea。而且视频中...

白话
今天
4
0
Java基础:String、StringBuffer和StringBuilder的区别

1 String String:字符串常量,字符串长度不可变。Java中String是immutable(不可变)的。 String类的包含如下定义: /** The value is used for character storage. */private final cha...

watermelon11
今天
3
0
mogodb服务

部署MongoDB 官网: https://www.mongodb.com/download-center/community 创建mongo数据目录 mkdir /data/mongodb 二进制部署 wget -c https://fastdl.mongodb.org/linux/mongodb-linux-x8......

以谁为师
昨天
5
0
大神教你Debian GNU/Linux 9.7 “Stretch” Live和安装镜像开放下载

Debian项目团队于昨天发布了Debian GNU/Linux 9 "Stretch" 的第7个维护版本更新,重点修复了APT软件管理器中存在的安全漏洞。在敦促每位用户尽快升级系统的同时,Debian团队还发布了Debian ...

linux-tao
昨天
4
0
PHP 相关配置

1. php-fpm的pool 编辑php-fpm配置文件php-fpm.con vim /usr/local/php/etc/php-fpm.conf //在[global]部分增加以下内容 include = etc/php-fpm.d/*.conf # 相当与Nginx的虚拟主机文件 “vho......

Yue_Chen
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部