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

来源：互联网发布：淘宝seo常见的问题编辑：程序博客网时间：2024/06/01 09:08

上一篇中，我们对自定义几何体的相关知识做了一个简单介绍，并讲解了如何克隆（复制）一个几何体。本篇我们要介绍的是关于 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); // 2147483647camera.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的幂，默认值为 512spotLight.shadow.mapSize.height = 1024; // 必须是 2的幂，默认值为 512scene.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 为不可见；

未完待续···

阅读全文

1 0