threejs vue,threejs 不规则几何体
最近学了一段时间的三个j，想开始做点什么。下面这篇文章主要介绍在vue3中如何用三个j画一些简单几何体的一些信息。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。
目录
前言threejs简介依赖包版本vue3操作DOM创建场景、相机和渲染器。在这一节及以下，我们将立方体球体柱面坐标系点光源鼠标操作旋转、缩放球体和立方体自动旋转编写成三个完整的代码摘要
前言
在vue3中，用threejs画几个最简单的几何体，比如自动旋转的立方体、圆柱体、球体，还加了光。几何体的阴影部分是光线照射不到的地方。结果如下。有兴趣的可以看看具体实施过程~
threejs简述
Three.js是基于原生WebGL包的三维引擎程序结构-Scene 3354 camera 3354 renderer Scene
场景是放置几何体的容器。
照相机，照相机
相机是拍摄的工具。通过控制相机的位置和方向，可以得到不同角度的图像。
渲染器
渲染器使用场景和相机进行渲染。渲染过程就像摄影师拍摄图像一样。如果只渲染一次，那就是静态图像。如果连续渲染，会得到动态画面。在JS中，可以使用requestAnimationFrame来实现高效的连续渲染。
【注意】具体的API与几何、材料等有关。不是很具体，有需要可以查阅cylinder geometrythree . js(webgl3d.cn)的中文文档。
依赖包版本
维特：^2.8.0，
三：^0.138.0，
^3.2.25
vue3操作DOM
-threejs的底层是webgl的封装，最后它使用canvas进行图形渲染，所以第一步是做操作dom的工作。
如下，在steup函数中定义一个响应常量dom，并将其公开给模板。将ref安装在特定的元素上，并在initThree中进行特定的绘图工作。模板
差异
演示
/div
div class= demo-main ref= DOM /div
/模板
脚本语言
从“vue”导入{ defineComponent，onMounted，ref }；
从“三”中导入*作为三；
从“three/examples/jsm/controls/OrbitControls”导入{ OrbitControls }；
导出默认定义组件({
setup() {
const DOM=refHTMLElement null(null)；
onMounted(()={
init three(DOM . value)；
});
函数initThree(实例：HTMLElement null) {
//dosomething
}
返回{ DOM }；
},
});
/脚本
样式范围。演示-主界面{
高度：500px
填充：9px 14px
边距-底部：14px
背景色：# f7f7f9
边框：1px纯色# e1e1e8
边框-半径：4px
}
/风格
创建场景，相机，渲染器 本节及后续都在initThree方法中写
我们创建了threejs的一些基本东西如下：var He TGHT=instance . client height-25；
var width=instance . client width-25；
//创建场景对象场景
var场景=新三。场景()；
//创建一个照相机对象
var相机=新三。透视相机(75，1，0.1，1000)；
//创建渲染器对象
var渲染器=新三。WebGLRenderer()；
renderer.setSize(width，heght)；
instance . append(renderer . DOM element)；
renderer.render(场景、相机)；
camera . position . z=5；
renderer . setclearcolor(0x eeeeee，1.0)；
立方体
//立方体网格模型
var cubeGeometry=new THREE。BoxGeometry(1，1，1)；
//材质对象材质
//材质决定了如何在几何图形中绘制表面。如果几何体是骨架并定义了形状，那么材质就是蒙皮。three.js中有许多不同种类的材质，它们有不同的属性，比如反射、纹理映射和透明度调整。
var cubeMaterial=new THREE。MeshLambertMaterial({
颜色：0xff0000，
不透明度：0.7，
透明：真实，
});
var cube=新三。网格(立方体几何，立方体材料)；
scene.add(立方体)；
球体
//球体网格模型
定义变量球面几何=新三。球面几何(1,20,20);
var球形材料=新三MeshLambertMaterial({
颜色：0xff00ff，
镜面反射：0x4488ee，
闪亮度：12,
});
定义变量球面=新三。网格（球形测量，球形材料);//网格模型对象网状物
球体。平移y(120)；//球体网格模型沿Y轴正方向平移120
sphere.position.set(0，0，5)；
场景.添加(球体);
圆柱体
//圆柱网格模型
var cylinderGeometry=new THREE .圆柱几何形状(1,1,5,32);
var cylinderMaterial=new THREE .MeshLambertMaterial({
颜色：0xffff00，
});
定义变量缸=新三。网格(cylinderGeometry，圆柱体材料)；//网格模型对象网状物
cylinder.position.set(10，0，0)；//设置圆筒模型对象的坐标坐标为10,0,0
场景.添加(圆柱体);
坐标系
//辅助坐标系参数400表示坐标系大小，可以根据场景大小去设置
var axisHelper=new THREE .轴心助手(20)；
场景。添加(轴帮助器)；
点光源
//点光源
定义变量点=新三。点光源(0x ffffff)；
point.position.set(0，0，0)；
场景.添加(点);//点光源添加到场景中
//点光源2位置和要点关于原点对称
var point2=新三。点光源(0x ffffff)；
point2.position.set(-400，-200，-300)；//点光源位置
场景。添加(第2点)；//点光源添加到场景中
鼠标操作旋转，缩放
//鼠标操作旋转、缩放，轨道控制需要单独引入
新的OrbitControls(摄像机、渲染器。DOM元素)；
球体，立方体自动旋转
var animate=function () {
requestAnimationFrame(animate)；
立方体。旋转。x=0.01
立方体。旋转。y=0.01
球体。旋转。x=0.01
球体。旋转。y=0.01
renderer.render(场景、相机);
};
animate()；
initThree完整代码
函数initThree(实例：HTMLElement null) {
var heght=instance。客户身高-25；
变量宽度=实例。客户端宽度-25；
//创建场景对象事件
定义变量场景=新三。场景();
//创建相机对象
定义变量相机=新三。透视相机(75,1,0.1,1000);
//创建渲染器对象
定义变量渲染器=新三WebGLRenderer()；
renderer.setSize(width，he ght)；
实例。追加(渲染器。DOM元素)；
renderer.render(场景、相机);
相机。位置。z=5；
渲染器。setclearcolor(0x eeeeee，1.0)；
//立方体网格模型
var cubeGeometry=new THREE .BoxGeometry(1，1，1)；
//材质对象材料
var cubeMaterial=new THREE .MeshLambertMaterial({
颜色：0xff0000，
不透明度：0.7,
透明：真实，
});
var cube=新三。网格（立方体几何，立方体材料);
场景.添加(立方体);
//球体网格模型
定义变量球面几何=新三。球面几何(1,20,20);
var球形材料=新三MeshLambertMaterial({
颜色：0xff00ff，
镜面反射：0x4488ee，
闪亮度：12,
});
定义变量球面=新三。网格（球形测量，球形材料);//网格模型对象网状物
球体。平移y(120)；//球体网格模型沿Y轴正方向平移120
sphere.position.set(0，0，5)；
场景.添加(球体);
//圆柱网格模型
var cylinderGeometry=new THREE .圆柱几何形状(1,1,5,32);
var cylinderMaterial=new THREE .MeshLambertMaterial({
颜色：0xffff00，
});
定义变量缸=新三。网格(cylinderGeometry，圆柱体材料)；//网格模型对象网状物
cylinder.position.set(10，0，0)；//设置圆筒模型对象的坐标坐标为10,0,0
场景.添加(圆柱体);
//辅助坐标系参数400表示坐标系大小，可以根据场景大小去设置
var axisHelper=new THREE .轴心助手(20)；
scene . add(axis helper)；
//点光源
var点=新三。点光源(0x ffffff)；
point.position.set(0，0，0)；
scene.add(点)；//点光源被添加到场景中
//点光源2的位置和点关于原点对称。
var point2=新三。点光源(0x ffffff)；
point2.position.set(-400，-200，-300)；//点光源位置
scene . add(point 2)；//点光源被添加到场景中
//通过鼠标操作旋转和缩放
新的OrbitControls(camera，renderer . DOM element)；
var animate=function () {
requestAnimationFrame(animate)；
cube . rotation . x=0.01；
cube . rotation . y=0.01；
sphere . rotation . x=0.01；
sphere . rotation . y=0.01；
renderer.render(场景、相机)；
};
animate()；
}
总结
关于如何在vue3中用三个j画一些简单的几何图形的这篇文章就到这里了。关于在vue3中用threejs绘制几何图形的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。