Three.js erstellt Gitterhilfslinien, Hilfslinien für Koordinatenachsen und Modellknochenhilfslinien

Verwendung von Hilfslinien in three.js

1. Grid-Helfer (GridHelper)

2. Hilfslinie der Koordinatenachse (AxesHelper)

3. Hilfslinie des Modellskeletts (SkeletonHelper)

Basierend auf dem vorherigen Artikel zum Laden externer glb-, fbx-, gltf- und obj-Modelldateien durch Three.js wurde eine neue Funktion createHelper zum Erstellen von Hilfslinien hinzugefügt. Methode
1. Erstellung von Rasterhilfslinien und Koordinatenachsenhilfslinien

	// 创建辅助线
	createHelper() {
    
    
		//网格辅助线
		this.gridHelper = new THREE.GridHelper(7, 17, 'rgb(193,193,193)', 'rgb(193,193,193)'); // 7 网格大小 17网格数量 rgb(193,193,193) 网格颜色
		this.gridHelper.position.set(0, -.59, -.1) //设置网格颜色
		this.gridHelper.visible = true // 设置网格显示和隐藏
		this.scene.add(this.gridHelper)
		// 坐标轴辅助线
		this.axesHelper = new THREE.AxesHelper(2);
		this.axesHelper.visible = false
		this.scene.add(this.axesHelper);
	}

2. Erstellen Sie SkeletonHelper für die Hilfslinie des Modellknochens und fügen Sie ihn in die Methode zum Laden der Modelldatei ein

	//加载模型
	setModel({
     
      filePath, fileType, scale,  position }) {
    
    
		return new Promise((resolve, reject) => {
    
    
			const loader = this.fileLoaderMap[fileType]
			loader.load(filePath, (result) => {
    
    
			  //加载不同类型的文件
				switch (fileType) {
    
    
					case 'glb':
						this.model = result.scene		
						// 模型骨骼辅助线
						this.skeletonHelper = new THREE.SkeletonHelper(result.scene)
						break;
					case 'fbx':
						this.model = result
						break;
					case 'gltf':
						this.model = result.scene
						break;
					case 'obj':
						this.model = result
						break;
					default:
						break;
				}
				// 设置模型大小
				if (scale) {
    
    
					this.model.scale.set(scale, scale, scale);
				}
				// 设置模型位置 
				if (position) {
    
    
					const {
    
     x, y, z } = position
					this.model.position.set(x, y, z)
				}
				// 设置相机位置
				this.camera.position.set(0, 2, 6)
				// 设置相机坐标系
				this.camera.lookAt(0, 0, 0)
				this.skeletonHelper.visible = false
				// 添加模型骨骼辅助线
				this.scene.add(this.skeletonHelper)
	             // 将模型添加到场景中去   
				this.scene.add(this.model)
				resolve(true)
			}, () => {
    
    

			}, (err) => {
    
    
				console.log(err)
				reject()
			})
		})
	}

Den vollständigen Code finden Sie unter: https://gitee.com/ZHANG_6666/Three.js3D/blob/master/src/views/renderModel.js

Schnittstelleneffekt: