案例:Three 组对象Group、层级模型     状态:可编辑再运行    进入竖版
 运行结果 
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
23
      //创建两个网格模型mesh1、mesh2
24
var geometry = new THREE.BoxGeometry(50, 50, 50);
25
var material = new THREE.MeshLambertMaterial({color: 0x0000ff});
26
var group = new THREE.Group();
27
var mesh1 = new THREE.Mesh(geometry, material);
28
var mesh2 = new THREE.Mesh(geometry, material);
29
mesh2.translateX(75);
30
//把mesh1型插入到组group中,mesh1作为group的子对象
31
group.add(mesh1);
32
//把mesh2型插入到组group中,mesh2作为group的子对象
33
group.add(mesh2);
34
//把group插入到场景中作为场景子对象
35
scene.add(group);
36
    
37
//沿着Y轴平移mesh1和mesh2的父对象,mesh1和mesh2跟着平移
38
group.translateY(100);
39
//父对象缩放,子对象跟着缩放
40
group.scale.set(2,2,2);
41
//父对象旋转,子对象跟着旋转
42
group.rotateY(Math.PI/6)
43
44
45
// 方向光
46
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
47
// 设置光源位置
48
directionalLight.position.set(60, 100, 40);