threeJs导入3D皮卡丘.obj模型，使用.jpg贴图，实现缩放旋转查看功能

2024-02-17 16:22:34

先来看下最终的效果，也可以访问这里查看案例。

导入obj模型

如果仅使用Mesh几何而不加载任何外部资源，则网页应直接在文件系统中运行，只需双击HTML文件打开即可以预览。而由于3D模型是从外部加载进来的，由于浏览器的原始策略安全性限制，从文件系统加载将失败，并出现安全异常。必须要启动本地Web服务器来运行文件。

下载的模型文件如下：

默认情况下，three.js 仅包含少数几个加载器（例如JSONLoader），其他加载器应单独添加到应用程序中。例如：导入OBJ格式的模型，除了导入必要的three.js文件外，还需要导入OBJLoader.js文件。three.js中导入外部模型的加载器下载地址：https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders

可以使用 script 标签导入加载器文件

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

也可以使用 ES6 的 import 导入所需文件

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';

导入加载器后，就可以将模型添加到场景中了。语法在不同的加载程序中有所不同。OBJLoader的使用方法如下：

var objLoader = new THREE.OBJLoader();
//url 模型地址
//onLoad 加载完成后的回调函数，一般在这里操作将模型添加到场景中
//onProgress 加载过程中触发的函数，可以用来展示进度条
//onError 捕捉错误的回调函数
objLoader.load(url,onLoad,onProgress,onError);

function onl oad(object) {
    //......
    scene.add(object);	//将模型添加到场景中
});

function onProgress( xhr ) {
	if ( xhr.lengthComputable ) {
		var percentComplete = xhr.loaded / xhr.total * 100;
		console.log( 'model ' + Math.round( percentComplete, 2 ) + '% downloaded' );
	}
}

function one rror() {}

设置模型的缩放比例：

object.scale.set(1, 1, 1);

设置模型的坐标：

object.position.set(0, 0, 0);

添加模型周围的立方体边线：

var box = new THREE.Box3().setFromObject(object);
var box3Helper = new THREE.Box3Helper(box);
scene.add(box3Helper);

添加辅助工具x,y,z三维坐标轴：

scene.add(new THREE.AxesHelper(20));

添加模型皮肤：

object.traverse(function(child) {
    if (child instanceof THREE.Mesh) {
        //设置模型皮肤
        child.material.map = THREE.ImageUtils.loadTexture( 'pikaqiu/p.jpg');
    }
});

PI属性就是π,还表示了弧度π = 180°,Math.PI = 3.14 = 180°

Math.PI = 3.14 = 180°

案例的完整代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>皮卡丘</title>
    </head>
    <body>
    </body>
    <script type="text/javascript" src="../js/three.js"></script>
    <script type="text/javascript" src="../js/loaders/OBJLoader.js"></script>
    <script type="text/javascript" src="../js/controls/OrbitControls.js"></script>
    <script>
        //场景
        var scene = new THREE.Scene();

        //相机
        var camera = new THREE.PerspectiveCamera(15, window.innerWidth / window.innerHeight, 0.1, 1000);
        //设置相机坐标
        camera.position.set(50, 30, 100);

        //渲染器
        var renderer = new THREE.WebGLRenderer();
        //设置渲染器的颜色和大小
        renderer.setClearColor(0x404040);
        renderer.setSize(window.innerWidth, window.innerHeight);
        //将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。
        //这就是渲染器用来显示场景给我们看的<canvas>元素
        document.body.appendChild(renderer.domElement);
 
        //鼠标控制旋转
        var controls = new THREE.OrbitControls(camera, renderer.domElement);
        //设置是否可以缩放,默认值为true
        // controls.enableZoom = false;
        //设置鼠标交互,设置为false之后，不能移动位置，不能旋转物体,默认为true
        // controls.enableRotate = false;
 
        //设置光源
        var light = new THREE.DirectionalLight(0xffffff, 0.5);
        light.position.setScalar(100);
        scene.add(light);
        scene.add(new THREE.AmbientLight(0xffffff, 0.5));

        //添加灰色网格线
        scene.add(new THREE.GridHelper(20, 20));

        //导入obj模型
        var objLoader = new THREE.OBJLoader();
        objLoader.load('/02-objectLoader/pikaqiu/pikaqiu.obj', function (object) {

            //设置模型缩放比例
            object.scale.set(1, 1, 1);
            //设置模型的坐标
            object.position.set(0, 0, 0);

            //PI属性就是π,还表示了弧度π = 180°,Math.PI = 3.14 = 180°
            //将模型z轴旋转90度,三种写法都可以
            // object.rotation.z = -Math.PI * 0.5;
            // object.rotateZ(-Math.PI * 0.5);
            // object.rotation.set(0,0,-Math.PI * 0.5);

            //绘制模型周围的立方体连线
            // var box = new THREE.Box3().setFromObject(object);
            // var box3Helper = new THREE.Box3Helper(box);
            // scene.add(box3Helper);

            //辅助工具,x,y,z三维坐标轴
            // scene.add(new THREE.AxesHelper(20));

            object.traverse(function(child) {
                if (child instanceof THREE.Mesh) {
                    //设置模型皮肤
                    child.material.map = THREE.ImageUtils.loadTexture( '/02-objectLoader/pikaqiu/p.jpg');
                }
            });
            //将模型添加到场景中
            scene.add(object);
        });

        function render() {
            //动画循环渲染
            requestAnimationFrame(render);
            //渲染到页面上
            renderer.render(scene, camera);
        }
        render();
    </script>
</html>

参考资料：
https://threejs.org/docs/index.html

码农公寓

导入obj模型

相关文章