ThreeJS入门（二）绘制3d图形

马黑黑 · 发表于 2025-5-22 20:26

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

搭好了 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>