three.js自定义几何体

最新推荐文章于 2024-07-26 13:58:52 发布
最新推荐文章于 2024-07-26 13:58:52 发布
阅读量1.9k 收藏 3
点赞数 1
分类专栏： three.js 文章标签： three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dtbk123/article/details/103502538
版权

three.js提供了很多创建几何体对象的方法，如BoxGeometry，SphereGeometry等，当然也可以自己创建几何体如下面这段代码

var gemo=new THREE.Geometry()
//定义几何体的顶点
var vertices=[new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,6),new THREE.Vector3(7,0,0),new THREE.Vector3(0,8,0)]
//定义顶点的连接顺序，顺时针为向光，逆时针为背光
var face=[new THREE.Face3(0,1,2),new THREE.Face3(0,2,3),new THREE.Face3(0,1,3),new THREE.Face3(1,2,3)]
gemo.vertices=vertices;
gemo.faces=face;
gemo.computeFaceNormals()
var Mesh=[new THREE.MeshLambertMaterial({color:0x44ff44,opacity:0.6,transparent:true}),
            new THREE.MeshBasicMaterial({color:0x000000,wireframe:true})]
//定义两种材质混和
 var mesh=new THREE.SceneUtils.createMultiMaterialObject(gemo,Mesh)
mesh.children.forEach((item)=>{
      item.receiveShadow=true;
            })

这样就创建了一个四面体，其中THREE.SceneUtils.createMultiMaterialObject(gemo,Mesh)是创建多种材质的网格对象，接下来我们还可以用dat.GUI控制它的各个顶点

 var gui= new dat.GUI()
       function contorls(x,y,z){
          var con=new function(){
                 this.x=x
                 this.y=y
                 this.z=z
                }
                return con;
            }

            var con=[]
                con.push(contorls(0,0,0))
                con.push(contorls(0,0,6))
                con.push(contorls(7,0,0))
                con.push(contorls(0,8,0))
            
            for(var i=0;i<4;i++){
                var flod=gui.addFolder('vertices'+i);
                flod.add(con[i],'x',-10,10)
                flod.add(con[i],'y',-10,10)
                flod.add(con[i],'z',-10,10)
            }
 function render(){
                    var vertices=[]
                    for(var i=0;i<4;i++){
                        vertices.push(new THREE.Vector3(con[i].x,con[i].y,con[i].z))
                    }

                    mesh.children.forEach((item)=>{
                        item.geometry.vertices=vertices//更新顶点
                        item.geometry.verticesNeedUpdate=true;//设置顶点需要更新
                        item.geometry.computeFaceNormals()
                    })
                    renderer.render(scene,camera)
                    requestAnimationFrame(render)
                }
                render()

最后我们还可以克隆出另一个几何体，完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <style>
    body{margin:auto;
        overflow:hidden;
    }
    </style>
</head>
<script src="../learning-threejs/libs/three.js"></script>
<script src="../learning-threejs/libs/stats.js"></script>
<script src="../learning-threejs/libs/dat.gui.js"></script>
<script src="../learning-threejs/libs/ConvexGeometry.js"></script>
<script src="../learning-threejs/libs/ParametricGeometries.js"></script>

