当前位置：网站首页>Import 3D model from web page - obj / MTL file

Import 3D model from web page - obj / MTL file

2022-04-22 08:03:00 【weixin_ forty-five million four hundred and eleven thousand sev】

The specific code is as follows 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="js/jquery-2.0.3.min.js"></script>
   <script src="js/three.js"></script>
   <script src="js/OBJLoader.js"></script>
   <script src="js/MTLLoader.js"></script>
   <script src="js/OrbitControls.js"></script>
   <script src="js/stats.min.js"></script>
   <script src="js/TrackballControls.js" ></script>
   <script src="js/dat.gui.module.js" ></script>


</head>
<body onload="draw();">
</body>
<script>

    var renderer;
    function initRender() {
        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        // Tell the renderer that you need a shadow effect 
        renderer.setClearColor(0xffffff);
        document.body.appendChild(renderer.domElement);
    }

    var camera;
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
        camera.position.set(0, 40, 50);
        camera.lookAt(new THREE.Vector3(0,0,0));
    }

    var scene;
    function initScene() {
        scene = new THREE.Scene();
    }


    var light;
    function initLight() {
        scene.add(new THREE.AmbientLight(0x444444));

        light = new THREE.PointLight
        (0xffffff);
        light.position.set(0,10,0);

        // Tell the directional light that shadow casting needs to be turned on 
        light.castShadow = false;

        scene.add(light);
    }
    //  Render color 
    function _ChangeMaterialEmissive(parent) {
        parent.traverse(function (obj) {
            if(obj instanceof THREE.Mesh){
                obj.material.emissive=new THREE.Color(1,1,1);
                obj.material.emissiveIntensity=1;
                obj.material.emissiveMap=obj.material.map;
            }
        });
    }
    function initModel() {

        // Auxiliary tool 
        var helper = new THREE.AxesHelper(0);
        // scene.add(helper);

        var mtlLoader = new THREE.MTLLoader();
        // mtlLoader.setPath('/lib/assets/models/');
        // load mtl file 
        mtlLoader.load('img/CITY_1.mtl', function (material) {
            var objLoader = new THREE.OBJLoader();
            // Sets the currently loaded texture 
            objLoader.setMaterials(material);
            // objLoader.setPath('/lib/assets/models/');
            objLoader.load('img/CITY_1.obj', function (object) {



                // Scale and add the model to the scene 
                object.scale.set(5, 5, 5);
                _ChangeMaterialEmissive(object)

                scene.add(object);
            })
        });
    }

    // Initialize the performance plug-in 
    var stats;
    function initStats() {
        stats = new Stats();
        document.body.appendChild(stats.dom);
    }

    // User interaction plug-ins   Press and hold the left mouse button to rotate , Right click and hold the pan , Scroll wheel zoom 
    var controls;
    function initControls() {

        controls = new THREE.OrbitControls( camera, renderer.domElement );

        //  If you use animate When the method is used , Delete this function 
        //controls.addEventListener( 'change', render );
        //  Make the animation rotate or damp when cycling   Does the meaning have inertia 
        controls.enableDamping = true;
        // Dynamic damping coefficient   It's the mouse drag rotation sensitivity 
        //controls.dampingFactor = 0.25;
        // Can I zoom 
        controls.enableZoom = true;
        // Whether to rotate automatically 
        controls.autoRotate = false;
        // Set the maximum distance from the camera to the origin 
        controls.minDistance  = 1;
        // Set the maximum distance from the camera to the origin 
        controls.maxDistance  = 200;
        // Whether to turn on right-click drag and drop 
        controls.enablePan = true;
    }

    function render() {

        renderer.render( scene, camera );
    }

    // Function triggered by window change 
    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        render();
        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    function animate() {
        // Update controller 
        render();

        // Update performance plug-ins 
        stats.update();

        controls.update();

        requestAnimationFrame(animate);
    }

    function draw() {
        // initGui();
        initRender();
        initScene();
        initCamera();
        initLight();
        initModel();
        initControls();
        initStats();

        animate();
        window.onresize = onWindowResize;
    }
</script>
</html>

// If you don't display the map, you need to display it in mtl Modify the corresponding picture path in the file

To run on the server , In fact, it's OK not to let go , casual htm You can open it , The corresponding resource package is required Import 3d Resources three file js package _3D Model html Call binding data -Web Develop document resources -CSDN download download , If you don't have points, I want to , Recently, many people have asked for resources and kept asking , It's too troublesome , The effect is as follows

版权声明
本文为[weixin_ forty-five million four hundred and eleven thousand sev]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204220626278846.html

边栏推荐

猜你喜欢

随机推荐