当前位置：网站首页>Three. JS introductory learning notes 04: external model import - no material obj model

Three. JS introductory learning notes 04: external model import - no material obj model

2022-07-07 15:48:00 【Jiang Duoduo_ Mostly Harmless 】

Reference learning ：
Three.js Getting started
https://www.ituring.com.cn/book/miniarticle/53810

External model import supports formats

External file import auxiliary function download address
https://github.com/mrdoob/three.js/tree/master/examples/js/loaders

*.obj Is the most commonly used model format , Import *.obj Documentation needs OBJLoader.js; Lead in belt *.mtl The material *.obj Documentation needs MTLLoader.js as well as OBJMTLLoader.js. have other PLYLoader.js、STLLoader.js And other loaders corresponding to different formats , You can choose according to the model format .

Currently supported formats ：

  • *.obj
  • *.obj, *.mtl
  • *.dae
  • *.ctm
  • *.ply
  • *.stl
  • *.wrl
  • *.vtk

Model without material

3ds max export obj The effect of the file on the page ：
Insert picture description here
C4D export obj The effect of the file on the page ：

Insert picture description here

download OBJLoader.js And in HTML Of <head> Use in ：

<script type="text/javascript" src="OBJLoader.js"></script>

1. use 3ds max Build a teapot model , Put it at the origin , radius 3, This unit and three.js The units in the scene are consistent .
Insert picture description here
2. Export to port.obj
choice Export materials, A with the same name will be generated *.mtl file .
No election , Just don't export materials

3. Structure and path
structure
Insert picture description here
Insert picture description here
Insert picture description here
Corresponding path
Insert picture description here
Insert picture description here

My version , Short code 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3d_camera</title>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/OBJLoader.js"></script>
</head>

<body>
<script type="text/javascript">
    
    //renderer
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(800, 600);
        document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
    //scene
        var scene = new THREE.Scene();
    
    //camera
        camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
                camera.position.set(15, 25, 25);
                camera.lookAt(new THREE.Vector3(0, 2, 0));
                scene.add(camera);
   //model
        var loader = new THREE.OBJLoader();
                loader.load('model/cubenew2.obj', function(obj) {
    
                mesh = obj; // Stored in global variables 
                scene.add(obj);
            });
    
    //light 
        var light = new THREE.DirectionalLight(0xffffff);
                light.position.set(20, 10, 5);
                scene.add(light);
                                
        id = setInterval(draw, 20);
            function draw() {
    
                renderer.render(scene, camera);
                mesh.rotation.y += 0.01;
                if (mesh.rotation.y > Math.PI * 2) {
    
                    mesh.rotation.y -= Math.PI * 2;
                }
                
            }
  
</script>
</body>
</html>

If you want to stay still, you can write the animation as 

     function draw() {
    
                renderer.render(scene, camera);   
            }

I've tried, 3ds max export obj A teapot , and C4D Export cubes can be loaded , Export with or without materials , Just put obj Just load the file of .
Adjusting the size and world coordinates in the software also affects the size and position loaded in the web page .
The above model 3ds max The unit length of the teapot is 3,C4D Exported is 1cm about . The world coordinates are （0,0,0）

The problem remains to be solved ：
1. Why add one draw function , If you remove it, you can't see the model ？
2. Export a larger obj The model cannot be loaded , Only the black render area , I don't know whether it's a model problem or a code problem

Tutorial code

https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter7/7.2.1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/OBJLoader.js"></script>
</head>

<body>
<script type="text/javascript">
            var scene = null;
            var camera = null;
            var renderer = null;
            
            var mesh = null;
            var id = null;
            
          
                var renderer = new THREE.WebGLRenderer();
        renderer.setSize(800, 600);
        document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
            
                renderer.setClearColor(0x000000);
                scene = new THREE.Scene();
                
                camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
                camera.position.set(15, 25, 25);
                camera.lookAt(new THREE.Vector3(0, 2, 0));
                scene.add(camera);
                
                var loader = new THREE.OBJLoader();
                loader.load('model/port2.obj', function(obj) {
    
                    obj.traverse(function(child) {
    
                        if (child instanceof THREE.Mesh) {
    
                            child.material.side = THREE.DoubleSide;
                        }
                    });
                
                    mesh = obj;
                    scene.add(obj);
                });
                
                var light = new THREE.DirectionalLight(0xffffff);
                light.position.set(20, 10, 5);
                scene.add(light);
                
                id = setInterval(draw, 20);
            
            
            function draw() {
    
                renderer.render(scene, camera);
                
                mesh.rotation.y += 0.01;
                if (mesh.rotation.y > Math.PI * 2) {
    
                    mesh.rotation.y -= Math.PI * 2;
                }
                
            }
           
        </script>
</body>
</html>
原网站

版权声明
本文为[Jiang Duoduo_ Mostly Harmless ]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202130610087401.html

边栏推荐

猜你喜欢

随机推荐