Three.JS
Posted Comedy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Three.JS相关的知识，希望对你有一定的参考价值。
1.Three.JS我的demo版本1
<!DOCTYPE html> <html> <head> <title>My first three.js app</title> <script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(document).ready(function(){ $(".loading").fadeOut(); }) </script> <style> body {margin: 0;} canvas {width: 100%;height: 100%} </style> </head> <body > <div class="loading" style=" position: absolute; left: 0; right: 0; margin: 0 auto; top: 30%; text-align: center; color: #009999;"> <span style="border: 1px solid #009999; border-radius: 20px; padding: 5px 10px;">页面加载中.....</span> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.js"></script> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); //75————视野角度（FOV）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的值是一个角度。 //window.innerWidth/window.innerHeight————长宽比（aspect ratio）。也就是你用一个物体的宽除以它的高的比值。 //0.1————远剪切面 //1000————近剪切面 //远剪切面和近剪切面————也就是说当物体所在的位置比摄像机的远剪切面远或者所在位置比近剪切面近的时候，该物体超出的部分将不会被渲染到场景中。 var renderer = new THREE.WebGLRenderer(); // var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); //去掉背景色 renderer.setSize(window.innerWidth / 2, window.innerHeight / 2); document.body.appendChild(renderer.domElement); //renderer————渲染器————除了我们在这里用到的WebGLRenderer渲染器之外，Three.js同时提供了其他几种渲染器， //当用户所使用的浏览器过于老旧，或者由于其他原因不支持WebGL时，可以使用这几种渲染器进行降级。 var geometry = new THREE.BoxGeometry(1, 1, 1); //BoxGeometry是四边形的原始几何类，它通常使用构造函数所提供的“width”、“height”、“depth”参数来创建立方体或者不规则四边形。 var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); //基础网格材质(MeshBasicMaterial) 一个以简单着色（平面或线框）方式来绘制几何体的材质。 var cube = new THREE.Mesh(geometry, material); //网格（Mesh）表示基于以三角形为polygon mesh（多边形网格）的物体的类。 scene.add(cube); camera.position.z = 5; //设置镜头距离 var animate = function() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); }; animate(); </script> </body> </html>
效果图：
以上是关于Three.JS的主要内容，如果未能解决你的问题，请参考以下文章