ThreeJS

微信截图_20220609164136.png

创建一个场景

为了真正能够让你的场景借助three.js来进行显示，我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景。

var scene = new THREE.Scene(); //创建场景

创建相机

相机决定了场景中那个角度的景色会显示出来，相当于人的眼睛，Three有几种不同的相机，在这我用的透视相机（THREE.perspectiveCamera）

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );//创建相机camera 

第一个属性是视野角度（FOV）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的值是一个角度。

第二个值是长宽比（aspect ratio）。 也就是你用一个物体的宽除以它的高的比值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。

后两个值是远剪切面和近剪切面。 也就是说当物体所在的位置比摄像机的远剪切面远或者所在位置比近剪切面近的时候，该物体超出的部分将不会被渲染到场景中。

渲染场景

渲染器这个元素添加到我们的HTML文档中,通过元素来将场景展现

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 );

创建BoxGeometry（立方体），然后我们使用的是MeshBasicMaterial。所有的材质是都一个将会被应用于立方体的属性对象。在这里为了简单起见,我们只设置一个color属性，值为0x00ff00。需要一个Mesh（网格），网格是包含有一个几何体以及应用在在此几何体上的材质的对象。最后，通过调用scene.add()，将物体添加到场景中，默认的物体会被添加到场景坐标为(0,0,0)的位置。