首页 > 其他分享 >three.js 3d模型使用|vue项目使用three.js

three.js 3d模型使用|vue项目使用three.js

时间:2023-12-12 16:05:15浏览次数:36  
标签:vue 对象 THREE three var new js

three.js 3D模型使用

安装

安装three.js

npm install three

安装轨道控件插件

npm install three-orbit-controls

安装加载.obj和.mtl文件的插件

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

安装渲染器插件

npm install --save three-css2drender

导入

import * as Three from "three";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { ConvexGeometry } from 'three/examples/jsm/geometries/ConvexGeometry.js'
import {BufferGeometryUtils} from 'three/examples/jsm/utils/BufferGeometryUtils.js'
// import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader'
import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader.js';
import {MTLLoader} from 'three/examples/jsm/loaders/MTLLoader.js';

创建3Ddemo

创建场景对象Scene
var scene = new THREE.Scene();
创建几何模型
// var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象(球体半径,水平细分数,垂直细分数)
var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
模型的格式Geometry和BufferGeometry

当前Three.js内置了这两种几何体类型,这两个几何体类型都是用于存储模型的顶点位置、面的索引、法向量、颜色、uv纹理以及一些自定义的属性。
它们两个的区别是:BufferGeometry存储的都是一些原始的数据,性能比Geometry的性能高,很适合存储一些放入场景内不需要再额外操作的模型。而Geometry的优势刚好相反,Geometry比BufferGeometry更友好,使用了Three.js提供的THREE.Vector3或者THREE.Color这样的对象来存储数据(顶点位置,面,颜色等),这些对象易于阅读和编辑,但效率低于BufferGeometry使用的类型化数组。

Geometry和BufferGeometry互转
//实例化一个Geometry对象
var geo = new THREE.Geometry(); 
//调用对象的fromBufferGeometry方法,并将需要转换的bufferGeometry传入
geo.fromBufferGeometry(bufferGeometry);
//geo为转换转换成的Geometry
模型平移
mesh.position.set(120, 0, 0);//设置mesh3模型对象的xyz坐标为120,0,0
mesh.translateX(120); //球体网格模型沿X轴正方向平移120
自定义几何体
// 自定义几何体
var geometry1 = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象

//类型数组创建顶点数据
var vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 10, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 10, //顶点6坐标
]);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组,表示一个顶点的xyz坐标
// 设置几何体attributes属性的位置属性
geometry1.attributes.position = attribue;
网格渲染模式
// 三角面(网格)渲染模式
var material = new THREE.MeshBasicMaterial({
    color: 0x0000ff, //三角面颜色
    side: THREE.DoubleSide //两面可见
}); //材质对象
var mesh_zidingyi = new THREE.Mesh(geometry1, material); //网格模型对象Mesh
点渲染模式
// 点渲染模式
var material = new THREE.PointsMaterial({
  color: 0xff0000,
  size: 10.0 //点对象像素尺寸
}); //材质对象
var points = new THREE.Points(geometry, material); //点模型对象
scene.add(points); //点对象添加到场景中
线渲染模式
// 线条渲染模式
var material=new THREE.LineBasicMaterial({
    color:0xff0000 //线条颜色
});//材质对象
var line=new THREE.Line(geometry,material);//线条模型对象
scene.add(line);//线条对象添加到场景中
创建材质对象
var material = new THREE.MeshLambertMaterial({
    color: '#ffff66', //材质颜色
    opacity: 0.8, // 材质透明度
    transparent: true, // 开启透明效果
    wireframe:false, // 几何图形渲染为线框
}); //材质对象Material

//可以访问材质对象的属性设置 单独控制样式
this.material.opacity = 0.5;
this.material.transparent = true;
创建网格模型
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
光源设置
点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
环境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
相机设置
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 200; //三维场景显示范围控制系数,系数越大,显示的范围越大
创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
创建渲染器对象
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
执行渲染操作 指定场景、相机作为参数
renderer.render(scene, camera);

功能

