通过顶点自定义形状

最新推荐文章于 2022-03-12 10:14:48 发布
最新推荐文章于 2022-03-12 10:14:48 发布
阅读量158 收藏
点赞数
文章标签： threejs three 模型 材质
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33943287/article/details/89876851
版权
新建坐标点集合

        var vertices = [
            new THREE.Vector3(1, 3, 1),
            new THREE.Vector3(1, 3, -1),
            new THREE.Vector3(1, -1, 1),
            new THREE.Vector3(1, -1, -1),
            new THREE.Vector3(-1, 3, -1),
            new THREE.Vector3(-1, 3, 1),
            new THREE.Vector3(-1, -1, -1),
            new THREE.Vector3(-1, -1, 1)
        ];

        var faces = [
            new THREE.Face3(0, 2, 1),
            new THREE.Face3(2, 3, 1),
            new THREE.Face3(4, 6, 5),
            new THREE.Face3(6, 7, 5),
            new THREE.Face3(4, 5, 1),
            new THREE.Face3(5, 0, 1),
            new THREE.Face3(7, 6, 2),
            new THREE.Face3(6, 3, 2),
            new THREE.Face3(5, 7, 0),
            new THREE.Face3(7, 2, 0),
            new THREE.Face3(1, 3, 4),
            new THREE.Face3(3, 6, 4),
        ];
将坐标写入模型
 var geom = new THREE.Geometry();
        geom.vertices = vertices;
        geom.faces = faces;
        geom.computeFaceNormals();//计算表面法线
新建材质
 var materials = [
            new THREE.MeshLambertMaterial({opacity: 0.6, color: 0x44ff44, transparent: true}),
            new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})

        ];
将模型加入场景
  var mesh=
  THREE.SceneUtils.createMultiMaterialObject(geom, materials);
        mesh.children.forEach(function (e) {
            e.castShadow = true
        });
//        mesh.children[0].translateX(0.5);
//        mesh.children[0].translateZ(0.5);

        scene.add(mesh);

完整demo+gui 复制模型控制

<!DOCTYPE html>

<html>

<head>
    <title>Example 02.05 - Custom geometry</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;

        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.receiveShadow = true;

        // rotate and position the plane
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 0;
        plane.position.y = 0;
        plane.position.z = 0;

        // add the plane to the scene
        scene.add(plane);

        // position and point the camera to the center of the scene
        camera.position.x = -20;
        camera.position.y = 25;
        camera.position.z = 20;
        camera.lookAt(new THREE.Vector3(5, 0, 0));

        // add subtle ambient lighting
//        var ambientLight = new THREE.AmbientLight(0x494949);
//        scene.add(ambientLight);

        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, 10);
        spotLight.castShadow = true;
        scene.add(spotLight);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        // call the render function
        var step = 0;


        var vertices = [
            new THREE.Vector3(1, 3, 1),
            new THREE.Vector3(1, 3, -1),
            new THREE.Vector3(1, -1, 1),
            new THREE.Vector3(1, -1, -1),
            new THREE.Vector3(-1, 3, -1),
            new THREE.Vector3(-1, 3, 1),
            new THREE.Vector3(-1, -1, -1),
            new THREE.Vector3(-1, -1, 1)
        ];

        var faces = [
            new THREE.Face3(0, 2, 1),
            new THREE.Face3(2, 3, 1),
            new THREE.Face3(4, 6, 5),
            new THREE.Face3(6, 7, 5),
            new THREE.Face3(4, 5, 1),
            new THREE.Face3(5, 0, 1),
            new THREE.Face3(7, 6, 2),
            new THREE.Face3(6, 3, 2),
            new THREE.Face3(5, 7, 0),
            new THREE.Face3(7, 2, 0),
            new THREE.Face3(1, 3, 4),
            new THREE.Face3(3, 6, 4),
        ];

        var geom = new THREE.Geometry();
        geom.vertices = vertices;
        geom.faces = faces;
        geom.computeFaceNormals();//计算表面法线


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

        ];


        var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, materials);
        mesh.children.forEach(function (e) {
            e.castShadow = true//显示投影
        });
