WebGL是在浏览器中实现三维效果的一套规范,而Three.js是一个WebGL的开源框架,它掩盖了WebGL很多麻烦的细节。
一、环境配置
引入 three.js文件就可以了
<!DOCTYPE html> <html> <head> <title></title> <style>canvas { width: 100%; height: 100% }</style> </head> <body> <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script> </body> </html>
二、代码结构
在Three.js中,要渲染物体到网页,我们需要三个组件:场景(scene)、相机(camera)、和渲染器(renderer)。有了这三个东西,我们才能使用相机将场景渲染到网页上去。
1.代码
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);
2.理解