Three.js 生成模型底座教程

生成模型底座 ·Model Base· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么OrbitControls 相机轨道交互glTF/Draco 模型加载与优化监听窗口resize同步更新 camera 与 renderer效果说明本案例演示生成模型底座效果基于 WebGL 实现「生成模型底座」可视化效果附完整可运行源码核心用到 OrbitControls、glTF/Draco。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Loader异步加载模型glTF 返回gltf.scene加载后注意scale与坐标系。Draco 需配置DRACOLoader。OrbitControls轨道旋转缩放开enableDamping时每帧需controls.update()。CubeTexture六面贴图作scene.backgroundscene.environment供 PBR 材质反射。实现步骤搭建 Scene / Camera / Renderer 与 OrbitControlsLoader 异步加载模型/纹理资源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 groupconst loader new GLTFLoader()loader.setDRACOLoader(new DRACOLoader().setDecoderPath(FILE_HOST js/three/draco/))loader.load(HOST /files/model/car.glb,function (gltf) {group gltf.scenescene.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) }完整源码GitHub小结本文提供生成模型底座完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库