3D軟件中導出的格式一般有.obj 和.glb ,下面是blender 2.8.2 生成模型並在three.js中展示的流程
一、先創建一個圖形,選擇UV Editing 進行uv展開,把UV展開的圖形導出UV佈局圖,然後用ps進行處理,再導入處理好的圖進行貼圖,uv貼圖可以選擇上面的shading,再選擇下面的添加-紋理-圖片紋理,然後連到基礎色
UV貼圖後導出 .glb 格式
二、由於是在vue中使用把導出的文件放到public/models/cylinder.glb
三、代碼實現,首先要引入GLTFLoader
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
export default {
name: "ThreeTest",
data() {
return {};
},
mounted() {
// this.getData();
this.timer = null;
this.myReq = null;
this.container;
this.scene;
this.camera;
this.renderer;
this.labelRenderer;
this.controls;
this.initScene();
this.initCamera();
this.initRender();
this.initModel();
this.initControls();
this.initLight()
this.animate();
// this.render()
window.onresize = this.onWindowResize;
},
methods: {
initScene() {
this.scene = new THREE.Scene();
},
initCamera() {
this.container = document.getElementById("container");
this.camera = new THREE.PerspectiveCamera(
70,
this.container.clientWidth / this.container.clientHeight,
1,
1000
);
console.log(this.camera);
this.camera.position.z = 5; //z設置小寫會使圖像變形小
},
initRender: function () {
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setSize(
this.container.clientWidth,
this.container.clientHeight
);
this.container.appendChild(this.renderer.domElement);
},
initLight() {
this.scene.add(new THREE.AmbientLight(0xffffff));
this.light = new THREE.DirectionalLight(0xffffff);
this.light.position.set(0, 0, 50);
this.scene.add(this.light);
},
initModel() {
let loader = new GLTFLoader()
let gltScene
loader.load("models/cylinder.glb",(gltf)=>{
console.log(gltf)
gltf.scene.position.set(0,0,0)
this.scene.add(gltf.scene)
})
},
initControls() {
//controls = new THREE.OrbitControls( camera, renderer.domElement );
this.controls = new OrbitControls(
this.camera,
this.labelRenderer.domElement
);
// 如果使用animate方法時,將此函數刪除
//controls.addEventListener( 'change', render );
// 使動畫循環使用時阻尼或自轉 意思是否有慣性
this.controls.enableDamping = false;
//動態阻尼係數 就是鼠標拖拽旋轉靈敏度
//controls.dampingFactor = 0.25;
//是否可以縮放
this.controls.enableZoom = true;
//是否自動旋轉
this.controls.autoRotate = false;
//設置相機距離原點的最遠距離
this.controls.minDistance = 1;
//設置相機距離原點的最遠距離
this.controls.maxDistance = 10;
//是否開啓右鍵拖拽
this.controls.enablePan = false;
},
render() {
this.renderer.render(this.scene, this.camera);
this.labelRenderer.render(this.scene, this.camera);
},
onWindowResize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.render();
},
animate() {
this.render();
this.myReq = requestAnimationFrame(this.animate);
},
}
};
</script>
注意:要開啓燈光,否則會顯示不出模型