three调研- - obj文件导入

最新推荐文章于 2024-05-08 15:02:11 发布
最新推荐文章于 2024-05-08 15:02:11 发布
阅读量482 收藏 1
点赞数
分类专栏： 小米
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ferrysoul/article/details/102975426
版权

vue+three

<template>
  <div id="container">
  </div>
</template>
<script>
  import * as THREE from "three";
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
  import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
  //import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
  //import { TGALoader } from 'three/examples/jsm/loaders/TGALoader.js';
  export default { 
    name: "HelloWorld",
    data() {
      return {
        scene: '',//环境
        light: '',//灯光
        camera: '',//相机
        controls: '',//控制器
        renderer: '',//渲染
      }
    },
    methods: {
		init() {
			//创建场景
			this.scene = new THREE.Scene();
			// 创建相机
			this.camera =  new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 1000);
			this.camera.position.set(0,0,80);
			// 环境光
			this.scene.add(new THREE.AmbientLight(4210752, 3));
// 		this.scene.fog = new THREE.Fog(0xffffff, 0.015, 1000);//雾
			this.scene.background = new THREE.CubeTextureLoader()
      .setPath('static/cube/room-1/').load( ['px.jpg','nx.jpg','py.jpg','ny.jpg','pz.jpg','nz.jpg']);

// 		console.log(this.scene.background)

			// 平行光
			// var light = new THREE.DirectionalLight(0xffffff, 1);
			// light.position.set(30, 30, 30);
			// this.scene.add(light);
			
			// var helper = new THREE.CameraHelper(light.shadow.camera);
			// this.scene.add(helper); 

			this.scene.add(new THREE.AmbientLight(0x0c0c0c));
      let spotLight1 = new THREE.SpotLight(0xffffff);
      spotLight1.position.set(-400, -400, -400);

      let spotLight2 = new THREE.SpotLight(0xffffff);
      spotLight2.position.set(400, 400, 400);

      this.scene.add(spotLight1);
      this.scene.add(spotLight2);
			
			
			// 坐标系
			/* var axes = new THREE.AxesHelper(30);
			this.scene.add(axes); */
			
			//加载模型数据
      this.loadObj()

			//渲染
      this.renderer = new THREE.WebGLRenderer({
				antialias: true,    // 平滑效果
        alpha: true,    // canvas背景透明
			});
			this.renderer.setClearColor(0xFFFFFF);//背景
			
			this.renderer.setPixelRatio(window.devicePixelRatio);//为了兼容高清屏幕
			this.renderer.setSize(window.innerWidth, window.innerHeight);    
			//初始化控制器
			this.controls = new OrbitControls(this.camera,this.renderer.domElement);
			this.controls.target.set(0, 0,0);
			this.controls.update();
			
			this.animate();

      const container = document.getElementById('container');
      container.appendChild(this.renderer.domElement);   
      window.addEventListener('resize', this.onWindowResize, false);//添加窗口监听事件（resize-onresize即窗口或框架被重新调整大小）
		},
        //窗口监听函数
		onWindowResize() {
			this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
			this.renderer.setSize(window.innerWidth, window.innerHeight);
        },
        animate() {
          requestAnimationFrame(this.animate);
          this.render();
        },
        render() {
			this.controls.update();
			this.renderer.render(this.scene, this.camera);
        },
        //外部模型加载函数
		loadObj() {
			var that = this
			
			var manager = new THREE.LoadingManager();
			manager.onProgress = function(item, loaded, total){
        window.console.log(item, loaded, total);
			};
			
			var onProgress = function(xhr){
        if(xhr.lengthComputable){
          var percentComplete = xhr.loaded / xhr.total * 100;
          window.console.log(Math.round(percentComplete, 2) + '% downloaded');
        }
			};
			
			var onError = function(xhr){
        window.console.error(xhr);
			};
      
      
// 		   var tga_loader = new TGALoader(manager);
// 			tga_loader.setPath('static/models/mooncake/');
// 			var map = tga_loader.load('Sofa_OS_0727_01___Default_Diffuse.tga')
// 			console.log(map)
// 			var material = new THREE.MeshPhongMaterial({  //MeshStandardMaterial
// 			    map:map ,
// // 			    normalMap: tga_loader.load('Sofa_OS_0727_01___Default_Normal.tga'),
// // 			    specularMap: tga_loader.load('贴图__3_法线凹凸.tga'),
// // 			    bumpMap: tga_loader.load('Sofa_OS_0727_01___Default_Bump.tga')
// 			});  
			var tga_loader = new THREE.TextureLoader(manager);
			tga_loader.setPath('static/models/mooncake/');
			var material = new THREE.MeshPhongMaterial({  //MeshStandardMaterial
      map: tga_loader.load('mooncake.png'),
// 			    normalMap: tga_loader.load('xian.jpg'),
// 			    specularMap: tga_loader.load('xian.jpg'),//高光贴图（Specular Map）
// 			    bumpMap: tga_loader.load('xian.jpg')//凹凸贴图（Bump Map）
			}); 
// 			console.log(material)
// 			material.map.repeat.set( 10, 10)
			var obj_loader = new OBJLoader(manager);
			obj_loader.setPath('static/models/mooncake/');
			obj_loader.load('mooncake.obj', function(object){
        var geometry = object.children[0].geometry;
        geometry.attributes.uv2 = geometry.attributes.uv;
        geometry.center();
        material.side = THREE.DoubleSide;
        var mesh = new THREE.Mesh(geometry, material);
        mesh.scale.multiplyScalar(0.2);
        that.scene.add(mesh);
        }, onProgress, onError); 
        }
    },
    mounted() {
      this.init();
    }
  }
