首页 > 其他分享 >vue2.x引入threejs

vue2.x引入threejs

时间:2022-09-28 09:44:54浏览次数:77  
标签:threejs obj 模型 THREE three let vue2 引入 new

@

目录

vue2.x引入threejs

npm安装

npm install three

使用指定版本:

npm install three@<版本号>

其他插件

因为本次开发需要引入3D模型,所以需要使用 MTLLoader, OBJLoader两种加载器,因为开发需求和
版本问题, 最新版本自带的加载器不能实现需求,所以需要额外引入three-obj-mtl-loader插件,并且threejs版本需要退到122版本;

npm安装three-obj-mtl-loader

npm install three-obj-mtl-loader --save

实例

//-- html部分 -- 开始 --
<div class="three_box" id="container">
</div>
//-- html部分 -- 结束 --

import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // 控制器-控制相机运行轨道
import { MTLLoader, OBJLoader } from 'three-obj-mtl-loader' //项目中使用到.obj文件和.mtl文件,故引入

mounted() {
	let width = 1053	// dom宽度
	let height = 473	// dom高度
	
	this.scene = new THREE.Scene()// 运行创建场景函数
	let mtlLoader = new MTLLoader() //创建MTLLoader实例
	let objLoader = new OBJLoader() //创建OBJLoader实例
	let k = width / height	// 宽高比
	let camera = new THREE.PerspectiveCamera( 60, k, 1, 2000) //创建相机,这个相机模拟人眼所看到的景象,近大远小没参数分别为:
	//fov — 摄像机视锥体垂直视野角度
	//aspect — 摄像机视锥体长宽比
	//near — 摄像机视锥体近端面
	//far — 摄像机视锥体远端面
	camera.position.set( -500, 300, 300 )//设置相机位置
	this.initDoor()//调用引入3D模型方法
	this.initcao() //调用几何图形方法
	//点光源
	let point = new THREE.PointLight(0xffffff)
	point.position.set(800, 800, 2000); //光源位置
	this.scene.add(point);  //光源添加进场景
	
	//环境光
	let ambient = new THREE.AmbientLight(0xffffff); //设置环境光
	this.scene.add(ambient)  //讲环境光加入场景
	this.renderer = new THREE.WebGL1Renderer(); // 实例渲染器
	this.renderer.setSize( width, height) //渲染器宽高
	this.renderer.setClearColor(new THREE.Color('#07224e'), 1) //设置背景颜色
	setTimeout(() => {
	  document.getElementById('container').appendChild(this.renderer.domElement)//将渲染器添加进dom
	}, 500)
	this.animate()//调用动画效果
	this.controls = new OrbitControls(this.camera, this.renderer.domElement) //添加相机和渲染器到控制器,实现滑动
},
methods: {
	initcao() {
		let geometry = new THREE.BoxGeometry(3200, 1600, 8); //矩形平面
		let material = new THREE.MeshLambertMaterial({  // 配置样式,包括颜色 透明度等
			  color: new THREE.Color('#bcbfc6'),
			  transparent: true,
			  opacity: 0.3,
			  side: THREE.DoubleSide
		});
		let mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
		mesh.rotateX(-Math.PI / 2);
		this.scene.add(mesh); //网格模型添加到场景中
	},
	initDoor() {
		let that = this //后面回调会影响this指向
		let mtlLoader = new MTLLoader()
		let objLoader = new OBJLoader();
		mtlLoader.load('static/door.mtl', function( material) { //引入模型.mtl文件,是3D模型的贴图,如果不需要贴图可以不使用,模型会只有一个框架
		  material.preload();
		  objLoader.setMaterials(material)
		  objLoader.load('static/door.obj', //引入模型.obj文件
		      function( obj) {
		          obj.position.z = -188  //调整模型位置
		          obj.position.x = -265 //调整模型位置
		          obj.position.y = 10 //调整模型位置
		          obj.rotateY(Math.PI / 2) //调整模型角度
		          obj.scale.set( 20, 20, 20 ) //调整模型放大缩小倍数
		          that.scene.add(obj) //模型添加进场景
		      },
		  )
		})
	},
	animate() {
		//这里自己写点要对模型进行的操作
       this.renderer.render(this.scene, this.camera);
       requestAnimationFrame(this.animate) //这里按帧更新画面,大概一秒60次左右
         
     }, 
}


强调

如果在开发中需要引入3D模型,模型文件应放在与src文件同级的static下,引入方式应该是 'static/door.mtl'

如果在开发过程中出现threejs生成的canvas出现外边框,只需要用css样式修改,代码如下:

.three_box {
      width: 1053px;
       height: 473px;
       >>> canvas:focus-visible {
           outline: 0px
       }
   }

threejs官方文档

标签:threejs,obj,模型,THREE,three,let,vue2,引入,new
From: https://www.cnblogs.com/changx/p/16736929.html

相关文章

  • 【面试题】Vue2动态添加路由 router.addRoute()
    Vue2动态添加路由点击打开视频讲解更加详细场景:一般结合VueX和localstorage一起使用router.addRoutesvue-router4后已废弃:使用router.addRoute()代替。vue-router......
  • SpringBoot 引入 Mybatis plus 及 Mybatis-plus-generator 代码自动生成工具
    简介MyBatis-Plus(opensnewwindow)(简称MP)是一个MyBatis(opensnewwindow)的增强工具,在MyBatis的基础上只做增强不做改变,为简化开发、提高效率而生。Mybatispl......
  • threejs第一个案例
    1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">5<title>threejs初体验</title>6<scriptsrc="three.min.js"></......
  • VUE2整合markdown
    下载node.js官网检查安装完成之后的版本信息安装vue环境安装淘宝镜像:npminstall-gcnpm--registry=https://registry.npm.taobao.org安装vue-cli脚手架c......
  •  Springboot项目引入swagger2
    Springboot项目引入swagger2前言swagger是一个规范和完整的框架,用于生成、描述、调用和可视化的restful风格的web服务框架,总体目标是使客户端和文件系统作为服务器以同......
  • Vue2项目解决-js/css文件无法引用问题
    打包:    在vue.config.js文件中  const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({  transpileDependencies:t......
  • Vue3与Vue2的区别(面试题)
    模板指令1、v-if、v-for优先级区别3.0依然不建议写在一个元素上但是依然可以同时绑定Vue2:当在同一个元素上使用v-if时,将优先v-forVue3:v-if优先,再v-for 2、v-model......
  • vue引入echarts
    首先是npm下载npminstallecharts--save 配置echarts.js,按需引入//引入echarts核心模块,核心模块提供了echarts使用必须要的接口。import*asecha......
  • maven引入本地的方法
    jar包无法直接通过pom远程仓库下载,需要从自己本地引入的时候。方法一配置pom文件如下:将本地jar包引入工程,systemPath为jar所在的本地路径<dependency>......
  • VUE:引入腾讯地图并实现轨迹动画
    腾讯位置服务JavaScriptAPI效果:引入步骤:在html中通过引入script标签加载API服务在一个盒子元素div中预先准备地图容器,并在CSS样式中定义地图(容器)显示大小......