21 Three.js使用顶点绘制立方体

最新推荐文章于 2024-05-03 13:22:10 发布
最新推荐文章于 2024-05-03 13:22:10 发布
阅读量8k 收藏 11
点赞数 6
分类专栏： Three.js笔记 文章标签： webgl three-js-入门 canvas 顶点绘制模型
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30100043/article/details/76725905
版权

我们在学些WebGL基础的时候每天都是在一直研究顶点位置，法向量，绘制下标什么的。虽然复杂，但是毕竟原生，性能没得说。

three.js也给我们提供了相关的接口供我们使用原生的方法绘制模型

下面是我的个人一个案例。

案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/23.html

首先，我创建了一个空白的形状：

        //立方体
        var cubeGeometry = new THREE.Geometry();

立方体的形状如下：

        // 创建一个立方体
        //    v6----- v5
        //   /|      /|
        //  v1------v0|
        //  | |     | |
        //  | |v7---|-|v4
        //  |/      |/
        //  v2------v3

然后添加了立方体的顶点，一共8个

        //创建立方体的顶点
        var vertices = [
            new THREE.Vector3(10, 10, 10), //v0
            new THREE.Vector3(-10, 10, 10), //v1
            new THREE.Vector3(-10, -10, 10), //v2
            new THREE.Vector3(10, -10, 10), //v3
            new THREE.Vector3(10, -10, -10), //v4
            new THREE.Vector3(10, 10, -10), //v5
            new THREE.Vector3(-10, 10, -10), //v6
            new THREE.Vector3(-10, -10, -10) //v7
        ];

        cubeGeometry.vertices = vertices;

接着通过顶点的坐标生成了立方体的面

        //创建立方的面
        var faces=[
            new THREE.Face3(0,1,2),
            new THREE.Face3(0,2,3),
            new THREE.Face3(0,3,4),
            new THREE.Face3(0,4,5),
            new THREE.Face3(1,6,7),
            new THREE.Face3(1,7,2),
            new THREE.Face3(6,5,4),
            new THREE.Face3(6,4,7),
            new THREE.Face3(5,6,1),
            new THREE.Face3(5,1,0),
            new THREE.Face3(3,2,7),
            new THREE.Face3(3,7,4)
        ];

        cubeGeometry.faces = faces;

在这里需要注意：
（1）面是由三个顶点组成的一个三角形面，也是WebGL的实现面的方式。如果需要一个长方形，那就需要由两个三角形组合而成。
（2）如果要绘制的面是朝向相机的，那这个面的顶点的书写方式是逆时针绘制的，比如图上模型的第一个面的添加里面书写的是(0,1,2)。
（3）如果能使模型有灯光的效果，还需要设置法向量，让three.js自动生成即可，如下

        //生成法向量
        cubeGeometry.computeFaceNormals();

当前的这些步骤只是生成了形状，还需要和以前一样设置一个纹理，再通过THTEE.Mesh()方法生成网格

        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});

        cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

这样就实现了一个立方体的绘制：
这里写图片描述

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
        }

        canvas {
            display: block;
        }

    </style>
</head>
<body onload="draw();">

