在vue中使用引入3D建模(Three.js)
1.安装依赖
npm install --save three
2.引入依赖
import * as THREE from 'three'
3.编写控件的页面,可以从网站 sketchfab 下载和导入3D建模的模型(需注册,有些是免费的),在这里用到的模型地址是https://sketchfab.com/3d-models/seraphine-c4d72965ffce45b8886d1e0ceab6728e
页面控件是跟着https://zhuanlan.zhihu.com/p/333615381这位博主写的,做了一些适配的小改动
<!-- 3D建模显示 --><template><div><canvas id="three"></canvas></div></template><script>import * as THREE from 'three'import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'export default {mounted() {this.initThree()},methods: {initThree() {const scene = new THREE.Scene()scene.background = new THREE.Color('#eee')scene.fog = new THREE.Fog('#eee', 20, 100)const canvas = document.querySelector('#three')const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })renderer.shadowMap.enabled = trueconst camera = new THREE.PerspectiveCamera(50,window.innerWidth / window.innerHeight,0.1,1000)camera.position.z = 10const gltfLoader = new GLTFLoader()gltfLoader.load('/seraphine/scene.gltf', (gltf) => {let model = gltf.scene//遍历模型每部分model.traverse((o) => {//将图片作为纹理加载let explosionTexture = new THREE.TextureLoader().load('/seraphine/textures/Mat_cwfyfr1_userboy17.bmp_diffuse.png')//调整纹理图的方向explosionTexture.flipY = false//将纹理图生成基础网格材质(MeshBasicMaterial)const material = new THREE.MeshBasicMaterial({map: explosionTexture,})//给模型每部分上材质o.material = materialif (o.isMesh) {o.castShadow = trueo.receiveShadow = true}})scene.add(model)})const hemLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6)hemLight.position.set(0, 48, 0)scene.add(hemLight)const dirLight = new THREE.DirectionalLight(0xffffff, 0.6)//光源等位置dirLight.position.set(-10, 8, -5)//可以产生阴影dirLight.castShadow = truedirLight.shadow.mapSize = new THREE.Vector2(1024, 1024)scene.add(dirLight)let floorGeometry = new THREE.PlaneGeometry(8000, 8000)let floorMaterial = new THREE.MeshPhongMaterial({color: 0x857ebb,shininess: 0,})let floor = new THREE.Mesh(floorGeometry, floorMaterial)floor.rotation.x = -0.5 * Math.PIfloor.receiveShadow = truefloor.position.y = -0.001scene.add(floor)const controls = new OrbitControls(camera, renderer.domElement)controls.enableDamping = truefunction animate() {controls.update()renderer.render(scene, camera)requestAnimationFrame(animate)if (resizeRendererToDisplaySize(renderer)) {const canvas = renderer.domElementcamera.aspect = canvas.clientWidth / canvas.clientHeightcamera.updateProjectionMatrix()}}animate()function resizeRendererToDisplaySize(renderer) {const canvas = renderer.domElementvar width = window.innerWidthvar height = window.innerHeightvar canvasPixelWidth = canvas.width / window.devicePixelRatiovar canvasPixelHeight = canvas.height / window.devicePixelRatioconst needResize =canvasPixelWidth !== width || canvasPixelHeight !== heightif (needResize) {renderer.setSize(width, height, false)}return needResize}},},}</script><style scoped>#three {width: 100%;height: 100%;position: relative;}</style>
这里每个功能方法的使用这位博主https://zhuanlan.zhihu.com/p/333615381写的很详细了,可以去原帖子学习,最后贴上效果图片
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~