几何体-网络模型，HTML代码在线实时编辑、实时预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13

            
            <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="./main.js"></script>
</body>
</html>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

            
            import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

const vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    80, 0, 0, //顶点2坐标
    80, 80, 0, //顶点3坐标

    // 0, 0, 0, //顶点4坐标   和顶点1位置相同
    // 80, 80, 0, //顶点5坐标  和顶点3位置相同
    0, 80, 0, //顶点6坐标
]);

// 每个顶点的法线数据和顶点位置数据一一对应
const normals = new Float32Array([
    0, 0, 1, //顶点1法线( 法向量 )
    0, 0, 1, //顶点2法线
    0, 0, 1, //顶点3法线
    // 0, 0, 1, //顶点4法线
    // 0, 0, 1, //顶点5法线
    0, 0, 1, //顶点6法线
]);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 3000);
const renderer = new THREE.WebGLRenderer();

// const geometry = new THREE.BufferGeometry(); // 缓冲类型几何体，可自定义任何形状的几何体
const geometry = new THREE.SphereGeometry( 50, 32, 16 ); // 球体几何体细分数，参数2、3分别代表宽、高度两个方向上的细分数
const attribue = new THREE.BufferAttribute(vertices, 3); // 3个为一组，表示一个顶点的xzy坐标
const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff, //材质颜色
    side: THREE.DoubleSide, //默认只有正面可见
});
const line = new THREE.LineLoop(geometry, material); // 线模型对象：Line、LineLoop、LineSegments
const axesHelper = new THREE.AxesHelper(150);

const controls = new OrbitControls(camera, renderer.domElement);

// geometry.attributes.position = attribue; // 设置几何体顶点位置属性
// geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); // 设置几何体的顶点法线属性

// line.position.set(50, 50, 100);

scene.add(line);
scene.add(axesHelper);

camera.position.set(-200, 100, 300);
camera.lookAt(line.position);

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x444444, 1);
renderer.render(scene, camera);

document.body.appendChild(renderer.domElement);

/**
  旋转：拖动鼠标左键
  缩放：滚动鼠标中键
  平移：拖动鼠标右键
*/
controls.addEventListener('change', () => {
  renderer.render(scene, camera);
  // console.log('camera.position',camera.position);
})

            
                1
2
3
4
5

            
            {
  "dependencies": {
    "three": "0.173.0"
  }
}