Threejs 加载3D模型

#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 true
  controls.update();

  renderer.render(scene, camera);
}
animate();

}