旋转
// 旋转渲染函数
render() {
    this.T1 = new Date();//本次时间
    let t = this.T1 - this.T0;//时间差
    console.log(t);
    this.T0 = this.T1;//把本次时间赋值给上次时间
    this.mesh.rotateY(0.0006 * t);//每秒旋转0.6弧度
    this.renderer.render(this.scene, this.camera);//执行渲染操作
    requestAnimationFrame(this.render) // 根据浏览器刷新频率实时控制循环时间
}
平移
this.mesh.translateX(100);//沿着x轴正方向平移距离100
缩放
this.mesh.scale.x = 2.0;
this.mesh.scale.set(0.5, 1.5, 2)
位置
this.mesh.position.set(80,2,10);
this.mesh.position.y = 80;

鼠标操作

var controls = new OrbitControls(this.camera, this.renderer.domElement);//创建控件对象
controls.addEventListener('change', this.render);//监听鼠标、键盘事件

标签:vue,对象,THREE,three,var,new,js
From: https://www.cnblogs.com/ommggg/p/17897072.html

相关文章

  • vue3 对子组件使用 v-model,关于绑定对象的问题
    这里有最基本的使用,vue3官网组件v-model我来讲讲注意事项,如果你v-model的是个reactive创建的对象,那么将不起作用,必须得是ref创建的对象要知道,v-model:<inputv-model="searchText"/><!--等价于--><input:value="searchText"@input="searchText=$event.ta......
  • NodeJs学习笔记
    目录NodeJsBuffer(缓冲区)概念特点使用计算机基础进程与线程fs模块写入文件①.writeFile异步写入②.writeFileSync同步写入③.appendFile/appendFileSync追加写入④.createWriteStream流式写入需要写入文件的场景文件读取①.readFile异步读取②.readFileSync同步读......
  • websocket使用方法|vue实时推送
    WebSocket实时推送创建一个WebSocket对象:准备变量mounted(){//初始化consturi=window.location.href;//获取网页urlconstprotocol=uri.split("/")[0];//https:确定当前传输协议constdomain=uri.split("/")[2];//Iip:portconstwsPr......
  • js笔记
    js基础javascript是基于对象和事件驱动的脚本语言。//直接在页面中嵌入脚本<script>alert('弹窗警告');document.write("在浏览器上输出文字");console.log("这句话会在控制台显示,在浏览器上按f12呼出控制台");</script>//引用外部脚本,注意:此处只能使用相对路径,或网络路......
  • pdf.js打开后的pdf文件
    原文链接:https://www.cnblogs.com/the-big-dipper/p/16880180.html 1、html项目方法:<ahref="../../pdf/web/viewer.html?file=../../pdf/1.pdf"target="_blank">文件</a>最重要的是href的地址。href地址的组成:pdfjs的viewer.html地址 + ?file=+ pdf文件地址pdfjs......
  • vue 逻辑分页
    <template><div><divclass="paging"><!--数据显示区域--><divclass="data"><!--表格存放数组中的数据,并对数据进行截取,以控制每一页显示的数据量--><!--slice(start,end)不包括end--><el-ta......
  • VueRouter中存储路由的参数是什么?
    一、VueRouter的基本介绍什么是VueRouter是一个Vue.js官方的路由管理器,它可以帮助我们在Vue.js应用中实现页面之间的导航和跳转。它提供了一系列的API和配置选项,使得我们可以更加灵活地管理和控制应用的路由。在VueRouter中,存储路由的参数主要是通过路由对象来实现的。每当我们进行......
  • vue项目目录讲解
    1、build:构建脚本目录1)build.js  ==> 生产环境构建脚本;2)check-versions.js  ==> 检查npm,node.js版本;3)utils.js  ==> 构建相关工具方法;4)vue-loader.conf.js  ==> 配置了css加载器以及编译css之后自动添加前缀;......
  • vue 深拷贝
    方法一:cloneDeepimport{cloneDeep}from'lodash-es'//直接使用constitems=cloneDeep(multipleSelection)方法二:​通过JSON.parse(JSON.stringify(obj))优缺点满足一般使用场景,用JSON.stringify把对象转成字符串,再用JSON.parse把字符串转成新的对象。但这种......
  • node.js--npm初始
    npm安装安装node.js时候会自动安装npm,所以如果安装了node.js就不需要安装npm了,命令行使用命令npm-v查看npm版本,出现版本号,则表示安装成功。npm初始化包使用npminit命令创建一个package.json文件,然后使用npminstall命令安装依赖。如果使用命令npminit-y则......