案例:Three 组对象Group、层级模型3-世界坐标     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="UTF-8">
5
  <style>
6
    body {
7
      margin: 0;
8
      overflow: hidden;
9
      /* 隐藏body窗口区域滚动条 */
10
    }
11
  </style>
12
  <!--引入three.js三维引擎-->
13
  <script src="/js/threejs/threer92.js"></script>
14
  <script src="/example/threejs/solarsystem/files/OrbitControls.js"></script>
15
</head>
16
17
<body>
18
  <script>
19
    //创建场景
20
    var scene = new THREE.Scene();
21
22
    var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry 
23
    var material = new THREE.MeshLambertMaterial({
24
        color: 0x0000ff,
25
        // wireframe:true,//线框模式渲染
26
    }); //材质对象Material
27
      
28
     // 渲染模式
29
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
30
    //scene.add(mesh); //网格模型添加到场景中
31
32
var mesh = new THREE.Mesh(geometry, material);
33
// mesh的本地坐标设置为(70, 0, 0)
34
mesh.position.set(50, 0, 0);
35
var group = new THREE.Group();
36
// group本地坐标设置和mesh一样设置为(50, 0, 0)
37
// mesh父对象设置position会影响得到mesh的世界坐标
38
group.position.set(70, 0, 0);
39
group.add(mesh);
40
scene.add(group);
41
42
// .position属性获得本地坐标
43
console.log('本地坐标',mesh.position);
44
45
// getWorldPosition()方法获得世界坐标
46
//该语句默认在threejs渲染的过程中执行,如果渲染之前想获得世界矩阵属性、世界位置属性等属性,需要通过代码更新
47
scene.updateMatrixWorld(true);
48
var worldPosition = new THREE.Vector3();