使用threejs 在开发者工具可以显示 真机调试连canvas都不加载 体验版本的mtl加载失败
真机调试直接走不下去 上传体验版本之后看到的是没加载出材质 因为没有network查看也不知道具体原因
这个是开发者工具的效果
使用的资源在这https://github.com/yannliao/threejs-example-for-miniprogram
我是直接改了他的obj/loadObj.js
求助各位大神
import getDDSLoader from '../../jsm/loaders/DDSLoader.js';
import getMTLLoader from '../../jsm/loaders/MTLLoader.js';
import getOBJLoader from '../../jsm/loaders/OBJLoader.js';
import {OrbitControls} from '../../jsm/controls/OrbitControls';
export default function (canvas, THREE) {
let {DDSLoader} = getDDSLoader(THREE);
let {MTLLoader} = getMTLLoader(THREE);
let OBJLoader = getOBJLoader(THREE);
let window = THREE.global;
let camera, scene, renderer, controls;
let object;
init();
animate();
function init() {
//renderer
{
renderer = new THREE.WebGLRenderer({canvas});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor('#FFFFFF', 1);
}
//camera
{
camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientHeight, 1, 2000);
camera.position.set(800, 0, 800);
}
//controls
{
controls = new OrbitControls(camera, canvas);
controls.target.set(0, 0, 0);
controls.update();
}
// scene & light
{
scene = new THREE.Scene();
const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
scene.add(ambientLight);
//模型底部的光线照射,参数和环境光线同理
const DirectionalLight = new THREE.DirectionalLight(0xffffff, 0.25);
//模型顶部的光线照射,参数和环境光线同理
const DirectionalLightOther = new THREE.DirectionalLight(0xffffff, 0.1);
//设置光线从哪里照射
DirectionalLight.position.set(-2, -5, -3);
DirectionalLightOther.position.set(2, 5, 3);
scene.add(DirectionalLight);
scene.add(DirectionalLightOther);
scene.add(camera);
}
// texture
let textureLoader = new THREE.TextureLoader();
let texture = textureLoader.load('https://file.zmplay.top/static/img/%E8%83%8C%E6%99%AF6%401x.e85e7a1.png');
console.log(1);
new MTLLoader().setPath("https://file.zmplay.top/").load("new.mtl", function (materials) {
materials.preload();
console.log(2);
let loader = new OBJLoader();
loader.setMaterials(materials).load('https://file.zmplay.top/new.obj', function (obj) {
object = obj;
console.log(3);
object.traverse(function (child) {
if (child.name == "圆柱") {
//给罐身贴图
child.material.forEach(childMaterial => {
if (childMaterial.name == '罐身图片') {
childMaterial.map = texture;
}
})
}
});
scene.add(object);
});
});
}
function animate() {
canvas.requestAnimationFrame(animate);
render();
}
function render() {
camera.lookAt(scene.position);
controls.update();
renderer.render(scene, camera);
}
}
你的问题解决了吗 大神
小程序运行时开发者工具环境与手机环境不一样,three.js不兼容手机环境吧