three.js 02-04 之网格对象函数及属性

最新推荐文章于 2025-05-08 15:13:00 发布

zhulx_sz

最新推荐文章于 2025-05-08 15:13:00 发布

阅读量702

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhulx_sz/article/details/78449416

threejs 同时被 3 个专栏收录

59 篇文章

订阅专栏

webgl

59 篇文章

订阅专栏

three.js

59 篇文章

订阅专栏

本文介绍了Three.js中Mesh对象的常用属性，包括position、rotation、scale、translate和visible等，并通过一个完整的示例展示了如何使用这些属性来动态调整3D对象的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇中，我们对自定义几何体的相关知识做了一个简单介绍，并讲解了如何克隆（复制）一个几何体。本篇我们要介绍的是关于 Mesh 网格对象常用的一些相关函数和属性。照例，我们先上一个完整的示例，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>示例 02.04 - 网格对象属性</title>
	<script src="../build/three.js"></script>
	<script src="../build/js/ParametricGeometries.js"></script>
	<script src="../build/js/QuickHull.js"></script>
	<script src="../build/js/geometries/ConvexGeometry.js"></script>
	<script src="../build/js/controls/OrbitControls.js"></script>
	<script src="../build/js/libs/stats.min.js"></script>
	<script src="../build/js/libs/dat.gui.min.js"></script>
	<script src="../jquery/jquery-3.2.1.min.js"></script>
    <style>
        body {
            /* 设置 margin 为 0，并且 overflow 为 hidden，来完成页面样式 */
            margin: 0;
            overflow: hidden;
        }
		/* 统计对象样式 */
		#Stats-output {
			position: absolute;
			left: 0px;
			top: 0px;
		}
    </style>
</head>
<body>

<!-- 用于 WebGL 输出的 Div -->
<div id="WebGL-output"></div>
<!-- 用于统计 FPS 输出的 Div -->
<div id="Stats-output"></div>

<!-- 运行 Three.js 示例的 Javascript 代码 -->
<script type="text/javascript">

	var scene;
	var camera;
	var render;
	var controls;
	var stats;
	
	var guiParams;
	var gui;
	
	var plane;
	var mesh;

    // 当所有元素加载完毕后，就执行我们 Three.js 相关的东西
    $(function() {
		stats = initStats();
		
		scene = new THREE.Scene();
		camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 2147483647
		camera.position.set(-20, 25, 20);
		render = new THREE.WebGLRenderer( {antialias: true} ); // antialias 抗锯齿
		render.setSize(window.innerWidth, window.innerHeight);
		render.setClearColor(0xEEEEEE);
		render.shadowMap.enabled = true; // 允许阴影投射
		$('#WebGL-output')[0].appendChild(render.domElement);
		window.addEventListener('resize', onWindowResize, false);
		var target = new THREE.Vector3(5, 0, 0);
		controls = new THREE.OrbitControls(camera, render.domElement);
		controls.target = target; // 解决 camera.lookAt(x, y, z) 失效问题
		camera.lookAt(target);
		
		scene.add(new THREE.AxisHelper(20));// 加入坐标轴
		
		// 加入一个平面
		var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
		var planeMaterial = new THREE.MeshLambertMaterial( {color: 0xFFFFFF} );
		plane = new THREE.Mesh(planeGeometry, planeMaterial);
		plane.rotation.x = -0.5 * Math.PI; // 沿着 X轴旋转-90°
		plane.position.x = 0;
		plane.position.y = 0;
		plane.position.z = 0;
		plane.receiveShadow = true; // 几何平面接收阴影
		scene.add(plane);
		
		// 加入一个环境光源
		var ambientLight = new THREE.AmbientLight(0x090909);
		scene.add(ambientLight);
		
		// 加入一个聚光灯光源
		// 注：基础材质 MeshBasicMaterial 不会对光源产生反应，因此要改用 MeshLambertMaterial 或 MeshPhongMaterial 材质才有效果
		var spotLight = new THREE.SpotLight( 0xFFFFFF);
		spotLight.position.set(-40, 40, 50);
		spotLight.castShadow = true; // 光源产生阴影
		spotLight.shadow.mapSize.width = 1024; // 必须是 2的幂，默认值为 512
		spotLight.shadow.mapSize.height = 1024; // 必须是 2的幂，默认值为 512
		scene.add(spotLight);
		
		// 定义 gui 控制参数
		guiParams = new function() {
			function addControlPoint(x, y, z) {
				var controlPoint = new function() {
					this.x = x;
					this.y = y;
					this.z = z;
				};
				return controlPoint;
			}
			
			this.scale = addControlPoint(1, 1, 1);
			this.position = addControlPoint(0, 4, 0);
			this.rotation = addControlPoint(1, 1, 1);
			this.translation = addControlPoint(0, 0, 0);
			this.visible = true;
		}
		
		// 定义 gui 并绑定参数
		gui = new dat.GUI();
		var folder = gui.addFolder('scale');
		folder.add(guiParams.scale, 'x', 0, 5);
		folder.add(guiParams.scale, 'y', 0, 5);
		folder.add(guiParams.scale, 'z', 0, 5);
		folder = gui.addFolder('position');
		folder.add(guiParams.position, 'x', -10, 10);
		folder.add(guiParams.position, 'y', -4, 20);
		folder.add(guiParams.position, 'z', -10, 10);
		folder = gui.addFolder('rotation');
		folder.add(guiParams.rotation, 'x', -4, 4);
		folder.add(guiParams.rotation, 'y', -4, 4);
		folder.add(guiParams.rotation, 'z', -4, 4);
		folder = gui.addFolder('translate');
		folder.add(guiParams.translation, 'x', -10, 10);
		folder.add(guiParams.translation, 'y', -10, 10);
		folder.add(guiParams.translation, 'z', -10, 10);
		
		gui.add(guiParams, 'visible');
		
		var material = new THREE.MeshLambertMaterial({color: 0x44ff44});
        var geom = new THREE.BoxGeometry(5, 8, 3);
        mesh = new THREE.Mesh(geom, material);
        mesh.position.y = 4;
        mesh.castShadow = true;
        scene.add(mesh);
		
		renderScene();
    });
	
	/** 初始化 stats 统计对象 */
	function initStats() {
		stats = new Stats();
		stats.setMode(0); // 0 为监测 FPS；1 为监测渲染时间
		$('#Stats-output').append(stats.domElement);
		return stats;
	}
	
	/** 渲染场景 */
	function renderScene() {
		stats.update();
		updateMesh(); // 更新物体
		requestAnimationFrame(renderScene);
		render.render(scene, camera);
	}
	
	/** 当浏览器窗口大小变化时触发 */
	function onWindowResize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		render.setSize(window.innerWidth, window.innerHeight);
	}
	
	/** 更新物体 */
	function updateMesh() {
		mesh.visible = guiParams.visible;
		mesh.scale.set(guiParams.scale.x, guiParams.scale.y, guiParams.scale.z);
		mesh.position.set(guiParams.position.x, guiParams.position.y, guiParams.position.z);
		mesh.rotation.set(guiParams.rotation.x, guiParams.rotation.y, guiParams.rotation.z);
		mesh.translateX(guiParams.translation.x);
		mesh.translateY(guiParams.translation.y);
		mesh.translateZ(guiParams.translation.z);
	}