//        mesh.children[0].translateX(0.5);
//        mesh.children[0].translateZ(0.5);

        scene.add(mesh);

        function addControl(x, y, z) {
            var controls = new function () {
                this.x = x;
                this.y = y;
                this.z = z;
            };

            return controls;
        }

        var controlPoints = [];
        controlPoints.push(addControl(3, 5, 3));
        controlPoints.push(addControl(3, 5, 0));
        controlPoints.push(addControl(3, 0, 3));
        controlPoints.push(addControl(3, 0, 0));
        controlPoints.push(addControl(0, 5, 0));
        controlPoints.push(addControl(0, 5, 3));
        controlPoints.push(addControl(0, 0, 0));
        controlPoints.push(addControl(0, 0, 3));

        var gui = new dat.GUI();
        gui.add(new function () {
            this.clone = function () {

                var clonedGeometry = 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 mesh2 = THREE.SceneUtils.createMultiMaterialObject(clonedGeometry, materials);
                mesh2.children.forEach(function (e) {
                    e.castShadow = true
                });

                mesh2.translateX(5);
                mesh2.translateZ(5);
                mesh2.name = "clone";
                scene.remove(scene.getChildByName("clone"));
                scene.add(mesh2);


            }
        }, 'clone');

        for (var i = 0; i < 8; i++) {

            f1 = gui.addFolder('Vertices ' + (i + 1));
            f1.add(controlPoints[i], 'x', -10, 10);
            f1.add(controlPoints[i], 'y', -10, 10);
            f1.add(controlPoints[i], 'z', -10, 10);

        }

        render();

        function addCube() {

        }

        function render() {
            stats.update();

            var vertices = [];
            for (var i = 0; i < 8; i++) {
                vertices.push(new THREE.Vector3(controlPoints[i].x, controlPoints[i].y, controlPoints[i].z));
            }

            mesh.children.forEach(function (e) {
                e.geometry.vertices = vertices;
                e.geometry.verticesNeedUpdate = true;
                e.geometry.computeFaceNormals();
            });

            // render using requestAnimationFrame
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init


</script>
</body>
</html>
一心诗意喂了狗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UGUI中显示特定形状的Image
12-06
有时为了显示特定形状的UI，但有没有对应形状的的图片，则可以使用该代码 有时为了显示特定形状的UI，但有没有对应形状的的图片，则可以使用该代码 有时为了显示特定形状的UI，但有没有对应形状的的图片，则可以使用该代码 有时为了显示特定形状的UI，但有没有对应形状的的图片，则可以使用该代码
自定义图形
enrollli的专栏
03-17 1545
Android应用开发笔记(10)：制作自定义背景Button按钮、自定义形状Button的全攻略 <br />转自：http://blog.csdn.net/xjanker2/archive/2011/03/04/6222690.aspx<br />在Android开发应用中，默认的Button是由系统渲染和管理大小的。而我 们看到的成功的移动应用，都是有着酷炫的外观和使用体验的。因此，我们在开发产品的时候，需要对默认按钮进行美化。在本篇里，笔者结合在应用开发中的经 验，探讨一下自定义背景的按钮、自定
[UGUI效果实现]不规则、多变形按钮点击
qq_41190274的博客
05-09 582
参考的雨果大神的贴子做的，自己记录一下，以备不时之需。 一、实现效果 二、参数设置 1.新的Button,把Raycast target（射线检测）取消 2.新建一个子节点GameObject（空的就行），添加组件Polygon Collider 2D,然后点击Edit Collder，对需要检测点击的区域进行设置。添加脚本 UI Polygon（雨果大神的脚本，我贴在下面了） ...
Three.js建模基础
新缸中之脑
07-17 3501
在Three.js中，一个可见的物体是由几何体和材料构成的。在这个教程中，我们将学习如何从头开始创建新的网格几何体，研究Three.js为处理几何对象和材质所提供的相关支持。 1、索引面集/Indexed Face Sets Three.js中的Mesh网格对象是索引面的集合。Three.js网格对象类型为THREE.Geometry，包含一系列的顶点（其类型为THREE.Vector3）。除了顶点，Mesh网格还包含一系列的三角面（其类型为THREE.Face3），每个Face3对象都指定了Mesh几何体
Three.js中自定义控制几何体的点和面的属性
BADAO_LIUMANG_QIZHI的博客
08-07 1322
场景 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库中，这些...
Android中使用Shape自定义形状
05-08
本教程将深入探讨如何在Android中使用Shape来实现自定义形状。 1. **Shape基本结构** Shape对象的基本结构包含以下几个主要元素： - `<shape>`：根元素，定义形状类型，如`<rectangle>`（矩形）、`<oval>`（椭圆...
Unity 顶点转换与效果
最新发布
03-01
例如，可以使用顶点着色器（Vertex Shader）自定义顶点的位置，从而实现动画、扭曲、变形等效果；片段着色器（Fragment Shader）则控制像素颜色，可以实现复杂的光照、阴影和纹理混合。 此外，Unity还提供了许多...
SU2015顶点编辑插件
07-15
6. **快捷操作**：提供快捷键和自定义工作流，使顶点编辑过程更加流畅。 安装“tt_vertex pack”压缩包文件后，用户可以在SketchUp 2015中找到这个插件，并开始体验这些增强的顶点编辑功能。请注意，插件的兼容性和...
凸包顶点逆时针排序
07-24
在计算机图形学和算法设计中，"凸包顶点逆时针排序"是一个常见的问题，尤其是在处理二维几何形状时。凸包（Convex Hull）是指包含所有点且仅包含这些点的最小凸多边形。逆时针排序则是指按照顺时针或逆时针方向对...
unity利用mesh绘制任意形状的平面.unitypackage
02-16
里面有几十个cube（也可以换成空物体），你也可以添加或者减少cube数量，通过控制cube的位置来生成不同的网格形状，从而产生不同的平面。代码中涉及到一些数学知识和编程算法，都是很实用的知识。
不规则按钮，贴图绘制，根据图片设定按钮形状
07-14
MFC绘制的不规则按钮。根据遮罩图片获得按钮的形状。按钮可以有三态，实际上可以做成四种状态，原理相同。 代码是自己学习的代码。关键部分都在里边了。 代码中难懂的主要有两块，一个是根据遮罩图片取得HRGN的函数，另外一个是绘制遮罩效果的函数。这两个是绘制按钮的关键。原理很简单，不懂得欢迎交流。 分数就这么多了，大家下载后回复一下就不扣分了。 大家多捧场。 遮罩效果绘制的那部分如果不懂得话，可以参照《windows程序设计》书中提供的实例代码。
three.js 源码注释（二十五）Core/Geometry.js
omni360的专栏
11-25 4196
Geometry是场景中由顶点和三角面构成的几何体对象的基类,保存描述几何体所有必要的数据.Geometry对象的功能函数采用定义构造的函数原型对象来实现. 用法:var geometry = new THREE.Geometry(); geometry.vertices.push( new THREE.Vector3( -10, 10, 0 ), new THREE.Vector3( -10, -10, 0 ), new THREE.Vector3( 10, -10, 0 )
threeJS常用功能块
weixin_44870969的博客
03-12 666
initThree() ------ JS渲染器 initCamera() ---- 相机 initScene() -------场景 initLight() -------- 灯光 initObject() -------物体 initGrid() ----------网格 animation() ------ 开始渲染动画 //创建鼠标控件对象 相机对象c..
Revit二次开发:关于Face的FaceNormal和ComputeNormal
niaxiapia的博客
06-20 2188
1.FaceNormal是PlanarFace的专有属性（曲面的每个点的法向量不一定相同，所以只能用下面的那个方法来计算每个点的法向量），返回的是平面的法向量；若该PlanarFace属于某一个Solid的一个面，则返回值为外法向量。 2.ComputeNormal是Face的方法，返回的是在某个指定点的法向量，则返回值为外法向量。该方法需要一个参数UV point,即指定计算某个点， 经验证...
Face Normals & Vertex Normals(面法线跟顶点法线的区别)
热门推荐
易水寒
03-03 1万+
What is a face normal? A face normal is a vector that describesthe direction a polygon is facing(see figure 1) Figure 1: The face normal of a surface What is a vertex normal?
Unity UGUI绘制任意形状的基础——在代码中通过顶点绘制正方形
Hustlion 的技术博客
08-26 7800
目标 在代码中通过顶点绘制正方形。基于这一技术，可以通过提供更多顶点绘制出任意形状。 环境 Unity 2018.1.5f1 Personal (64bit) 方法 继承 UnityEngine.UI.Graphic 来获得顶点操纵的能力： using System.Collections; using System.Collections.Generic; using...
three.js 指定在某一平面上拖拽。拖拽吸附在某个平面
qq_42339350的博客
10-20 2739
使用的api DragControls 该接口作用为：拖拽时会在摄像机视角垂直的平面上移动，即以摄像机视角方向为法向量的一个平面。 它是如何实现的在摄像机对着的屏幕移动的 文件位置:three/examples/jsm/controls/DragControls 内部代码 //新建一个平面 const _plane = new Plane(); ... //鼠标按下 function onPointerDown( event ){ ... //设置平面的法向量和点 //将摄像机(_camera)的世界
PPT形状编辑：顶点与曲线的奥秘
这篇资料详细介绍了PPT中形状的基本知识，不仅涵盖了不支持的效果，还提供了丰富的形状编辑技巧，帮助用户提升PPT设计能力，尤其是对于需要自定义形状的场景非常有用。通过理解和应用这些知识，用户可以更好地控制和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值