美文网首页
Three.js入门(一)

Three.js入门(一)

作者: Yura555 | 来源:发表于2017-03-01 00:28 被阅读0次

谈论three.js之前我们需要了解一下WebGL...先自问自答一下

1:什么是WebGL ?

webGL是基于OpenGL es 2.0 的web标准,可以通过html5 canvas元素作为dom访问接口。

2:WebGL可以做什么?

现在大部分浏览器都实现了WebGL。它不仅可以创建二维图形和应用,还可以利用CPU,来创建漂亮的、高效的三维应用。

3:那什么是Three.js?

Three.js封装了底层的图形接口,提供了基于WebGL的非常易用的JavaScript API。且简化WebGL的开发。

一个典型的Three.js程序至少包括 渲染器场景照相机以及场景中创建的物体。如下所示:

 //渲染器
var renderer = new THREE.WebGLRenderer({
    canvas:document.getElementById('myCanvas')
});
renderer.setClearColor(0x000000);

//场景
var scene = new THREE.Scene();

//照相机
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);

//物体
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
    new THREE.MeshBasicMaterial({
        color: 0xff0000
    })
);
scene.add(cube);

//渲染
renderer.render(scene,camera);

第一部分:相机

1.1什么是照相机?
他定义了三维空间到二维空间屏幕的投影方式。

Three.js中有两种不同的相机。正交投影相机透视投影相机

th1.png

透视投影(a):近大远小效果
正交投影(b):在三维空间内平行的线,在二维空间也一定是平行的。

(1)正交投影相机
    //设置正交投影相机
    THREE.OrthographicCamera(left, right, top, bottom, near, far)
th2.png

相关文章

  • 参考文章和书籍

    豆瓣 three.js 入门指南 https://read.douban.com/reader/ebook/741...

  • Three.js 操作3D模型经验总结

    一、概述 最近在调研组内3D机房可视化的实现,之前和大家分享过three.js的入门操作,通过three.js我们...

  • Three.js入门(一)

    谈论three.js之前我们需要了解一下WebGL...先自问自答一下 1:什么是WebGL ? webGL是基于...

  • WebGL入门demo

    WebGL入门demo three.js入门 开场白 哇哦,绘制气球耶,在网页上?对啊!厉害了!3D效果图也能在网...

  • Three.js入门

    Three.js封装了底层的图形接口,使得我们能够在无需掌握繁冗的图形学知识的情况下,也能用简单的代码实现三维场景...

  • Three.js入门

    1、什么是WebGL, 什么是three.js? WebGL是一种技术,一种在浏览器上实现三维效果,展示3D模型和...

  • Three.js入门

    Threejs 为什么? webGL太难用,太复杂! 但是现代浏览器都支持 WebGL 这样我们就不必使用 Fla...

  • three.js 入门

    一、three.js openGL跨平台3D/2D的绘图标准。wegbl是openGL在浏览器上的实现,是基础的绘...

  • 使用three.js的基本组件

    创建一个简单的入门案例 three.js的三大场景:场景(scene)、相机(camera)和渲染器(render...

  • THREE.js_的使用(例子)

    THREE.js 下载 THREE.js 官方文档 THREE.js 中文基础教程 THREE.MeshLine ...

网友评论

      本文标题:Three.js入门(一)

      本文链接:https://www.haomeiwen.com/subject/ilgfgttx.html