threejs是webgl的一个库,通过它我们可以利用大量已有的api做出很好的3d图形.
第一部分：html页面框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>threejs</title> <script src="cdn.bootcss.com/jquery/3.1.1/core.js"></script> <!-- 引入jqury简化js复杂的操作，可以引入，但不是必须的 --> <script src="cdn.bootcss.com/three.js/r83/three.js"></script> <!-- 引入threejs核心库，必须的 --> <style> body{ margin:0; overflow: hidden; } /*这里设置margin:0; 和overflow:hidden; 可以保证移除所有的滚动条*/ </style> </head> <body> <div class="webgl_output"> </div> <script> $(function () { // here we run the there.js }); </script> </body> </html>
第二部分：Three.js中的坐标轴
我们要建立三位场景，那么一定是离不开坐标轴的。
创建一个场景非常的简单，就是var scene = new THREE.Scene(); 而创建一个坐标轴就是用 var axes = new THREE.AxisHelper();
坐标轴的具体指向如下：
显然，其中xy平面即为电脑屏幕的平面。这里的坐标轴和css3中的3d旋转是一样的。
第三部分：实例解析
最终效果如下：
源代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>threejs</title> <!-- <script src="http://cdn.bootcss.com/jquery/3.1.1/core.js"></script> --> <!-- 引入jqury简化js复杂的操作，可以引入，但不是必须的 --> <script src="http://cdn.bootcss.com/three.js/r83/three.js"></script> <!-- 引入threejs核心库，必须的 --> <style> body{ margin:0; overflow: hidden; } /*这里设置margin:0; 和overflow:hidden; 可以保证移除所有的滚动条*/ </style> </head> <body> <div class="webgl_output"> </div> <script> // $(function () { // here we run the there.js // 基础工作 var scene = new THREE.Scene(); // 创建一个THREE的场景，场景就是我们最终看到的，也就是我们描绘三维图图形的地方，可以看出THREE类似一个对象，我们使用其下的方法 var camera = new THREE.PerspectiveCamera(55,window.innerWidth/window.innerHeight,0.1,1000); // 创建一个相机，虽然有场景，但是看不到啊，必须指定一个相机，通过相机我们可以看到场景的内容。 // 这里的55可以理解为举例，值越大，我们看到的场景月 var renderer = new THREE.WebGLRenderer(); // 创建一个渲染器 renderer.setClearColor(0x111111); // 注意，之前的版本是setClearColorHex，现在只有setClearColor可以使用，可以去查看源码 // 将scene的背景色设置为eeeeee renderer.setSize(window.innerWidth,window.innerHeight); // 设置scene的尺寸 // 这时，我们就已经创建了场景（买了一块空地）、 一个相机（通过眼睛观察这块地）、一个渲染器（用户施工的工具） // 创建一个坐标轴 var axes = new THREE.AxisHelper(30); // 这里的30，即创建出的坐标轴的相对长度 // 创建一个坐标轴 scene.add(axes); // 把坐标轴添加到场景中 // 创建一个二维平面 var planeGeometry = new THREE.PlaneGeometry(60,25,2,1); // 创建一个二维的平面几何形状（这是身体，还没有灵魂），其宽为60，高20，而后面两个参数却几乎没有影响,即使不要也是可以的 var planeMaterial = new THREE.MeshBasicMaterial({color:0xff0000}); // 创建一个材质，颜色为红色，这里便是几何形状的灵魂。 var plane = new THREE.Mesh(planeGeometry,planeMaterial); // 使用Mesh将创建的二维平面和材质结合起来 plane.rotation.x =-0.5*Math.PI; plane.rotation.y =-0.1*Math.PI; // 将平面沿着x轴旋转-90度，这里的旋转和CSS3中的3d旋转是一样的。 plane.position.x = 0; plane.position.y = 0; plane.position.z = 0; //确定这个平面在坐标轴的位置 scene.add(plane); // 刚才它是一个孤魂野鬼，现在将之将平面置于场景中 // 创建一个方块 var cubeGeometry = new THREE.CubeGeometry(4,4,4); // 创建一个方块的几何形状 var cubeMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00,wireframe: true}); // 创建好一个方块的材质 var cube = new THREE.Mesh(cubeGeometry,cubeMaterial); // 把它的形体和它的灵魂相结合，这时他就是一个完整的人 cube.position.x = -4; cube.position.y = 10; cube.position.z = 15; // 同样的，得指定它在坐标系中的位置。 scene.add(cube); //同上，创建好之后，它只是一个孤魂野鬼，必须把它加在这个场景中 // 创建一个球体 var sphereGeometry = new THREE.SphereGeometry(8,20,20); // 创建一个球体壳 var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff,wireframe:true}); // 创建一个球体的灵魂 var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial); // 将形体和灵魂相结合 sphere.position.x = 20; sphere.position.y = 12; sphere.position.z = -20; // 指定球体的位置 scene.add(sphere); //将球体放在场景中 // 最开始我们确实创建了一个相机，但是并没有将之放在场景中，所以我们是看不到的。 camera.position.x = -30; camera.position.y = 4; camera.position.z = 2; // 这样就确定了其位置 camera.lookAt(scene.position); // 指定观察的方位 var dom = document.querySelector(".webgl_output"); dom.append(renderer.domElement); // renderer是一个渲染器，将渲染器得到的dom添加到div中 // 将camera放在场景中，这样就可以看到了 renderer.render(scene,camera); // }); </script> </body> </html> <!-- 注意点material不要拼错了，16进制的是0x，而不是ox -->