<body>
    <div id="Webgl-output"></div>
    <div id='stats'></div>
    <script>
        function init(){
            var stats=new Stats()
            var scene=new THREE.Scene();
            var renderer=new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth,window.innerHeight)
            renderer.setClearColor(new THREE.Color(0xffffff))
            var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);

            var planeGeometry=new THREE.PlaneGeometry(50,50)
            var planeMesh=new THREE.MeshLambertMaterial({color:0xffffff})
            var plane=new THREE.Mesh(planeGeometry,planeMesh);
            plane.rotation.x=-0.5*Math.PI
            plane.position.set(-10,0,-10);
            plane.receiveShadow=true;
            renderer.ShadowMapEnabled=true;
            scene.add(plane)
            camera.position.set(15,30,35)
            var spotLight=new THREE.SpotLight({color:0xffffff});
            spotLight.position.set(-20,30,35)
            scene.add(spotLight)

            var gemo=new THREE.Geometry()
            var Mesh=[new THREE.MeshLambertMaterial({color:0x44ff44,opacity:0.6,transparent:true}),
            new THREE.MeshBasicMaterial({color:0x000000,wireframe:true})]

            var mesh=new THREE.SceneUtils.createMultiMaterialObject(gemo,Mesh)

            mesh.children.forEach((item)=>{
                item.receiveShadow=true;
            })

            var gui= new dat.GUI()

             function contorls(x,y,z){
                var con=new function(){
                    this.x=x
                    this.y=y
                    this.z=z
                }
                return con;
            }

            var con=[]
            
                con.push(contorls(0,0,0))
                con.push(contorls(0,0,6))
                con.push(contorls(7,0,0))
                con.push(contorls(0,8,0))

            for(var i=0;i<4;i++){
                var flod=gui.addFolder('vertices'+i);
                flod.add(con[i],'x',-10,10)
                flod.add(con[i],'y',-10,10)
                flod.add(con[i],'z',-10,10)

            }

            var vertices=[new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,6),new THREE.Vector3(7,0,0),new THREE.Vector3(0,8,0)]
                var face=[new THREE.Face3(0,1,2),new THREE.Face3(0,2,3),new THREE.Face3(0,1,3),new THREE.Face3(1,2,3)]
                gemo.vertices=vertices;
                gemo.faces=face;
                gemo.computeFaceNormals()
            
                function render(){
                    var vertices=[]
                    for(var i=0;i<4;i++){
                        vertices.push(new THREE.Vector3(con[i].x,con[i].y,con[i].z))
                    }

                    mesh.children.forEach((item)=>{
                        item.geometry.vertices=vertices
                        item.geometry.verticesNeedUpdate=true;
                        item.geometry.computeFaceNormals()
                    })
                    renderer.render(scene,camera)
                    requestAnimationFrame(render)
                }
                render()


                gui.add(new function(){
                   this.clone=function(){ var gemo=mesh.children[0].geometry.clone()
                   
                     var materials = [
                    new THREE.MeshLambertMaterial({opacity: 0.6, color: 0xff44ff, transparent: true}),
                    new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})
                ];
                    var clone=new THREE.SceneUtils.createMultiMaterialObject(gemo,materials)
                    clone.children.forEach(item=>{item.receiveShadow=true})
                    clone.name='clone'
                    scene.remove(scene.getObjectByName('clone'))//移除原先克隆的
                    clone.translateX(5)
                    clone.translateZ(9)
                    scene.add(clone)

}
                },'clone')

            scene.add(mesh)
            var ambientLight=new THREE.AmbientLight(0x0c0c0c)
            scene.add(ambientLight)
            scene.add(camera)
            camera.lookAt(scene.position)
            renderer.render(scene,camera)
            document.getElementById('Webgl-output').appendChild(renderer.domElement)
            window.resize=function(){
                camera.ascept=window.innerWidth/window.innerHeight;
                renderer.setSize(window.innerWidth,window.innerHeight);
                camera.updateProjectionMatrix()
                renderer.render(scene,camera)
            }
        }

        window.onload=init()
    </script>
</body>
</html>

其中mesh.children[0].geometry.clone是创建一个坐标，平面跟原来一样的几何体

