webGL入门学习之创建场景
Posted shanaCode
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webGL入门学习之创建场景相关的知识，希望对你有一定的参考价值。
创造一个场景
首先，简单的介绍Three.js
为了能够用Three.js显示任何东西，我们需要三样东西：场景、照相机和渲染器，这样我们就可以用相机渲染场景。如果还没有three.js可以通过https://threejs.org/build/three.js获取
下面是使用three.js制作一个旋转的立方体
起动前（准备）
在使用Three.js之前，您需要在某个地方显示它。也就是我们的html页面
<!DOCTYPE html><html> <head> <meta charset=utf-8> <title>My first three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script ></script> <script> // Our javascript will go here. </script> </body></html>
这样，我们就可以把所有的代码都写入<script>
第一步，创造场景
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 ); //设置希望它呈现应用程序的大小
//renderer.setSize( window.innerWidth, window.innerHeight,false ); 将以半分辨率呈现应用程序
document.body.appendChild( renderer.domElement );
解释一下这里发生了什么
在Three.js里面，有几种不同的相机。现在，让我们使用PerspectiveCamera。
PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )，第一个值75代码了距离你视野的一个位置；第二个是纵横比；第三个和第四个指的是“近距”和“远距离”；
现在添加立方体
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
geometry:要创建一个立方体，我们需要一个盒子几何。这是一个包含立方体的所有点(顶点)和填充(面)的对象。
material:除了几何学之外，我们还需要一种材料来给它着色。(这与CSS或Photoshop(十六进制颜色)中颜色的工作方式相同。)
cube:我们需要的第三件事是网格。网格是一个物体，它接受一个几何学，并将一种材料应用到它上，然后我们可以将它插入到我们的场景中，并自由地移动。
camera.position.z:默认情况下，当我们调用scene.add()时，我们添加的内容将被添加到坐标(0，0，0)中。这将导致相机和立方体相互位于一起。为了避免这一点，我们只需将摄像机移出一点。
渲染场景
如果您将上面的代码复制到我们前面创建的html文件中，您将无法看到任何东西。这是因为我们实际上还没有呈现任何内容。为此，我们需要所谓的呈现或动画循环。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
这将创建一个循环，使渲染器在每次刷新屏幕时都绘制场景(在一个典型的屏幕上，这意味着每秒60次)
动画立方体
如果将以上所有代码插入到您在我们开始之前创建的文件中，您应该看到一个绿色框。
让我们通过旋转它使它变得更有趣
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
这将运行每帧(通常是每秒60次)，并给立方体一个很好的旋转动画。基本上，任何你想要移动或改变，当应用程序运行时，必须通过动画循环。
最后
恭喜你！你现在已经完成了你的第一个3ree.js应用程序。
完整的代码如下：
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script ></script>
<script>
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 );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
以上是关于webGL入门学习之创建场景的主要内容，如果未能解决你的问题，请参考以下文章