</body>
<script src="build/three.js"></script>
<script src="examples/js/controls/OrbitControls.js"></script>
<script src="examples/js/libs/stats.min.js"></script>
<script src="examples/js/libs/dat.gui.min.js"></script>
<script>
    var renderer;
    function initRender() {
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        //告诉渲染器需要阴影效果
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
        document.body.appendChild(renderer.domElement);
    }

    var camera;
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 40, 100);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
    }

    var scene;
    function initScene() {
        scene = new THREE.Scene();
    }

    //初始化dat.GUI简化试验流程
    var gui;
    function initGui() {
        //声明一个保存需求修改的相关数据的对象
        gui = {
            lightY: 30, //灯光y轴的位置
            cubeX: 25, //立方体的x轴位置
            cubeY: 10, //立方体的x轴位置
            cubeZ: -5 //立方体的z轴的位置
        };
        var datGui = new dat.GUI();
        //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
        datGui.add(gui, "lightY", 0, 100);
        datGui.add(gui, "cubeX", -30, 30);
        datGui.add(gui, "cubeY", -30, 30);
        datGui.add(gui, "cubeZ", -30, 30);
    }

    var light;
    function initLight() {
        scene.add(new THREE.AmbientLight(0x444444));

        light = new THREE.PointLight(0xffffff);
        light.position.set(15, 30, 10);

        //告诉平行光需要开启阴影投射
        light.castShadow = true;

        scene.add(light);
    }

    var cube;
    function initModel() {

        //辅助工具
        var helper = new THREE.AxisHelper(10);
        scene.add(helper);

        // 创建一个立方体
        //    v6----- v5
        //   /|      /|
        //  v1------v0|
        //  | |     | |
        //  | |v7---|-|v4
        //  |/      |/
        //  v2------v3

        //立方体
        var cubeGeometry = new THREE.Geometry();

        //创建立方体的顶点
        var vertices = [
            new THREE.Vector3(10, 10, 10), //v0
            new THREE.Vector3(-10, 10, 10), //v1
            new THREE.Vector3(-10, -10, 10), //v2
            new THREE.Vector3(10, -10, 10), //v3
            new THREE.Vector3(10, -10, -10), //v4
            new THREE.Vector3(10, 10, -10), //v5
            new THREE.Vector3(-10, 10, -10), //v6
            new THREE.Vector3(-10, -10, -10) //v7
        ];

        cubeGeometry.vertices = vertices;

        //创建立方的面
        var faces=[
            new THREE.Face3(0,1,2),
            new THREE.Face3(0,2,3),
            new THREE.Face3(0,3,4),
            new THREE.Face3(0,4,5),
            new THREE.Face3(1,6,7),
            new THREE.Face3(1,7,2),
            new THREE.Face3(6,5,4),
            new THREE.Face3(6,4,7),
            new THREE.Face3(5,6,1),
            new THREE.Face3(5,1,0),
            new THREE.Face3(3,2,7),
            new THREE.Face3(3,7,4)
        ];

        cubeGeometry.faces = faces;

        //生成法向量
        cubeGeometry.computeFaceNormals();

        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});

        cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.position.x = 25;
        cube.position.y = 5;
        cube.position.z = -5;

        //告诉立方体需要投射阴影
        cube.castShadow = true;

        scene.add(cube);

        //底部平面
        var planeGeometry = new THREE.PlaneGeometry(100, 100);
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xaaaaaa});

        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.y = -0;

        //告诉底部平面需要接收阴影
        plane.receiveShadow = true;

        scene.add(plane);

    }

    //初始化性能插件
    var stats;
    function initStats() {
        stats = new Stats();
        document.body.appendChild(stats.dom);
    }

    //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
    var controls;
    function initControls() {

        controls = new THREE.OrbitControls(camera, renderer.domElement);

        // 如果使用animate方法时，将此函数删除
        //controls.addEventListener( 'change', render );
        // 使动画循环使用时阻尼或自转 意思是否有惯性
        controls.enableDamping = true;
        //动态阻尼系数 就是鼠标拖拽旋转灵敏度
        //controls.dampingFactor = 0.25;
        //是否可以缩放
        controls.enableZoom = true;
        //是否自动旋转
        controls.autoRotate = false;
        //设置相机距离原点的最远距离
        controls.minDistance = 50;
        //设置相机距离原点的最远距离
        controls.maxDistance = 200;
        //是否开启右键拖拽
        controls.enablePan = true;
    }

    function render() {
        renderer.render(scene, camera);
    }

    //窗口变动触发的函数
    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        render();
        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    function animate() {
        //更新控制器
        render();

        //更新性能插件
        stats.update();

        //更新相关位置
        light.position.y = gui.lightY;
        cube.position.x = gui.cubeX;
        cube.position.y = gui.cubeY;
        cube.position.z = gui.cubeZ;

        controls.update();

        requestAnimationFrame(animate);
    }

    function draw() {
        initGui();
        initRender();
        initScene();
        initCamera();
        initLight();
        initModel();
        initControls();
        initStats();

        animate();
        window.onresize = onWindowResize;
    }