</script>

<style scoped>
#container{
  width: 1200px;
  margin: 0 auto;
  height: 800px;
  overflow: hidden;
}
</style>

自己旋转的动画

关键代码是：

if(this.mesh){

          this.mesh.rotation.y+=0.01;

        }

这个写在render里面，让他自己转

<template>
  <div id="container">
  </div>
</template>
<script>
  import * as THREE from "three";
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
  import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
  //import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
  //import { TGALoader } from 'three/examples/jsm/loaders/TGALoader.js';
  export default { 
    name: "HelloWorld",
    data() {
      return {
        scene: '',//环境
        light: '',//灯光
        camera: '',//相机
        controls: '',//控制器
        renderer: '',//渲染
        mesh:'',
      }
    },
    methods: {
		init() {
			//创建场景
			this.scene = new THREE.Scene();
			// 创建相机
			this.camera =  new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 1000);
			this.camera.position.set(0,0,80);
			// 环境光
			this.scene.add(new THREE.AmbientLight(4210752, 3));
// 		this.scene.fog = new THREE.Fog(0xffffff, 0.015, 1000);//雾
			this.scene.background = new THREE.CubeTextureLoader()
      .setPath('static/cube/room-1/').load( ['px.jpg','nx.jpg','py.jpg','ny.jpg','pz.jpg','nz.jpg']);

// 		console.log(this.scene.background)

			// 平行光
			// var light = new THREE.DirectionalLight(0xffffff, 1);
			// light.position.set(30, 30, 30);
			// this.scene.add(light);
			
			// var helper = new THREE.CameraHelper(light.shadow.camera);
			// this.scene.add(helper); 

			this.scene.add(new THREE.AmbientLight(0x0c0c0c));
      let spotLight1 = new THREE.SpotLight(0xffffff);
      spotLight1.position.set(-400, -400, -400);

      let spotLight2 = new THREE.SpotLight(0xffffff);
      spotLight2.position.set(400, 400, 400);

      this.scene.add(spotLight1);
      this.scene.add(spotLight2);
			
			
			// 坐标系
			/* var axes = new THREE.AxesHelper(30);
			this.scene.add(axes); */
			
			//加载模型数据
      this.loadObj()

			//渲染
      this.renderer = new THREE.WebGLRenderer({
				antialias: true,    // 平滑效果
        alpha: true,    // canvas背景透明
			});
			this.renderer.setClearColor(0xFFFFFF);//背景
			
			this.renderer.setPixelRatio(window.devicePixelRatio);//为了兼容高清屏幕
			this.renderer.setSize(window.innerWidth, window.innerHeight);    
			//初始化控制器
			this.controls = new OrbitControls(this.camera,this.renderer.domElement);
			this.controls.target.set(0, 0,0);
			this.controls.update();
			
			this.animate();

      const container = document.getElementById('container');
      container.appendChild(this.renderer.domElement);   
      window.addEventListener('resize', this.onWindowResize, false);//添加窗口监听事件（resize-onresize即窗口或框架被重新调整大小）
		},
        //窗口监听函数
		onWindowResize() {
			this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
			this.renderer.setSize(window.innerWidth, window.innerHeight);
        },
        animate() {
          requestAnimationFrame(this.animate);
          this.render();
        },
        render() {
        if(this.mesh){
          this.mesh.rotation.y+=0.01;
        }
			this.controls.update();
			this.renderer.render(this.scene, this.camera);
        },
        //外部模型加载函数
		loadObj() {
			var that = this
			
			var manager = new THREE.LoadingManager();
			manager.onProgress = function(item, loaded, total){
        window.console.log(item, loaded, total);
			};
			
			var onProgress = function(xhr){
        if(xhr.lengthComputable){
          var percentComplete = xhr.loaded / xhr.total * 100;
          window.console.log(Math.round(percentComplete, 2) + '% downloaded');
        }
			};
			
			var onError = function(xhr){
        window.console.error(xhr);
			};
      
      
// 		   var tga_loader = new TGALoader(manager);
// 			tga_loader.setPath('static/models/mooncake/');
// 			var map = tga_loader.load('Sofa_OS_0727_01___Default_Diffuse.tga')
// 			console.log(map)
// 			var material = new THREE.MeshPhongMaterial({  //MeshStandardMaterial
// 			    map:map ,
// // 			    normalMap: tga_loader.load('Sofa_OS_0727_01___Default_Normal.tga'),
// // 			    specularMap: tga_loader.load('贴图__3_法线凹凸.tga'),
// // 			    bumpMap: tga_loader.load('Sofa_OS_0727_01___Default_Bump.tga')
// 			});  
			var tga_loader = new THREE.TextureLoader(manager);
			tga_loader.setPath('static/models/mooncake/');
			var material = new THREE.MeshPhongMaterial({  //MeshStandardMaterial
      map: tga_loader.load('mooncake.png'),
// 			    normalMap: tga_loader.load('xian.jpg'),
// 			    specularMap: tga_loader.load('xian.jpg'),//高光贴图（Specular Map）
// 			    bumpMap: tga_loader.load('xian.jpg')//凹凸贴图（Bump Map）
			}); 
// 			console.log(material)
// 			material.map.repeat.set( 10, 10)
			var obj_loader = new OBJLoader(manager);
			obj_loader.setPath('static/models/mooncake/');
			obj_loader.load('mooncake.obj', function(object){
        var geometry = object.children[0].geometry;
        geometry.attributes.uv2 = geometry.attributes.uv;
        geometry.center();
        material.side = THREE.DoubleSide;
        var mesh = new THREE.Mesh(geometry, material);
        window.console.log(mesh)
        mesh.scale.multiplyScalar(0.2);
        that.mesh = mesh;
        that.scene.add(mesh);
        }, onProgress, onError); 
        }
    },
    mounted() {
      this.init();
    }
  }