渣渣前端
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
threejs 三面体_Three.js 自定义了一个几何体
weixin_39875629的博客
12-20 1179
几何体本质：立方体几何体BoxGeometry本质上就是一系列的顶点构成，只是Threejs的APIBoxGeometry把顶点的生成细节封装了，用户可以直接使用。比如一个立方体网格模型，有6个面，每个面至少两个三角形拼成一个矩形平面，每个三角形三个顶点构成，对于球体网格模型而言，同样是通过三角形拼出来一个球面，三角形数量越多，网格模型表面越接近于球形。法向量：什么是法向量？三维平面的法线是垂直于...
THREE--demo3（自定义几何体）
希望我快乐
09-01 140
THREE--demo3（自定义几何体）
Three 三维向量（Vector3）
最新发布
前端学习杂记，记录学习中的前端知识。
07-26 1027
该类表示的是一个三维向量（3D一个三维向量表示的是一个有顺序的、三个为一组的数字组合（标记为x、y和z）， 可被用来表示很多事物。一个位于三维空间中的点。一个在三维空间中的方向与长度的定义。在three.js中，长度总是从(0, 0, 0)到(x, y, z)的（欧几里德距离，即直线距离）， 方向也是从(0, 0, 0)到(x, y, z)的方向。任意的、有顺序的、三个为一组的数字组合。
three.js常用几何体介绍以及自定义几何体
jieyucx的博客
06-21 934
/ 添加物体 // 创建几何体 for(let i = 0;i < 50;i ++) {// 每一个三角形，需要3个顶点，每个顶点需要3个值 const geometry = new THREE . BufferGeometry();j < 9;j ++) {// 根据几何体和材质创建物体 const mesh = new THREE . Mesh(geometry , material);
WebGL three.js学习笔记 自定义顶点建立几何体
nsytsqdtn的博客
04-15 1205
自定义顶点建立几何体与克隆 Three.js本身已经有很多的网格模型，基本已经够我们的使用，但是如果我们还是想自己根据顶点坐标来建立几何模型的话，Three.js也是可以的。 基本效果如图： 实际上出于性能的考虑，three.js是认为我们的几何体在整个生命周期中是不会改变的，但是我们还是想使用dat.gui.js去实时更新我们自定义几何体的顶点信息。 当顶点信息发生变化时，我们就需要使用 ge...
20three.js自定义几何体
X01动力装甲的专栏
05-04 825
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>20three.js自定义几何体</title> <script src="../js/three.js"></script&g...
threejs学习之自定义几何体BufferGeometry
旅行中的伊蕾娜的博客
05-04 172
第二种方法是只编写出需要的坐标，不编写完整绘制点，顺序也可以打乱，通过索引，控制编写的坐标应该按照什么顺序进行绘制。这次学习了两个自定义几何体的方法，第一个通过编写完整的顶点坐标，绘制一个正方形。去掉重复的右上和坐下坐标点，然后编写索引，这样就会按照索引来取坐标点进行绘制。几何体是由坐标点绘制成线，线绘制成三角形，多个三角形拼接成的。
Three.js点线几何空间图形特效
07-24
1. **Three.js的几何体**：在Three.js中，你可以创建各种几何体，如BoxGeometry（立方体）、SphereGeometry（球体）和LineGeometry（线条）。对于"点线几何空间图形特效"，LineGeometry是关键。这个几何体允许开发者...
three. js的人体解剖图.zip
07-14
对于人体解剖图，可能需要自定义几何体来精确匹配人体各个部位的形状。 2. 材质（Material）：决定了物体表面的视觉效果，如颜色、光泽度和透明度等。常见的材质类型有MeshBasicMaterial、MeshLambertMaterial和...
三维模型-three.js-PCD模型文件，用于three.js显示pcd文件
07-25
一种常见的方法是使用第三方工具或者自定义脚本来读取和解析PCD文件，将点云数据转化为Three.js的几何体对象，比如BufferGeometry，然后通过点材质（PointsMaterial）和点云几何体（Points）来创建3D点云效果。...
Test1_海洋_three.js大海_ThreeJS_threejs体绘制数据_threejs颜色_
10-03
在本项目中，"Test1_海洋_three.js大海_ThreeJS_threejs体绘制数据_threejs颜色_" 提供了一个关于使用Three.js库创建海洋温度颜色体绘制的实例。Three.js是一款强大的JavaScript库，专用于在Web浏览器中进行3D图形...
ThreeJS 炫酷特效旋转多面体Web页 Demo
06-06
有文章对其进行详细解释：https://blog.csdn.net/A757291228/article/details/131069121 本案例为一个 threejs 的特效网页，大小球体进行包裹，外球体为透明材质，但是进行了线框渲染，使其能够通过外球踢查看其内球体。 在文章中详细解释了各个技术要求，包括： 一、ThreeJS 三要素 二、代码中创建三要素 2.1 创建 html 2.2 css 编写 2.3 创建三要素 渲染器 场景 摄像头 三、几何体创建 3.1 创建二十面缓冲几何体 3.2 创建二十面体的显示样式 3.3 创建 Mesh 用于组装 3D 对象 渲染 3.4 创建光源 3.5 创建环境物体 3.6 animation 动画
three.js3维坐标系+绘制立方体（带边框）
02-28
在本文中，我们将深入探讨如何使用three.js库创建一个3维坐标系，并在该系统中绘制带有边框的立方体，以及在立方体表面绘制线条。three.js是JavaScript的一个强大库，专门用于在Web浏览器中进行3D图形编程。让我们一...
Three.js - 几何体（五）
小小的前端
04-25 1596
几何体 在three.js中如球体、立方体、平面、狗、猫、人、树、建筑等物体，都是几何体。它们都是根据大量顶点参数生成。 在three.js中内置了许多基本几何体，也提供了自定义几何体的方法。在开发中常见的做法是让美术在 3D 建模软件中创建 3D 模型，在由开发人员进行交互开发。 常见几何体 BoxGeometry 盒子 分段数简单理解，就是每多一个分段，在对应面的轴上添加两个顶点，增加组成这个面三角形的数量。分段数越多面就越精细，性能消耗也会变大。 const width = 8 /
three.js之高级几何体-ParametricGeometry自定义几何体(vue中使用three.js35)
点燃火柴的博客
12-01 1203
ParametricGeometry自定义几何体介绍和使用1.ParametricGeometry自定义几何体介绍2.ParametricGeometry自定义几何体使用2.1定义function2.2创建ParametricGeometry几何体对象2.3附材质创建Mesh对象并添加到场景3.demo说明4.demo代码 1.ParametricGeometry自定义几何体介绍 ParametricGeometry可以创建基于等式的几何体。即可以通过自定义函数来创建自定义的几何体。创建Parametric
three.js自定义几何体,世界坐标系,本地坐标系
cvchihzhza的博客
04-29 5541
Three,js1.Three.js的基本概念和三大组件.       这篇介绍的非常详细:       http://www.hewebgl.com/article/getarticle/502.自定义几何体的注意事项:       THREE.Geometry是所有几何体的基类.构造函数如下:       例:构造一个十面双锥体,并指定纹理定标需要注意的是, 定义每个三角形面时,必须为同为顺时...
Threejs使用Shapes实现不规则几何体，自定义绘图
左本Web3D
05-18 4344
1，介绍 该示例使用的是 r95版本Three.js库。 主要实现功能：使用Shapes实现不同规则几何体。效果图如下： ​ 2，实现说明 形状（Shape）使用路径以及可选的孔洞来定义一个二维形状平面。 它可以和ExtrudeGeometry、ShapeGeometry一起使用，获取点，或者获取三角面；Shape – three.js docs (threejs.org)参考文档 three.js examples (threejs.org)在线案例 ......
threejs自定义顶点（vertex）创建几何体
popstarqq的博客
11-17 3507
threejs 提供了很多生成几何体的方法，如下: 调用上面的方法可以很方便创建各种几何体,比如创建一个平面和立方体盒子,设置长宽高或者长宽就可以创建，代码和效果如下: const material = new THREE.MeshBasicMaterial({ color: "orange", }); // 立方体 const cubegeometry = new THREE.BoxGeometry(10, 10, 10); const cube = new THREE.Mesh(.
Three.js中自定义控制几何体的点和面的属性
BADAO_LIUMANG_QIZHI的博客
08-07 1340
场景 Three.js中引入dat.gui库实现界面组件控制动画速度变量： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/119391130 Three.js库中的geometry和其他大多数三维库中的一样，基本上是三维空间中的点集， 以及一些将这些点连接起来的面。举例来说，一个方块: 1、一个方块有8个角。每个角都可以定义为X, y和z坐标的一个组合。所以每个方块 都是三维空间中的8个点。在Three.js库中，这些...
three.js几何体
07-28
three.js是一个用于创建、渲染和交互3D图形的JavaScript库。它提供了许多内置的几何体类，可以用来创建各种不同形状的物体。 在three.js中，常见的几何体包括： 1. BoxGeometry（立方体几何体）：通过指定宽度、高度和深度来创建一个立方体。 2. SphereGeometry（球体几何体）：通过指定半径和水平和垂直分段数来创建一个球体。 3. CylinderGeometry（圆柱体几何体）：通过指定顶部和底部半径、高度和分段数来创建一个圆柱体。 4. PlaneGeometry（平面几何体）：通过指定宽度和高度来创建一个平面。 5. TorusGeometry（圆环几何体）：通过指定内半径、外半径、径向分段数和环形分段数来创建一个圆环体。 6. ConeGeometry（圆锥几何体）：通过指定顶部半径、底部半径和高度来创建一个圆锥体。 7. TorusKnotGeometry（环面结几何体）：通过指定内半径、外半径、径向分段数、环形分段数和环结扭曲数来创建一个环面结体。 除了这些基本的几何体，你还可以使用参数化曲线、自定义的顶点数组等来创建更复杂的几何体。 注意，创建几何体只是three.js中的一部分，你还需要将其添加到场景中并应用材质以进行渲染。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值