threeJS基础学习---创建一个场景（Creating a scene）

2022-04-19 11:03:12 阅读：260 来源： 互联网

标签：threeJS cube const Creating THREE --- window renderer new

开始之前

在开始使用three.js之前，你需要一个地方来显示它。将下列HTML代码保存为你电脑上的一个HTML文件，同时将three.js复制到该HTML文件所在的目录下的lib/目录下，然后在你的浏览器中打开这个HTML文件。在js目录下创建creatingaScene.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="lib/three.js"></script>
    <script src='js/creatingaScene.js'></script>
</body>

</html>

创建一个场景

//creatingaScene.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
 45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

我们现在建立了场景、相机和渲染器。
threejs中相机的理解:
相机扮演的角色和我们看电影时放映机的角色差不多，照相机不断的拍摄我们创建好的场景，然后通过渲染器渲染到屏幕中，最后在屏幕中展现出创建的3d场景。一般情况下，照相机是禁止的，但是如果我们想看到我们创建场景中更多的视野的时候，可以通过不断的移动照相机来实现，如果一定要拿某一样东西来比喻，那用我们的眼睛是再适合不过的了。three.js中提供了两种基本的照相机，分别是正投影相机OrthographicCamera和透视投影相机PerspectiveCamera。透视投影照相机对应投影到的物体的大小是随着距离逐渐变小的，而正投影照相机投影到的物体大小是不受距离影响的。两者区别可以通过下图简单说明：

const camera = new THREE.PerspectiveCamera(
 45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

上述代码中，new THREE.PerspectiveCamera构造函数用来创建透视投影相机，该构造函数总共有四个参数，分别是fov，aspect，near，far 。fov表示摄像机视锥体垂直视野角度，最小值为0，最大值为180，默认值为50，实际项目中一般都定义45，因为45最接近人正常睁眼角度；aspect表示摄像机视锥体长宽比，默认长宽比为1，即表示看到的是正方形，实际项目中使用的是屏幕的宽高比；near表示摄像机视锥体近端面，这个值默认为0.1，实际项目中都会设置为1；far表示摄像机视锥体远端面，默认为2000，这个值可以是无限的，说的简单点就是我们视觉所能看到的最远距离。

除了上述四个基本属性之外，透视投影相机六个属性，分别是：filmGauge，filmOffset，focus，isPerspectiveCamera，view，zoom。这几个参数在实际应用中很少用到，基本都保持默认值。如果想了解各属性的意义及完成的功能可以通过官方文档去了解。

添加立方体

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

要创建一个立方体，我们需要一个BoxGeometry（立方体）对象. 这个对象包含了一个立方体中所有的顶点（vertices）和面（faces）。未来我们将在这方面进行更多的探索。

接下来，对于这个立方体，我们需要给它一个材质，来让它有颜色。Three.js自带了几种材质，在这里我们使用的是MeshBasicMaterial。所有的材质都存有应用于他们的属性的对象。在这里为了简单起见，我们只设置一个color属性，值为0x00ff00，也就是绿色。这里所做的事情，和在CSS或者Photoshop中使用十六进制(hex colors)颜色格式来设置颜色的方式一致。

第三步，我们需要一个Mesh（网格）。网格包含一个几何体以及作用在此几何体上的材质，我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动。

默认情况下，当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。

渲染场景

function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();

使立方体动起来

在开始之前，如果你已经将上面的代码写入到了你所创建的文件中，你可以看到一个绿色的方块。让我们来做一些更加有趣的事 —— 让它旋转起来。
将下列代码添加到animate()函数中renderer.render调用的上方：

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

总结

这一小节我们创建场景、相机和渲染器，并通过threeJ创建了一个立方体，通过cube.rotation 这个函数将立方体的转动。
creatingaScene.js 完整的代码如下

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
 45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

标签：threeJS,cube,const,Creating,THREE,---,window,renderer,new
来源： https://www.cnblogs.com/zaisanshuiyifang/p/16164205.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。