Hello, I have a problem with the material, thanks~
Before I posted the material:
- loaded script
2.After attaching the material , MTLLoader and OBJLoader
3.But the browser shows mtlLoader.setTexturePath is not a function
My code:
let container;
let camera;
let renderer;
let controls;
let scene;
let mesh;
function init() {
container = document.querySelector('#scene-container');
//Create a scene 創造場景
scene = new THREE.Scene();
//背景顏色
scene.background = new THREE.Color(0x222222);
// function 函數整理
createCamera();
createControls();
createLight();
createRenderer();
renderer.setAnimationLoop(() => {
update();
render();
});
}
//Create a Camera 建立相機
function createCamera() {
camera = new THREE.PerspectiveCamera(
75, //FOV
window.innerWidth / window.innerHeight, //aspect
0.1, //near
1500 //far
);
camera.position.set(0, 0, 1000); // x,y,z
}
// Create a Controls 建立控制器
function createControls() {
// controls = new THREE.OrbitControls(camera, container);
controls = new THREE.OrbitControls(camera, container);
controls.enableDamping = true;
controls.campingFactor = 0.25;
controls.enableZoom = true;
}
// Create a Lights 建立光源組
function createLight() {
const keyLight = new THREE.DirectionalLight(
new THREE.Color('hsl(30, 100%, 75%)'),
1.0
);
keyLight.position.set(-100, 0, 100);
const fillLight = new THREE.DirectionalLight(
new THREE.Color('hsl(240, 100%, 75%)'),
0.75
);
fillLight.position.set(100, 0, 100);
const backLight = new THREE.DirectionalLight(0xffffff, 1.0);
backLight.position.set(100, 0, -100).normalize();
scene.add(keyLight, fillLight, backLight);
}
// Create a Model 載入模型(OBJ)
const mtlLoader = new THREE.MTLLoader();
mtlLoader.setTexturePath('/models/');
mtlLoader.setPath('/models/');
mtlLoader.load('rhinoceros2.mtl', function(materials) {
materials.preload();
const objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('/models/');
objLoader.load('rhinoceros2.obj', function(object) {
scene.add(object);
});
});
// Creat the Renderer 建立渲染器
function createRenderer() {
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;
container.appendChild(renderer.domElement);
}
function update() {
// mesh.rotation.z += 0.01;
// mesh.rotation.x += 0.01;
// mesh.rotation.y += 0.01;
}
function render() {
renderer.render(scene, camera);
}
function onWindowResize() {
// console.log( '你調整瀏覽器大小' );
camera.aspect = window.innerWidth / window.innerHeight;
// update the camera's frustum 相機錐角
camera.updateProjectionMatrix();
// update the size of the renderer AND the canvas
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize);
init();