Threejs载入OBJ和贴图

最新推荐文章于 2024-07-16 09:50:03 发布

Hi_Panda_CRL

最新推荐文章于 2024-07-16 09:50:03 发布

阅读量2.3w

点赞数

分类专栏： Threejs

本文链接：https://blog.csdn.net/grief_of_the_nazgul/article/details/42743005

版权

该博客介绍了如何使用Threejs库加载OBJ模型，并通过两种方式实现贴图：一种是不使用MTL文件直接为模型分配材质和贴图，另一种是使用MTL文件加载贴图。示例代码展示了完整的HTML和JavaScript实现，包括设置场景、相机、渲染器、光源，以及使用OBJLoader和MTLLoader加载模型和材质。

摘要由CSDN通过智能技术生成

未使用MTL文件加载贴图

<pre name="code" class="html"><!DOCTYPE html>

<html>

<head>
    <title>Example 08.06 - Load OBJ model </title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <script type="text/javascript" src="../libs/OBJLoader.js"></script>

    <script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    $(function () {

        var stats = initStats();
        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();
        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        // create a render and set the size
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColorHex(0xaa

最低0.47元/天解锁文章

Hi_Panda_CRL

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
Threejs载入OBJ和贴图

Example 08.06 - Load OBJ model body { /* set margin to 0 and overflow to hidden, to go fullscreen */ margin: 0; overflow: hi
复制链接

扫一扫

专栏目录