1,首先我们应该知道 three.js是做什么的？
hree.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。
说白了，他就是基于WebGL 规范的一个可以直接在浏览器呈现3D效果的一个第三方类库，类似于Javascript的Jquery插件。
下面我们通过一个简单的入门事例来具体说明一下通过three.js在浏览器上呈现一个3D效果的基本流程。
创建之前：
Lesson1
我们需要几个基本步骤：
真正能够显示有three.js,我们需要三件事:一个场景,一个相机,一个渲染器,所以我们可以用摄像机渲染场景。
创建一个场景：
var width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽var height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高//创建一个场景var scene = new THREE.Scene();//创建Three相机 three.js提供了 有几种不同的摄像机 这里使用的是THREE.PerspectiveCamera// 参数说明 : //1,视野//2,长宽比//接下来的两个属性是远近剪裁平面。//意味着什么,是物体远离相机比远比附近或接近的价值不会呈现。//你现在不需要担心这个,但是你可能想要使用其他值在你的游戏来获得更好的性能。//var camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000); var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);//渲染器 除了WebGLRenderer我们用在这里 three.js提供了其他var renderer = new THREE.WebGLRenderer(); //renderer.setSize(width, height); //指定渲染器的高宽（和画布框大小一致）renderer.setSize(window.innerWidth, window.innerHeight)//document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。//renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)renderer.setSize(window.innerWidth, window.innerHeight)//要创建一个多维数据集,我们需要一个CubeGeometry。//这是一个对象,其中包含所有的点(顶点)和填充(面临)的多维数据集var geometry = new THREE.CubeGeometry(1,1,1); //除了CubeGeometry,我们需要一个材料颜色//three.js附带一些材料,但目前我们将使用MeshBasicMaterialvar material = new THREE.MeshBasicMaterial({color: 0x00ff00});//第三件事,我们需要的是一个Mesh。Mesh是一个对象,//参数是一个CubeGeometry、材料(material ), var cube = new THREE.Mesh(geometry, material); //然后我们可以插入到我们的场景中,scene.add(cube); //默认情况下,当我们调用scene.add(),//我们将添加到坐标(0,0,0)。这将导致相机和cube。为了避免这种情况,我们只是将镜头移出一点。camera.position.z = 5; //渲染场景//呈现var render = function () { requestAnimationFrame(render); //旋转 cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render();
以上就是一个简单的three.js在浏览器渲染的一个基本的操作过程。本人也是初学者希望对大家有帮助，那里不正确，希望大家共同学习哈。。。
效果图如下：(不过没有动画效果)