</script>
</html>
暮志未晚NAN
关注
  • 6
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
threejs (一) 创建一个正方体
cwjxyp的博客
10-20 383
通过THREE.Scene创建一个场景：3D世界的容器，所有的对象都要放到这个场景中，包括背景等。 Geometry：几何体，常见的内置几何体有 PlaneGeometry：平面几何体 BoxGeometry：立方几何体
Three.js利用顶点绘制立方体的方法详解
11-28
前言 之前我们在学些WebGL基础的时候每天都是在一直研究顶点位置，法向量，绘制下标什么的。虽然复杂，但是毕竟原生，性能没得说。 three.js也给我们提供了相关的接口供我们使用原生的方法绘制模型，下面话不多说了，来一起看看详细的介绍吧。 下面是我的个人一个案例。 首先，我创建了一个空白的形状： //立方体 var cubeGeometry = new THREE.Geometry(); 立方体的形状如下： // 创建一个立方体 // v6----- v5 // /| /| // v1------v0| // | | | | // | |v7---|-
ThreeJS:Geometry与顶点|索引|面
最新发布
席木木的博客
05-03 1183
ThreeJS:Geometry与顶点|索引|面.
php绘制正方体,Three.js利用顶点绘制立方体方法
weixin_33513255的博客
04-02 551
本文主要给大家介绍了关于Three.js利用顶点绘制立方体的方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。希望能帮助到大家。前言之前我们在学些WebGL基础的时候每天都是在一直研究顶点位置，法向量，绘制下标什么的。虽然复杂，但是毕竟原生，性能没得说。three.js也给我们提供了相关的接口供我们使用原生的方法绘制模型，下面话不多说了，来一起看看详细的介绍吧。下面是...
ThreeJS两个点作为起始坐标画一个立方体
u011927449的博客
08-02 604
drawLineBox(new THREE.Vector3(100, 50, 0), new THREE.Vector3(200, 100, 100)); function drawLineBox(start, end) { //开始点用cube标出来方便观察 geometry = new THREE.CubeGeometry(10, 10, 10); material = new THREE.MeshNormalMaterial({ opacity: 0.5, transpar..
three.js根据顶点加载立方体并为为立方体的每个面贴图
u013594477的专栏
08-10 8737
在天津噪声管理系统中，为了展示安静小区周边建筑物的三维分布情况，主要对每个建筑物进行贴图，本文以一个建筑物为例，给建筑物的不同表面增加不同的贴图材质。。...
three.js3维坐标系+绘制立方体（带边框）
02-28
1、three.js绘制3维坐标系； 2、绘制多个立方体； 3、立方体设置边框； 4、立方体表面绘制线条；
使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip
12-10
使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js...
three.js旋转立方体
04-18
three.js示例 使用three.js 实现的旋转立方体 代码注释完善
【ThreeJS】基础教学 创建一个立方体
Ning+
04-24 2154
因为看到ThingJS中的文章http://forum.thingjs.com/thread-55013.htm讲THREE很难学，大家不要被吓到，因为其实是很简单的； 就拿他文章里的代码注释一遍给大家学习参考吧； <!DOCTYPE html> <html lang="en"> <head> <title>three.js web...
three.js 之 入门篇 5之几何体的认知（ 顶点创建矩阵、炫酷三角形科技物体、基础网格材质 material ）
weixin_43845137的博客
01-11 417
基础网格材质 material等
three.js绘制多边形并更新顶点
X01动力装甲的专栏
05-24 6016
three.js绘制多边形并更新顶点 先绘制一个正六边形 var geometry = new THREE.Geometry(); let p1 = angPos(r[0], 0); let p2 = angPos(r[1], 60 * 1); let p3 = angPos(r[2], 60 * 2); let p4 = angPos(r[3], 60 * 3); let p5 = angPo...
THREE.js学习第三天
weixin_48723882的博客
01-17 349
通过输出可以得到一下结果： 其中array为每一个顶点的坐标，因为在xyz坐标轴中，所以每三个数据代表一个顶点的位置。一个面4个顶点，所以一个正方体六个面总共 24个顶点 ，其中 count代表几何体的顶点数。如果一个面的顶点为6，那么一个正方体的顶点数应该为36个，但是我们第一次打印几何体的定点数时却显示为24？第一个顶点在 x 轴 -1的位置 y轴-1的位置 z轴1的位置。第二个顶点在 x 轴 1的位置 y轴-1的位置 z轴1的位置。第三个顶点在 x 轴 1的位置 y轴-1的位置 z轴0的位置。
threejs自定义顶点（vertex）创建几何体
popstarqq的博客
11-17 3323
threejs 提供了很多生成几何体的方法，如下: 调用上面的方法可以很方便创建各种几何体,比如创建一个平面和立方体盒子,设置长宽高或者长宽就可以创建，代码和效果如下: const material = new THREE.MeshBasicMaterial({ color: "orange", }); // 立方体 const cubegeometry = new THREE.BoxGeometry(10, 10, 10); const cube = new THREE.Mesh(.
ThreeJs学习
weixin_44208404的博客
12-02 2469
定义顶点法向量后点光源和平行光源会起作用var normals = new Float32Array([ 0 , 0 , 1 , //顶点1法向量 0 , 0 , 1 , //顶点2法向量 0 , 0 , 1 , //顶点3法向量 0 , 1 , 0 , //顶点4法向量 0 , 1 , 0 , //顶点5法向量 0 , 1 , 0 , //顶点6法向量 ]);设置三角形Face3的颜色对于Mesh模型有效，对于Points、Line无效。
threejs看这里就行了
越努力越幸运
06-07 4606
threejs技术预研 现代浏览器都支持WebGL，这样我们就不必使用Flash、Java等插件就能在浏览器中创建三维图形。虽然WebGL提供的接口非常丰富和强大，但使用起来过于繁琐和复杂。Three.js的出现完美地解决了这个矛盾。它提供一个很简单的关于WebGL特性的JavaScript API，使得用户不需要详细地学习WebGL，就能轻松创作出好看的三维图形样例。 1、基本介绍 1.1 Three.js 的功能特点 创建简单和复杂的三维几何图形。 在三维场景下......
three.js(3)：点、线、面（颜色插值，几何体三种渲染方式）
spider_man
08-26 4332
参考：http://www.yanhuangxueyuan.com/Three.js_course/face.html 直线模型对象 两个顶点确定一条直线，构造函数THREE.Vector3()可以用来创建一个顶点位置，下面代码中Vector3(10,0,0)表示三维笛卡尔坐标系中顶点坐标(10,0,0), vertices是几何体对象的顶点坐标属性，从Javascript语言的角度看vertices是数组对象，push()是Javascript语言支持的方法， 用于给数组增加元素。 &lt
Three.js给定空间两点坐标，在两坐标间做出圆柱体
NJR10byh的博客
04-01 1588
写在前面： 本人南京邮电大学计算机学院大三菜鸟一枚，下面写出的方法，是自己查阅各种文档摸索出来的，记录在此。各位专业大佬多多包涵！ 最近项目组有一个需求，需要在一根电线周围用圆柱体包裹作为警示区，结合自己对Three.js仅有的那么一丁点了解，我有了最开始的思路。 运用 CylinderGeometry 几何体做圆柱体，属性如下： 前两个参数是半径，这个可以自己定，第三个是圆柱体高度，自然就是两点间距离呗，有了这几个参数，圆柱体也就确定下来了。 接下来，就要确定圆柱体的位置。 Three.js中的几何体都
three.js 渐变圆边立方体
04-10
three.js是一个用于创建3D图形的JavaScript库。它提供了丰富的功能和工具，可以轻松地在Web浏览器中创建交互式的3D场景和动画效果。 渐变圆边立方体是指一个立方体，其边缘呈现出渐变的圆形效果。在three.js中，可以通过以下步骤来创建渐变圆边立方体： 1. 创建一个立方体的几何体（BoxGeometry）并设置其大小和位置。 2. 创建一个渐变材质（MeshBasicMaterial）并设置其颜色属性为渐变色。 3. 将几何体和材质结合起来创建一个网格（Mesh）对象。 4. 将网格对象添加到场景中。 5. 创建一个渲染器（WebGLRenderer）并将其连接到HTML文档中的一个元素上。 6. 在每一帧中更新场景和相机，并使用渲染器进行渲染。 下面是一个示例代码，展示了如何使用three.js创建一个渐变圆边立方体： ```javascript // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建立方体几何体 var geometry = new THREE.BoxGeometry(1, 1, 1); // 创建渐变材质 var material = new THREE.MeshBasicMaterial({ color: new THREE.Color(0xff0000), // 起始颜色 vertexColors: THREE.VertexColors // 使用顶点颜色 }); // 设置顶点颜色 geometry.faces.forEach(function(face) { var color = new THREE.Color(Math.random(), Math.random(), Math.random()); face.vertexColors.push(color, color, color); }); // 创建立方体网格 var cube = new THREE.Mesh(geometry, material); // 将立方体添加到场景中 scene.add(cube); // 渲染函数 function render() { requestAnimationFrame(render); // 旋转立方体 cube.rotation.x += 0.01; cube.rotation.y += 0.01; // 渲染场景和相机 renderer.render(scene, camera); } // 开始渲染 render(); ``` 这是一个基本的示例，你可以根据自己的需求进行修改和扩展。希望对你有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值