【ThreeJS基础教程-高级几何体篇】2.2 加载模型,加载模型时的常见错误

加载模型,加载模型时的常见错误

  • 学习ThreeJS的捷径
  • 关于加载模型篇的一些建议
  • 加载OBJ格式模型
    • 案例分析
  • 模型加载时的常见错误
    • 模型文件数据错误
    • 路径错误
    • 没有报错的情况下,我们看不到模型怎么办
    • 经过上述检查后,模型数据正常,我们看不到怎么办
    • 做了上述操作我们依然看不到模型
  • 一些碎碎念
  • 常见的建模验收标准
  • 下一篇预告:多模型加载管理器

学习ThreeJS的捷径

本段内容会写在0篇以外所有的,本人所编写的Threejs教程中

对,学习ThreeJS有捷径
当你有哪个函数不懂的时候,第一时间去翻一翻文档
当你有哪个效果不会做的时候,第一时间去翻一翻所有的案例,也许就能找到你想要的效果
最重要的一点,就是,绝对不要怕问问题,越怕找找别人问题,你的问题就会被拖的越久

如果你确定要走WebGL/ThreeJS的开发者路线的话,以下行为可以让你更快的学习ThreeJS

  1. 没事就把所有的文档翻一遍,哪怕看不懂,也要留个印象,至少要知道Threejs有什么
  2. 没事多看看案例效果,当你记忆的案例效果足够多时,下次再遇到相似问题时,你就有可能第一时间来找对应的案例,能更快解决你自己的问题
  3. 上述案例不只是官网的案例,郭隆邦技术博客,跃焱邵隼,暮志未晚等站点均有不少优质案例,记得一并收藏
    http://www.yanhuangxueyuan.com/ 郭隆邦技术博客
    https://www.wellyyss.cn/ 跃焱邵隼
    http://www.wjceo.com/ 暮志未晚
    这三个站点是我最常逛的站点,推荐各位有事没事逛一下,看看他们的案例和写法思路,绝对没坏处

关于加载模型篇的一些建议

本篇中将主要介绍如何加载模型,会使用到模型界中最通用的模型格式OBJ格式,但是OBJ格式并非我们实际开发中使用的理想格式,在下一篇中,我们会着重讲解GL格式的加载与获取方式,本篇的重点在于加载模型以及加载模型后的接下来一系列操作

加载OBJ格式模型

案例代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        canvas{
            display: block;
        }
        body {
            margin: 0;
            overscroll-behavior: none;
        }
        #btns{
            position: absolute;
            top:10%;
            width: 500px;
            height: 100px;
            left: 50%;
            transform:translateX(-50%);
        }
    style>
head>
<body>
<div id="btns">div>



<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js">script>

<script type="importmap">
			{
				"imports": {
					"three": "../../three.js-master/build/three.module.js"
				}
			}
		script>
<script type="module">
    import * as THREE from '../../three.js-master/build/three.module.js';
    import {OrbitControls} from "../../three.js-master/examples/jsm/controls/OrbitControls.js";
    import {OBJLoader} from "../../three.js-master/examples/jsm/loaders/OBJLoader.js";

    let scene,renderer,camera,orbitControls;

    function init(){
        scene = new THREE.Scene();
        renderer = new THREE.WebGLRenderer({
            antialias:true
        });
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);
        camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);
        camera.position.set(10,10,10);
        orbitControls = new OrbitControls(camera,renderer.domElement);

        let helper = new THREE.AxesHelper(5);
        scene.add(helper);

        let light = new THREE.PointLight();
        camera.add(light);
        scene.add(camera);
    }
    function addMesh(){

        let loader = new OBJLoader();

        loader.load("./tree.obj",(obj)=>{
            console.log(obj);
            scene.add(obj);
        },null,(error)=>{
            console.log("加载模型时出错,错误原因:"+error);
        });
    }
    function render(){
        renderer.render(scene,camera);
        requestAnimationFrame(render);
    }
    init();
    addMesh();
    render();
script>
body>
html>

案例效果
【ThreeJS基础教程-高级几何体篇】2.2 加载模型,加载模型时的常见错误_第1张图片

这里我们使用的文件在threejs开发包中:three.js-master\examples\models\obj\tree.obj

案例分析

引入我们的加载器,加载器一般都需要外部引入,如果是使用< script>引入,需要从以下地址引入
three.js-master/examples/js/loaders/OBJLoader.js

2023年1月6日追加:ThreeJS148版本不再支持< script src> 方式引入组件了,如有jquery开发者在学习本篇教程,请选用148以前的版本

	import {OBJLoader} from "../../three.js-master/examples/jsm/loaders/OBJLoader.js";

接下来是声明我们的Loader

	let loader = new OBJLoader();

如果你使用< script >引入则需要加上THREE前缀

    //threejs148版本之后不再支持使用
                    
                    

你可能感兴趣的:(WebGL,ThreeJS,css,前端,javascript)