使用threejs 在开发者工具可以显示 真机调试连canvas都不加载 体验版本的mtl加载失败?
发布于 6 年前 作者 jiexiang 6962 次浏览 来自 官方Issues

使用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);

    }

}

1 回复

小程序运行时开发者工具环境与手机环境不一样,three.js不兼容手机环境吧

回到顶部