</script>
</body>
</html>

在这个示例中，你会看到一些下拉菜单，通过这个菜单你可以修改如 scale 比例、position 位置、rotation 旋转、translation 转移及 visible 可见等属性，而且立即就可以看到修改结果。现在让我们来逐一了解这些属性或者相关函数：

position - 通过这个属性我们可以改变对象在场景中的 x, y, z 坐标上的位置。需要注意的是，一个对象的位置是相对于其父对象来讲的，而父对象通常是你向其添加对象的那个场景。一般有以下几种方式来改变对象的位置：第一种是 mesh.position.x = 5, mesh.position.y = 6, mesh.position.z = 7；第二种是示例中用到的那种方式；第三种是 mesh.position.setX(1), mesh.position.setY(1), mesh.position.setZ(1)；
rotation - 通过这个属性我们可以改变对象绕轴 x, y, z 旋转的弧度。旋转一周的弧度是 2 * Math.PI。方向的确定是用右手来测定的，方法是用右手握住要绕转的轴，拇指方向与轴的箭头方向保持一致，那么四指所指的方向就是正方向；
scale - 通过这个属性我们可以改变对象在 x, y, z 轴方向的比例。即沿指定轴缩放对象。当设的值小于 1 时，就是缩小；反之，就是放大；
translate - 通过这个属性我们一样可以达到类似 position 的效果。但是 translate 函数不是定义对象想要放在哪里的绝对位置，而是定义相对于当前位置对象移动的量。举个例子，假定场景中的一个立方体的位置是 (1, 2, 3)，接下来我们把对象沿着 x 轴平移 4 个单位，即 translateX(4)，那么它现在的位置就变为了(5, 2, 3)。如果想要恢复它原来的位置，则可以调用 translateX(-4) 即可完成。当然直接调用 position.setX(1) 亦可达到相同效果；
visible - 通过它来设置对象在场景中的可见性。true 为可见；false 为不可见；

未完待续···