#Threejs 加載3D模型
load3D() {
const scene = new THREE.Scene(); // 場景
// fov — 攝像機視錐體垂直視野角度
// aspect — 攝像機視錐體長寬比
// near — 攝像機視錐體近端面
// far — 攝像機視錐體遠端面
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000); // 相機
camera.position.set(0, 0, 10);
camera.lookAt(0, 0, 0);
const renderer = new THREE.WebGLRenderer(); // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(‘skyblue’);
const dom = this.$refs.test3D as HTMLBaseElement;
dom.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.update();
// 坐標系
const axesHelper = new THREE.AxesHelper(1000);
scene.add(axesHelper);
let objLoader = new OBJLoader();
let mtlLoader = new MTLLoader();
mtlLoader.load(‘/3D/ceshi.mtl’, function(materials) {
// materials.preload();
objLoader.setMaterials(materials);
objLoader.load(
// ‘/3D/JYC_MAX_01.obj’,
‘/3D/ceshi.obj’,
function(obj) {
obj.position.set(0, 0, 0);
obj.scale.set(1, 1, 1);
scene.add(obj);
animate();
},
// called while loading is progressing
function(xhr) {
// console.log((xhr.loaded / xhr.total) * 100 + ‘% loaded’);
},
(er) => {
console.log(‘er====’, er);
}
);
});
// 3,創建燈光
var point = new THREE.PointLight(0xffffff, 0.5);
point.position.set(200, 200, 200);
scene.add(point);
var point2 = new THREE.PointLight(0xffffff, 0.5);
point2.position.set(-200, 200, 200);
scene.add(point2);
var point3 = new THREE.PointLight(0xffffff);
point3.position.set(200, -200, 200);
// 環境光
const light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
controls.update();
renderer.render(scene, camera);
function animate() {
requestAnimationFrame(animate);

// required if controls.enableDamping or controls.autoRotate are set to truecontrols.update();renderer.render(scene, camera); } animate();

}

總結

以上是生活随笔為你收集整理的Threejs 加载3D模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。