ThreeJs：二、简单立方体

本文主要是介绍ThreeJs：二、简单立方体，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

在第一节中，我们介绍了创建一个三维对象所需要的基本要素。下面我们就要开始尝试做一个旋转的立方体了。

---

准备工作

• 引入three.js的库文件

---

• 创建场景(Scene)
  创建一个场景，并且获取浏览器屏幕的宽高。

---

• 
  
• 创建照相机(Camera)
  

这里创建的是一个远景相机(PerspectiveCamera)，为什么选择远景相机进行投影呢?，因为远景投影也称之为透视投影。这个是我们人眼观察世界的模式。

构造器介绍：
PerspectiveCamera( fov, aspect, near, far )
fov - 从上往下的观察角度
aspect - 宽高比
near - 相机近裁剪面
far  - 相机远裁剪面

---

• 设置物理材质
  物理材质相当于物体表面的颜色，花纹等特征。
  基础物体材料（MeshBasicMaterial）:一个以简单着色（平面或线框）方式来绘制几何形状的材料。
  图示：
  

---

• 创建物体(Mesh)
  

构造器介绍:
Mesh( geometry, material )
geometry - 一个几何模型的实例。
material - 一个材料的实例，用来定义对象的外观。

---

• 创建渲染器(Render)

方法介绍:
setSize
调整输出canvas尺寸（宽度，高度），要考虑设备像素比，并且设置视口（viewport）以匹配该尺寸。
render ( scene, camera, renderTarget, forceClear )
使用相机渲染一个场景。

---

• 进行渲染

---

效果图

---

代码预览：

/* eslint-disable */
(function() {// 创建场景var scene = new THREE.Scene();var width = window.innerWidth;var height = window.innerHeight;// 相机var camera = new THREE.PerspectiveCamera(40, 800/ 600, 1, 1000);camera.position.set(200,200,200);camera.lookAt(scene.position);// 材质var geometry = new THREE.CubeGeometry(100,100,100);var material = new THREE.MeshBasicMaterial({color: 0xfff00a});// 物体var cube = new THREE.Mesh(geometry, material);  scene.add(cube);// 灯光var light = new THREE.PointLight({color:0xf00fff});light.position.set(300,400,200);scene.add(light);// 渲染器var renderer = new THREE.WebGLRenderer();renderer.setSize(800, 600);document.body.appendChild(renderer.domElement);renderer.render(scene, camera);// 动画旋转function render() {requestAnimationFrame(render);cube.rotation.x += 0.1;cube.rotation.y += 0.1;renderer.render(scene, camera);}// render();
})();

---

资源网站

threejs源码地址：https://github.com/mrdoob/three.js
threejs API文档：https://hypnosnova.github.io/
threejs中文教程：http://techbrood.com/threejs/docs/

这篇关于ThreeJs：二、简单立方体的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---