中使用three.js

前言

在vue3项目中，通过three.js收款定制开发使用了一段短小但完整收款定制开发的代码实现了实际的三维效果图。

一、three.js是什么？

Three.js收款定制开发是一个轻量级，跨平台的Javascript库，收款定制开发可以在浏览器上结合HTML5的canvas,SVG或者WebGL，收款定制开发创建和展示3D收款定制开发模型和动画。
Three.js收款定制开发允许我们在不依赖任何浏览器插件的情况下，创建一个GPU加速的3D动画场景。

二、vue3中下载与安装three.js

1.利用three.js：

npm install three1

2.npm安装轨道控件插件：

npm install three-orbit-controls1

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

npm i --save three-obj-mtl-loader1

4.安装渲染器插件：

npm i --save three-css2drender1

安装好后在需要调用的vue文件中引用：

import * as Three from 'three'1

三、操作步骤

场景——相机——渲染器是在Three.js中必不可少的三要素，只有以上三者结合才能渲染出可见的内容。

1.创建场景

	//创建一个三维场景    const scene = new THREE.Scene();1
2

2.创建物体

    const geometry = new THREE.BoxGeometry(100, 100, 100);//长宽高都是100的立方体    // const geometry = new THREE.SphereGeometry(60,40,40);//半径是60的圆    //widthSegments, heightSegments：水平方向和垂直方向上分段数。widthSegments最小值为3，默认值为8。heightSegments最小值为2，默认值为6。    //创建材质（外观）    const material = new THREE.MeshLambertMaterial({        // color: 0x0000ff,//设置材质颜色(蓝色)        color: 0x00ff00,//(绿色)        transparent: true,//开启透明度        opacity: 0.5 //设置透明度    });    //创建一个网格模型对象    const mesh = new THREE.Mesh(geometry, material);//网络模型对象Mesh    //把网格模型添加到三维场景    scene.add(mesh);//网络模型添加到场景中1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.添加光源

    //添加光源 //会照亮场景里的全部物体（氛围灯），前提是物体是可以接受灯光的，这种灯是无方向的，即不会有阴影。    const ambient = new THREE.AmbientLight(0xffffff, 0.4);    const light = new THREE.PointLight(0xffffff, 1);//点光源，color:灯光颜色，intensity:光照强度1
2
3
4

4.添加相机

    //创建一个透视相机，窗口宽度，窗口高度    const width = window.innerWidth, height = window.innerHeight;    const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000);    //设置相机位置    camera.position.set(300,300,300);    //设置相机方向    camera.lookAt(0,0,0);1
2
3
4
5
6
7

5.开始渲染

    //创建一个WebGL渲染器    const renderer = new THREE.WebGLRenderer()    renderer.setSize(width,height)//设置渲染区尺寸    renderer.render(scene,camera)//执行渲染操作、指定场景、相机作为参数1
2
3
4

四、myThree.vue源代码

说了这么多，现奉上myThree.vue源代码：

<template>    <div id="my-three"></div></template><script lang='ts' setup>    import * as THREE from 'three'    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'    import { onMounted  } from 'vue'    //创建一个三维场景    const scene = new THREE.Scene();    //创建一个物体（形状）    const geometry = new THREE.BoxGeometry(100, 100, 100);//长宽高都是100的立方体    // const geometry = new THREE.SphereGeometry(60,40,40);//半径是60的圆    //widthSegments, heightSegments：水平方向和垂直方向上分段数。widthSegments最小值为3，默认值为8。heightSegments最小值为2，默认值为6。    //创建材质（外观）    const material = new THREE.MeshLambertMaterial({        // color: 0x0000ff,//设置材质颜色(蓝色)        color: 0x00ff00,//(绿色)        transparent: true,//开启透明度        opacity: 0.5 //设置透明度    });    //创建一个网格模型对象    const mesh = new THREE.Mesh(geometry, material);//网络模型对象Mesh    //把网格模型添加到三维场景    scene.add(mesh);//网络模型添加到场景中    // 添加多个模型（添加圆形）    // const  geometry2 = new THREE.SphereGeometry(60, 40, 40);    // const  material2 = new THREE.MeshLambertMaterial({    //     color: 0xffff00    // });    // const mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh    // // mesh3.translateX(120); //球体网格模型沿Y轴正方向平移120    // mesh2.position.set(120,0,0);//设置mesh3模型对象的xyz坐标为120,0,0    // scene.add(mesh2);    //添加光源 //会照亮场景里的全部物体（氛围灯），前提是物体是可以接受灯光的，这种灯是无方向的，即不会有阴影。    const ambient = new THREE.AmbientLight(0xffffff, 0.4);    const light = new THREE.PointLight(0xffffff, 1);//点光源，color:灯光颜色，intensity:光照强度    scene.add(ambient);    light.position.set(200,300,400);    scene.add(light);    //创建一个透视相机，窗口宽度，窗口高度    const width = window.innerWidth, height = window.innerHeight;    const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000);    //设置相机位置    camera.position.set(300,300,300);    //设置相机方向    camera.lookAt(0,0,0);    //创建辅助坐标轴    const axesHelper = new THREE.AxesHelper(200);//参数200标示坐标系大小，可以根据场景大小去设置    scene.add(axesHelper);    //创建一个WebGL渲染器    const renderer = new THREE.WebGLRenderer()    renderer.setSize(width,height)//设置渲染区尺寸    renderer.render(scene,camera)//执行渲染操作、指定场景、相机作为参数    const controls = new OrbitControls(camera, renderer.domElement)//创建控件对象    controls.addEventListener('change',()=>{        renderer.render(scene, camera)//监听鼠标，键盘事件    })    onMounted(()=>{        document.getElementById('my-three')?.appendChild(renderer.domElement)    })</script><style lang='scss'>    body{        margin: 0;        padding: 0;    }</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

五、效果图

1.单个模型

2.多个模型

总结

在vue3项目中，通过three.js实现了实际的三维效果demo，未来会继续深入研究，总之3D渲染图形是一个很好玩的东西，欢迎大家一起交流。

收款定制开发vue3项目中使用three.js