ThreeJS入门（二）绘制3d图形
搭好了 ThreeJS 场子，接着自然就是踢馆——哦不，是绘制图形了！本讲从画一个静态的立方体入手，看看如何实现。
在 ThreeJS 的世界中，图像 = 几何体 + 材质，图像就是最终绘制成品，叫 Mesh，几何体叫 Geometry，是图像的框架，材质叫 Material，是图像的血肉。绘制过程，以本讲示例为例，可以这么理解：在场景 Scene 中，用特定的材质，比如不需要光照也能看得见的 ThreeJS 特制材料 MeshNormalMaterial，安装到指定的几何体框架，比如一个立方体 BoxGeometr。来看代码：
// ... 搭建场子代码略 var geometry = new THREE.BoxGeometry(); // 创建立方体几何体 var material = new THREE.MeshNormalMaterial(); // 创建自带颜色、有光泽的材质 var mesh = new THREE.Mesh(geometry, material); // 将几何体和材质组合起来 scene.add(mesh); // 将成品加入到场景中 renderer.render(scene, camera); // 渲染器渲染结果
这里，第一步，将 ThreeJS 封装的对象 THREE.BoxGeometry 即立方几何体实例化，这就是创建一个立方体的框架，并把该实例化的几何体命名为小写的 geometry；第二步，也是通过实例化 ThreeJS 封装对象的方式创建了自带光泽、颜色的材质 —— 法向量材质，将实例化的材质对象命名为小写的 material；第三步，通过 THREE.Mesh 对象的实例化创建了最终成品，即立方体图像，命名为小写的 mesh。这几步：
一、立方体几何体的创建可以带一些参数，常用到的参数时 x、y、z，即立方体在xyz三个方向上的尺寸，缺省时默认是 (1, 1, 1)，可以修改试试。
二、材质在创建时可以使用 JS 的 { options } 方式配置参数，例如线框化、双面渲染，{ wireframe: true, side: THREE.DoubleSide }。一般来说，不同的材质配置方式不尽相同，但所有的材质都有共性，具体的内容可以自行网查。
三、组装成最终成品，即实例化 THREE.Mesh 则不能缺省参数，必须指定为前面创建的几何体和材质的变量名称。
第四步，注意绘制好的的成品 mesh 要加入到场景；最后一步，咔嚓，按下快门，即渲染器将场景和相机合作的结果渲染出来。
不过以上代码的运行结果可能会令人失望：只看到一个矩形。没关系，它的的确确是一个立方体，只是由于角度的问题让我们看不全它的真实面貌。我们可以使用图像的旋转方法 rotateX/Y/Z 将立方体 mess 在 xyz 方向都做一些调整，效果将十分完美。以下是完整代码：
<script type="module">
import * as THREE from 'https://esm.sh/three';
var scene = new THREE.Scene;
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
camera.lookAt(0, 0, 0);
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh(geometry, material);
mesh.rotateX(0.5);
mesh.rotateY(0.5);
mesh.rotateZ(-0.5);
scene.add(mesh);
renderer.render(scene, camera);
</script>
评论列表 [0条]
