尝试做导演

欢迎进入 Three.js 的奇妙世界!

得益于浏览器厂商对 WebGL 的支持, 过去只能通过 C 或 C++ 编写底层代码来实现的3D展示功能, 现在已经可以由网页前端来实现了. 无需任何安装包和浏览器插件, 也无需等待更新, 只要刷新一下浏览器便完成. 但如果你使用纯gl语言来编写程序, 会感到比较困难, 由此可借助一些第三方的3D库来实现, 比如 Three.js.

那怎么用 JavaScript 根据 Three.js 来编写3D程序呢?我们先看看导演是怎么拍电影的.

香港导演王家卫在2009年开始拍摄, 2013年出品, 2015年升级为3D版的影片《一代宗师》囊获了众多奖项. 他选在在广东开平赤坎影视城、 沈阳、长春等地取景拍摄, 梁朝伟、章子怡、张震、宋慧乔、张晋担任主要演员.

1. 场景






拍电影前首先一定要选好场景, 它是所有演员和道具在台前的展示之处.
在 Three.js 中由以下代码实现: var scene = new THREE.Scene();

2. 摄像机

那么还必须使用对应的工具把景象录制下来, 再到电影院或电脑屏幕呈现出来. 这个工具就是摄像机. Three.js 中有多种摄像机, 最常用的就是 透视摄像机 PespectiveCamera, 它有聚焦效果, 通过 lookAt() 方法, 你就已经拿着个相交对准目标了, scene.position 就是场景的中心点.
var camera = new THREE.PespectiveCamera(60, width/height, 1, 1000); camera.lookAt(scene.position);

3. 演员

无论是真人拍摄的影片, 还是像《猫和老鼠》的动画片, 都不能是一个空空的场景, 里面必须有不同的演员, 或说角色对吧. 此外, 还要有不同的 道具拍摄, 才能使得最终的故事更精彩. 在 Three.js 中, 你可把各种不同的 Object3D 物体添加到场景中, 现举例最简单的 Mesh, 它由几何模型 Geometry材质构成 Material, 现举例最简单的立方体模型: var geometry = new THREE.BoxGeometry(1, 1, 1), material = new THREE.MeshBasicMaterial({color: 0x993366, wireframe:true}), mesh = new THREE.Mesh(geometry, material); scene.add( mesh );

4. 渲染器

在屏幕上能看到动画, 必须有个渲染机制, 把色彩、图形和光影等渲染出来. 在 Three.js 中是通过渲染器 WebGLRenderer, 要通过 document.body 或html中的某个div把 renderer.domElement 添加进来. var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); document.body.appendChild( renderer.domElement );

由此, 一个最简单的代码就这样把一个立方体展示出来. width 和 height 取 window.innerWidth, window.innerHeight. var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 1000); camera.lookAt(scene.position); camera.position.z = 10; var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); renderer.render(scene, camera); var geometry = new THREE.BoxBufferGeometry(1, 1, 1), material = new THREE.MeshBasicMaterial({color: 0x663399, wireframe: true}), cube = new THREE.Mesh( geometry, material ); scene.add( cube );

那么, 你现在要做的就是 —— 导演!把代码编写出来.