Three.js实例 web3d模型

Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。

简单点的说法：WebGL可以看成是浏览器给我们提供的接口，在javascript中可以直接用这些API进行3D图形的绘制；而Three.js就是在这些接口上又帮我们封装得更好用一些。

既然有了WebGL，我们为什么还需要Three.js？
这是因为WebGL门槛相对较高，需要相对较多的数学知识。虽然WebGL提供的是面向前端的API，但本质上WebGL跟前端开发完全是两个不同的方向，知识的重叠很少。相关性只是他们都在web平台上，都是用javascript而已。一个前端程序员或许还熟悉解析几何，但是还熟悉线性代数的应该寥寥无几了（比如求个逆转置矩阵试试？），更何况使用中强调矩阵运算中的物理意义，这在教学中也是比较缺失的。
因此，前端工程师想要短时间上手WebGL还是挺有难度的。
于是，Three.js对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本。并且，几乎没有损失WebGL的灵活性。
因此，从Three.js入手是值得推荐的，这可以让你在较短的学习后就能面对大部分需求场景。

下面是一个demo：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>多样式旋转体</title>
        <script src="http://gamingJS.com/Three.js"></script>
        <script src="http://gamingJS.com/ChromeFixes.js"></script>
    </head>
    <body>
        
        
        <script>
            window.onload=function(){
                
//            定义3个基本对象(场景（scene）, 相机（camera）, 以及一个渲染器（renderer）)
              var camera, scene, renderer;
              var geometry, material, mesh;
            
              init();
              animate();
            
              function init() {
                scene = new THREE.Scene();
            
                var aspect = window.innerWidth / window.innerHeight ;
                camera = new THREE.PerspectiveCamera(75, aspect, 1, 1000);
                /*
                     第一个属性75设置的是视角（field of view）;
                     第二个属性设置的是相机拍摄面的长宽比（aspect ratio）;
                     接下来的2个属性是近裁剪面（near clipping plane） 和 远裁剪面（far clipping plane）
                 * */
//                设置颜色和相机视角
                camera.position.z = 500;
                scene.add(camera);
            //                创建一个几何模型
                geometry = new THREE.TorusKnotGeometry(150, 50 ,100,100,1);
//                geometry = new THREE.CubeGeometry(150, 50 ,100,100,1);
//                geometry = new THREE.SphereGeometry(150, 50 ,100);
//                geometry = new THREE.TorusKnotGeometry(150, 50 ,100);
//                geometry = new THREE.TorusGeometry(150, 50 ,100);
//                geometry = new THREE.TorusGeometry(150, 50 ,100,100);

//                材料
                material = new THREE.MeshNormalMaterial({
                  color: 0xf32179,
                });
                // 网孔基础材料
//                material = new THREE.MeshBasicMaterial({
//                  color: 0xf32179,
//                });
//             网孔：mesh
                mesh = new THREE.Mesh(geometry, material);
                scene.add(mesh);
            
                renderer = new THREE.CanvasRenderer();
                renderer.setClearColorHex(0xffffff);
                renderer.setSize(window.innerWidth, window.innerHeight);
            
                document.body.style.margin = 0;    
                document.body.style.overflow = 'hidden';
                document.body.appendChild(renderer.domElement);
              }
            
              function animate() {
                requestAnimationFrame(animate);
            
                mesh.rotation.x = Date.now() * 0.0001;
                mesh.rotation.y = Date.now() * 0.001;
                mesh.rotation.z = Date.now() * 0.001;
            
                renderer.render(scene, camera);
              }
            }
        </script>
    </body>
</html>

Three.js实例 web3d模型

猜你喜欢