Three.js 生成模型底座教程

2026/6/28 22:03:16

生成模型底座 ·Model Base· ▶ 在线运行案例

案例合集：三维可视化功能案例（threehub.cn）
开源仓库github地址：https://github.com/z2586300277/three-cesium-examples
400个案例代码:网盘链接

你将学到什么

OrbitControls 相机轨道交互
glTF/Draco 模型加载与优化
监听窗口resize同步更新 camera 与 renderer

效果说明

本案例演示生成模型底座效果：基于 WebGL 实现「生成模型底座」可视化效果，附完整可运行源码；核心用到 OrbitControls、glTF/Draco。建议先打开文首在线案例查看动态画面，再对照下方源码逐步理解。

核心概念

Loader异步加载模型；glTF 返回gltf.scene，加载后注意scale与坐标系。Draco 需配置DRACOLoader。
OrbitControls轨道旋转缩放；开enableDamping时每帧需controls.update()。
CubeTexture六面贴图作scene.background；scene.environment供 PBR 材质反射。

实现步骤

搭建 Scene / Camera / Renderer 与 OrbitControls
Loader 异步加载模型/纹理资源
rAF 循环中 update 并 render

代码要点

import * as THREE from 'three';import { OrbitControls } from "three/examples/jsm/Addons.js"; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js' const DOM = document.getElementById('box')
var scene = new THREE.Scene(); scene.background = new THREE.Color('gainsboro');
var camera = new THREE.PerspectiveCamera(30, innerWidth / innerHeight); camera.position.set(0, 4, 4); camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(innerWidth, innerHeight); renderer.setAnimationLoop(animationLoop);
function animationLoop() { renderer.render(scene, camera); } DOM.appendChild(renderer.domElement);
window.addEventListener("resize", () => { camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); renderer.setSize(innerWidth, innerHeight); });
var controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.autoRotate = true;
var light = new THREE.DirectionalLight('white', 3); light.position.set(1, 1, 1); scene.add(light);
let group
const loader = new GLTFLoader()
loader.setDRACOLoader(new DRACOLoader().setDecoderPath(FILE_HOST + 'js/three/draco/'))
loader.load(
HOST + '/files/model/car.glb',
function (gltf) {
group = gltf.scene
scene.add(group) add_model_base() }
)// 模型底座 function add_model_base(){ const box = new THREE.Box3() box.setFromObject(group) // const helper = new THREE.Box3Helper(box) // scene.add(helper) const center = box.getCenter(new THREE.Vector3()) const size = box.getSize(new THREE.Vector3()) const shape = new THREE.Shape() shape.moveTo(center.x,center.z) // 底座大小在这控制 这里取半径的根号2倍 let radius = Math.max(size.x,size.z) / 2 * Math.sqrt(2) shape.arc(0,0,radius,0,Math.PI * 2) let m = new THREE.MeshBasicMaterial({color:'red',side:2}) const geo = new THREE.ShapeGeometry(shape,32) const mesh = new THREE.Mesh(geo,m) geo.center() mesh.rotateX(-Math.PI / 2) scene.add(mesh) }