便利,查找某个模型对象

  1.   经常在开发过程中,我们需要查找某个组,或者场景中的某个对象,那么可以通过id或者name调用getObjectById或者getObjectByName进行查找,调用方可以是场景,例如:
  1. scene.getObjectByName('beline')

这样就是在整个场景中查找name为beline的模型对象.这个时候就可以通过获取到该对象进一步设置
例如,我们把获取到的对象修改一个颜色,需要注意的是,在改变模型的属性后记得调用渲染函数.

修改模型属性

  1. let belineobj = scene.getObjectByName('beline')
  2. console.log(belineobj, 'belineobj')
  3. belineobj.material.color.set(0xffffff);
  4. render();

完整代码

从下面代码中我们可以看出,初始化的3D方块的颜色为蓝色,在渲染过后查找到该模型对象,设置颜色为白色.由于我们在render函数中持续渲染该场景,因此最后我们肉眼看到的是一个白色的盒子

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>OrbitControls 鼠标控制交互</title>
  7.   <style>
  8.     body {
  9.       margin: 0;
  10.       overflow: hidden;
  11.       /* 隐藏body窗口区域滚动条 */
  12.     }
  13.   </style>
  14.   <!--引入three.js三维引擎-->
  15.   <script src="./js-r100/three.js"></script>
  16.   <script src="./js-r100/controls/OrbitControls.js"></script>
  17. </head>
  19. <body>
  20.   <script>
  21.     /**
  22.      * 创建场景对象Scene
  23.      */
  24.     var scene = new THREE.Scene();
  25.     /**
  26.      * 创建网格模型
  27.      */
  28.     // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
  29.     var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
  30.     var material = new THREE.MeshLambertMaterial({
  31.       color: 0x0000ff
  32.     }); //材质对象Material
  33.     var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
  34.     mesh.name = "beline"
  35.     scene.add(mesh); //网格模型添加到场景中
  36.     /**
  37.      * 光源设置
  38.      */
  39.     //点光源
  40.     var point = new THREE.PointLight(0xffffff);
  41.     point.position.set(400, 200, 300); //点光源位置
  42.     scene.add(point); //点光源添加到场景中
  43.     //环境光
  44.     var ambient = new THREE.AmbientLight(0x444444);
  45.     scene.add(ambient);
  46.     /**
  47.      * 相机设置
  48.      */
  49.     var width = window.innerWidth; //窗口宽度
  50.     var height = window.innerHeight; //窗口高度
  51.     var k = width / height; //窗口宽高比
  52.     var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
  53.     //创建相机对象
  54.     var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
  55.     camera.position.set(200, 300, 200); //设置相机位置
  56.     camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
  57.     /**
  58.      * 创建渲染器对象
  59.      */
  60.     var renderer = new THREE.WebGLRenderer();
  61.     renderer.setSize(width, height);//设置渲染区域尺寸
  62.     renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
  63.     document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
  64.     //- 渲染函数
  65.     function render() {
  66.       //执行渲染操作   指定场景、相机作为参数
  67.       renderer.render(scene, camera);
  68.       requestAnimationFrame(render)
  69.     }
  70.     render();
  71.     //- 添加鼠标对视觉相机的操作
  72.     let controls = new THREE.OrbitControls(camera);
  73.     //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
  74.     // controls.addEventListener('change', render, { passive: true });
  76.     let belineobj = scene.getObjectByName('beline')
  77.     console.log(belineobj, 'belineobj')
  78.     belineobj.material.color.set(0xffffff);
  80.   </script>
  81. </body>
  83. </html>