three.js加载obj模型

最新推荐文章于 2024-05-21 09:40:14 发布
最新推荐文章于 2024-05-21 09:40:14 发布
阅读量3.1w 收藏 9
点赞数 9
分类专栏： Other 文章标签： three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AWNUXCVBN/article/details/50736936
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Lession1</title>
    <script src="js/three.js"></script>
    <script src="js/three.min.js"></script>

</head>

<body>
<div id="container"></div>

<script src="js/three.min.js"></script>

<script src="js/loaders/OBJLoader.js"></script>

<script>
    var container;

    var camera, scene, renderer;

    var mouseX = 0, mouseY = 0;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;


    init();
    animate();


    function init() {

        container = document.createElement( 'div' );
        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
        camera.position.z = 10;

        // scene

        scene = new THREE.Scene();

        var ambient = new THREE.AmbientLight( 0x101030 );
        scene.add( ambient );

        var directionalLight = new THREE.DirectionalLight( 0xffeedd );
        directionalLight.position.set( 0, 0, 1 );
        scene.add( directionalLight );

        // texture

        var manager = new THREE.LoadingManager();
        manager.onProgress = function ( item, loaded, total ) {

            console.log( item, loaded, total );

        };

        var texture = new THREE.Texture();

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

        var onError = function ( xhr ) {
        };


        var loader = new THREE.ImageLoader( manager );
        loader.load( 'car.jpg', function ( image ) {

            texture.image = image;
            texture.needsUpdate = true;

        } );

        // model

        var loader = new THREE.OBJLoader( manager );
        loader.load( 'car.obj', function ( object ) {

            object.traverse( function ( child ) {

                if ( child instanceof THREE.Mesh ) {

                    child.material.map = texture;

                }

            } );
            object.scale.x =  object.scale.y =  object.scale.z = 10;
            object.updateMatrix();
            object.position.y = -3;
            scene.add( object );

        }, onProgress, onError );

        //

        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        document.addEventListener( 'mousemove', onDocumentMouseMove, false );

        //

        window.addEventListener( 'resize', onWindowResize, false );

    }

    function onWindowResize() {

        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    function onDocumentMouseMove( event ) {

        mouseX = ( event.clientX - windowHalfX ) / 2;
        mouseY = ( event.clientY - windowHalfY ) / 2;

    }

    //

    function animate() {

        requestAnimationFrame( animate );
        render();

    }

    function render() {

        camera.position.x += ( mouseX - camera.position.x ) * .5;
        camera.position.y += ( - mouseY - camera.position.y ) * .5;

        camera.lookAt( scene.position );

        renderer.render( scene, camera );

    }

</script>

</body>


</html>


地狱为王
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 25
    评论
专栏目录
Three.js加载OBJ模型或FBX模型
weixin_42358094的博客
03-03 3642
Three.js加载常用OBJ与FBX
three.js 加载obj文件并解析
yinge0508的博客
03-08 4008
效果： 说明：使用三维软件导出.obj模型文件的时候，会同时导出一个材质文件.mtl；.obj和.stl文件包含的信息一样都是几何体顶点相关数据，材质文件.mtl包含的是模型的材质信息，比如颜色、贴图路径等。可以只加载obj文件，默认材质是Phong ； 只加载obj文件的话，直接将返回的数据添加到场景中即可； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
OBJ_LOADER - 快速高效的3D模型加载库
gitblog_00086的博客
05-21 353
OBJ_LOADER - 快速高效的3D模型加载库 项目地址:https://gitcode.com/Bly7/OBJ-Loader 项目介绍 OBJ_LOADER 是一个轻量级的单头文件库，专门用于加载.obj格式的3D模型。这个库简洁易用，只需要包含一个头文件，即可在你的项目中快速集成并实现3D模型的加载和解析。它能够处理模型中的顶点、索引、材质等信息，并提供灵活的数据接口供你自由操作。 项目...
使用three.js实现引用obj文件模型，并添加事件进行边框高亮显示
wjw1224_的博客
01-08 854
使用前请先到three.JS官网下载所需文件，如在使用引用的文件时，控制台报以下错误：Uncaught TypeError: Failed to resolve module specifier "three.js". Relative references must start with either "/", "./", or "../".
vue2使用three加载obj模型及其材质
m0_55297623的博客
11-10 1639
three.js 加载obj及其模型
ThreeJS导入外部obj和mtl
永无止境
04-28 7598
本文将介绍 如何使用ThreeJS导入obj和带贴图mtl的外部obj模型； 使用AmbientLight为场景所有物体添加基础光源； 使用SpotLight为场景添加聚光灯效果，并为obj添加阴影效果； 使用SpotLightHelper，为聚光灯添加光源调试辅助线； 使用GUI，添加一些简单的属性操作obj模型； 本文代码结构将在之前的文章VUE整合ThreeJS并创建一个带动画的简单场景代码的基础上进行修改。 效果预览 一、导入外部模型OBJ 首先引入所需的包 import..
Vue2使用Three.js并导入外部obj模型
weixin_49993071的博客
08-24 1215
存放于 public/static/obj/male02。写完进行编译 有背景颜色出来则没有问题。在 methods 中新建一个方法。在 mounted 中。
three.js加载obj模型的实例代码
11-30
好了，下面通过一段代码给大家介绍three.js加载obj模型，具体代码如下所示： <!DOCTYPE html> <html> <head> [removed][removed] [removed][removed] <script type="tex
three.js加载obj模型添加点击事件及其他
01-04
首先，我们需要了解如何在three.js中加载OBJ模型。这通常涉及到以下步骤： 1. **导入three.js库**：确保在HTML文件中引入three.js库，可以通过CDN链接或者本地文件导入。 ```html <script src="path/to/three.js"> ...
three.js嵌套obj模型
最新发布
06-20
3D模型导入（OBJ格式）：学习如何使用Three.js加载OBJ格式的3D模型。OBJ是一种广泛支持的3D模型文件格式，常用于交换几何数据。 模型嵌套与层次结构：掌握如何在一个场景中嵌套多个模型，并管理它们之间的层次关系，...
threejs加载obj文件
09-25
threejs加载obj文件，附件主要实现了threejs对obj文件的加载，及使用相机及光的一些调节，希望能给大家带来帮助，下载后直接运行即可看到效果。
threejs 加载obj模型
qq_41629249的博客
06-09 2469
var OBJLoader = new THREE.OBJLoader();//obj加载器 var MTLLoader = new THREE.MTLLoader();//材质文件加载器 MTLLoader.load(modelData.mtl, function (materials) { //obj的模型会和MaterialCreator包含的材质对应起来 OBJLo...
使用three.js加载obj+mtl模型
you_big_father的博客
03-29 2017
已经有比较好的博客介绍如何加载模型：使用three.js加载obj+mtl模型完整案例。 有一点小问题，会导致模型加载不成功，需要修改两处地方。 1 将 Detector.js 替换为WebGL.js 根据Three.js中Detector.js替换成了WebGL.js，新下载的 three.js 的js文件夹里为 WebGL.js，修改如下： <script src="../j...
three.js（JS 三维模型库）介绍和入门
南北极之间
04-20 5771
three.js是一个基于WebGL的JavaScript 3D库。它封装了WebGL API，为开发者提供了简单易用的API，以便在Web浏览器中展示3D图形。three.js提供了几个组件、方法和工具，用于创建和处理3D图形，使得开发者可以在Web浏览器中快速创建3D图形和动画，而不需要深入了解WebGL的底层实现。three.js支持多种类型的3D对象，例如几何体、材质、灯光和相机等。它还提供了许多常用的几何体，例如球体、立方体、圆锥体和圆柱体，这些几何体可以进行旋转、平移和缩放等变换操作。
threejs加载模型报错Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘length‘)
xiaowang_test的博客
12-13 6747
在使用threejs中OBJLoader.js在场景中加载obj模型时报错， Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length') 刚开始以为没有设置模型position属性导致（之前有通过设置position加载出模型）， 但是之后每次导入模型都会遇到这个问题 后尝试更改threejs路径成功解决。 最初使用的threejs是通过在官网上复制源码到本地的，建议大家直接在github上
Threejs加载外部glb文件模型不显示
kk7521的博客
01-28 8863
文章目录一、问题代码1、主页面代码2、js代码二.问题分析总结 一、问题代码 1、主页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>军营展示</title>zhuyem
three.js学习笔记 obj模型加载问题
热门推荐
mystery的专栏
04-06 1万+
three.js最新版本'75'相较以前使用的'71'版本obj模型加载的方法发生了变化。 移除了OBJMTLLoader.js,并将原来OBJLoader.js和MTLLoader.js加载方法loader.setCrossOrigin更改为loader.setPath。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 25
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

地狱为王

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值