</script>

<style scoped>
#container{
  width: 1200px;
  margin: 0 auto;
  height: 800px;
  overflow: hidden;
}
</style>

 

 

lxhguard
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Stop-motion-OBJ:一个Blender附加组件，用于将OBJ网格序列作为框架导入
05-07
定格OBJ | | | Stop Motion OBJ是一种工具，可用于导入一系列网格文件（.obj，.stl或.ply），实时播放它们，然后将其渲染为动画。 每个网格可能具有不同的顶点数，多边形数，甚至还有不同的UV。 这对于导入流体模拟...
three.js 载入 3D 模型的方法
w418856的博客
05-09 3663
三维模型的加载器ColladaLoader模型加载器。GLTFLoader模型加载器。OBJLoader模型加载器。FBXLoader模型加载器。
three.js模型导入
lambyt的博客
06-29 1133
为了真正能够让你的场景借助three.js来进行显示，我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景。
Threejs 本地环境导入obj模型信息和mtl材质描述
最新发布
qq_34488715的博客
05-08 615
最近有帮人改一个项目要实现一些3D效果，于是乎想到了使用threejs来实现，因为项目架构比较老，使用传统script引入的方式书写代码，并且包括一些模型材质导入问题
import * as obj from 'xx'
前端小狮的博客
06-10 569
import * as obj from ‘xx’ 这种写法是把所有的输出包裹到obj对象里
vue2使用three加载obj模型及其材质
m0_55297623的博客
11-10 1649
three.js 加载obj及其模型
Vue项目中使用three.js外部引入obj模型
懮俍的博客
12-29 2884
公司项目需要往数字孪生等概念，实现模型展示数据，并且模型能交互 然后开始了学习three.js的路程，了解基本概念以后，外部引入obj后缀类型模型一直报错，模型加载老是失败。 看了很多博客以及官网案例很少有Vue2的案例，最终还是成功引入了模型 <template> <div></div> </template> <script> import * as Three from "three"; import OrbitControls
three.js 3D模型导入obj-mtl文件
10-12
本主题聚焦于如何利用`three.js`将3D模型导入到网页中，特别是使用`.obj`和`.mtl`文件格式。`.obj`文件是Wavefront公司创建的一种通用3D模型格式，它包含了模型的几何形状信息，如顶点、边和面。而`.mtl`文件则定义...
react-three-obj-loader:一个简单的应用程序，展示了如何在React中使用Three.js的OBJ加载器
05-08
这个仓库的目的是展示如何在一个简单的React组件中使用Three.js OBJ Loader。 现场演示 部署到Github页面： : 预习 应用功能 将OBJ模型加载到场景中 Three.js OrbitControls集成 调整窗口大小时调整场景大小 在...
candide-3.obj模型文件
06-05
candide-3人脸模型obj文件，包含点、三角面片，法向量信息
candide-3的obj文件
01-07
candide-3通用人脸模型obj文件，包含点、三角面片信息
Three.js 导入FBX模型 时 加载GTA 贴图问题
Gentle02的博客
04-08 3271
最近在学习three.js的时候 ，发现按照官网的例子导入FBX模型，模型显示黑色 ，没有材质显示。故特此记录解决方法 1.引入FBXLoader 与 TGALoader import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader import { TGALoader } from 'three/examples/jsm/loaders/TGALoader const fbxloader =new FBXLoader()
ThreeJs 学习之旅(十七)—Imported models(导入模型)
Florenza的博客
05-24 1253
初始代码: import './style.css' import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' import * as dat from 'dat.gui' import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader' import { DRACOLoad...
ThreeJS-3D教学八-OBJLoader模型加载+动画
weixin_44384273的博客
10-09 1231
OBJLoader 动画 模型 three
three.js 加载obj+mtl模型
dmyc1027的博客
05-22 4784
本文提供了three.js中 实现将obj+mtl模型加载到场景中 的方法。 我们欲实现将桥模型加载到场景中，并对桥设置透明度： 实现过程： 分别导入three.js中的OBJLoader，MTLLoader，将mtl材质加载到obj模型上。 加载时在函数体内编写代码，对材质的透明度属性进行设置。本mtl材质由多个子模型material.wire组成，故在设置时需要对多个子模型进行设置。transparent为是否使用透明度，opacity为透明度数值。当然，也可以仅对一个子模型进行设置，从
threejs关于模型的格式介绍,模型转换,模型压缩,模型加载的相关总结
红叶
01-28 9132
1.Threejs WebGL相关模型加载性能对比及模型压缩优化详解干货链接 1.科普：三维文件格式 科普：三维文件格式 2.如何在页面极速渲染3D模型 如何在页面极速渲染3D模型 3.3D性能优化 | 说一说glTF文件压缩 3D性能优化 | 说一说glTF文件压缩 2.webgl的模型格式选择: 列举3个最常用的模型格式 1. fbx FBX最大的用途是用在诸如在 Max、Maya、Softimage 等软件间进行模型、材质、动作和摄影机信息的互导，这样就可以发挥 Max 和 Maya 等软件的优势
(三) 记录H5做AR的过程,Three.js如何使用外部的模型文件
solanel的博客
09-16 1399
模型格式 首先我们需要了解模型文件的常用格式，Three.js 引擎支持的格式非常的多，我们最为常见的格式有 .obj + .mtl ，但使用这种模型格式存在一个问题，.obj 是静态模型，不支持动画数据存储，无法使用模型的动画，官方建议使用 glTF 这种模型格式 , 但是glTF目前应用比较少,有条件的朋友可以使用Blender导出glTF2文件,这次我们先了解如何使用相对常用的.obj + ...
js add方法_Vue集成three.js过程记录
weixin_39603492的博客
11-20 120
客户在某天突然想要做一个3D模型和前端元素相结合的展示平台，领导发话，只要苦兮兮的开始研究，经过一番搜索，看到了three.js的曙光。首先就是导入three.jsnpm install three --save 接下来就是一顿复制粘贴，很好，能展示出来个立方体了。可是怎么导入模型呢？一顿搜索猛如虎，obj文件第一次映入眼帘。C4D模型导出Obj又经历一番波折，拿到文件后开始琢磨怎么引入loade...
three.js记录一下实现模型放大缩小的限制
qq_53742640的博客
08-29 2546
请注意，以上代码假设你已经加载了你的模型。如果你尚未加载你的模型，请确保在添加事件监听器之前先加载你的模型。添加一个事件监听器来响应用户的放大和缩小操作。在监听器函数中，可以通过修改模型的缩放来实现放大和缩小效果。限制模型的最大放大倍数和最小缩小倍数，可以使用three.js中的缩放操作scale和事件监听器。首先，为了使模型可以缩放，需要将缩放属性设置为需要的初始值。方法来改变模型的缩放比例。为了限制模型的最大放大倍数和最小缩小倍数，我们使用了。方法，该方法将确保缩放的值不会超出指定的范围。
网页导入3d模型-obj/mtl文件
09-07
网页导入3D模型(Obj/mtl)文件的过程相对简单。首先，我们需要准备一个具有3D功能的网页环境，比如使用Three.js或Babylon.js这样的库。接下来，需要将模型文件(通常是.obj文件)和其关联的材质文件(.mtl文件)上传至...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值