1、安装插件
npm install three --save-dev
npm install three three-orbitcontrols
npm install three three-obj-mtl-loader stats-js
2、
<template> <div id="container"></div> </template> <script> import * as Three from 'three' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; import {OBJLoader, MTLLoader} from 'three-obj-mtl-loader'; import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls' export default { name: 'ThreeTest', data () { return { camera: null, scene: null, renderer: null, mesh: null } }, methods: { init(){ let container = document.getElementById('container') this.camera = new Three.PerspectiveCamera(30, container.clientWidth / container.clientHeight, 0.1, 10000) this.camera.position.z = 5; this.camera.position.y = 5; this.camera.position.x = 15; this.scene = new Three.Scene() // this.addGeometry(); this.modelGlb(); this.modelObj('./static/3d/d101bd996ac67f1b5d56ef45612d3b865bcbc362/','SciFiCrossBridge.mtl','SciFiCrossBridge.obj'); this.renderer = new Three.WebGLRenderer({antialias: true}) this.renderer.setSize(container.clientWidth, container.clientHeight) this.renderer.setClearColor(0xC0C4CC, 1); this.backImg(); container.appendChild(this.renderer.domElement) this.OrbitControl(container); }, addGeometry(){ let geometry = new Three.BoxGeometry(0.1, 0.1, 0.1) let material = new Three.MeshNormalMaterial() this.mesh = new Three.Mesh(geometry, material) this.scene.add(this.mesh) }, modelGlb(){ let ts = this; const loader = new GLTFLoader(); loader.load( './static/3d/Soldier.glb', function ( gltf ) { ts.scene.add( gltf.scene ); }, undefined, function ( error ) { console.error( error ); }); }, modelObj(path,mtl,obj){ let ts = this; var mtlLoader = new MTLLoader(); mtlLoader.setPath(path); mtlLoader.load(mtl, function(materials) { materials.preload(); var objLoader = new OBJLoader(); objLoader.setMaterials(materials); objLoader.setPath(path); objLoader.load(obj, function(object) { object.children[0].geometry.computeBoundingBox(); object.children[0].geometry.center() object.rotation.x = Three.Math.degToRad( 90 ); object.position.y = 1; ts.scene.add(object); },onProgress,onError); }); let onProgress = function(xhr) { if (xhr.lengthComputable) { var percentComplete = xhr.loaded / xhr.total * 100; console.log(Math.round(percentComplete, 2) + '% downloaded'); } }; let one rror = function(xhr) {}; }, animate(){ requestAnimationFrame(this.animate) // this.mesh.rotation.x += 0.01 // this.mesh.rotation.y += 0.02 this.renderer.render(this.scene, this.camera) }, OrbitControl(container){ this.controls = new OrbitControls(this.camera, container ); this.controls.enableDamping = true; this.controls.enableZoom = true; this.controls.autoRotate = true; // this.controls.minDistance = 200; // this.controls.maxDistance = 600; this.controls.enablePan = true; }, light(){ var ambient = new Three.AmbientLight(0xffffff); this.scene.add(ambient); //将环境光 // var light = new Three.DirectionalLight(0xF08080); // this.scene.add(light); //平行光 // var pointLight = new Three.PointLight(0xffffff); // pointLight.position.set(300,300,300); // this.scene.add(pointLight);//点光源 // var spotLight = new Three.SpotLight(0xFFFFFF, 1, 100); // spotLight.position.set(-40, 30, -10); // spotLight.castShadow = true; // this.scene.add(spotLight);//聚光灯 }, backImg(){ var textureLoader = new Three.TextureLoader(); var texture = textureLoader.load('./static/img/bjt2.jpeg'); this.scene.background = texture ; } }, mounted () { this.init() this.light() this.animate() }, } </script> <style scoped> #container { width: 100%; height: 1000px; } </style>