用这种方法，你也可以创建threejs场景
Posted 砖人专语
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用这种方法，你也可以创建threejs场景相关的知识，希望对你有一定的参考价值。
本篇教程通过一个示例简单的介绍了threejs主要概念，以及在threejs中场景的呈现逻辑。最后有示例的代码，可以自己运行尝试
在使用three.js之前，你需要有一个地方来呈现它。
可以将下面代码保存，并且用浏览器打开
<!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 src="js/three.js"></script><script>// Our javascript will go here.</script></body></html>
下面所有的代码都会在script标签里面
创建场景
要想使用three.js来展示任何物体，我们需要三样东西: scene, camera and renderer, 即场景、相机和渲染器。我们用相机来渲染场景。
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 );
这段代码里，我们创建了场景，创建了相机和渲染器。
在three.js里有不同的相机，这里我们先用透视相机，即PerspectiveCamera，创建PerspectiveCamera的第一个参数是视野，field of view，FOV定义了在任何一刻我们能够看到的场景的范围，单位是度数。
第二个参数是纵横比，aspect ratio，基本上正常都会设置成宽度比高度，反之的话就会看到图像是被压扁的效果。
接下来的两个属性是近剪裁平面和远剪裁平面，near and far，这意味着比far更远或者比near更近的物体是不会被渲染出来的。相机只渲染介于两者之间的物体。现在你可以先不必考虑这一点，但是在你做自己的程序时，你可能会设置成合适的值来提升性能。
下一个值就是渲染器renderer,这里就是魔术开始的地方。除了我们这里使用的WebGLRenderer以外，three.js还有其他的一些渲染器，用于一些针对浏览器的备用或者由于某些原因不支持webgl的情况。
除创建渲染器实例之外，我们还需要设置我们希望它渲染我们的应用程序的大小。通常来讲，这个大小是浏览器窗口的宽度和高度。对于性能密集型应用程序，您还可以为setSize提供较小的值，例如window.innerWidth / 2和window.innerHeight / 2，这将使应用程序呈现为一半大小。
如果你希望保持应用程序的大小但是以较低的分辨率渲染它，可以通过调用setSize并将其作为updateStyle（第三个参数）来调用。例如**setSize(window.innerWidth/2, window.innerHeight/2, false)**将会以canvas100%的宽度和高度渲染，但是分辨率会减少到一半。
————————————————
最后，我们把renderer元素添加进我们的HTML文档流里，这是渲染器用canvas元素来向我们展示场景。
-END-
⬇ 更多精彩内容请点击“阅读原文”了解~
以上是关于用这种方法，你也可以创建threejs场景的主要内容，如果未能解决你的问题，请参考以下文章