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

最新推荐文章于 2024-09-30 06:00:00 发布
最新推荐文章于 2024-09-30 06:00:00 发布
阅读量8.2k 收藏 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
关注
专栏目录
初探WebGL-基于Three.js绘制顶点不同颜色的旋转立方体
u011435776的博客
11-30 1011
这篇文章简单介绍了WebGL的概念，以及常用的几种WebGL开发框架。然后选取Three.js作为WebGL开发框架，从零实现一个顶点不同颜色的旋转立方体。
three.js根据顶点加载立方体并为为立方体的每个面贴图
u013594477的专栏
08-10 8841
在天津噪声管理系统中，为了展示安静小区周边建筑物的三维分布情况，主要对每个建筑物进行贴图，本文以一个建筑物为例，给建筑物的不同表面增加不同的贴图材质。。...
Three.js利用顶点绘制立方体的方法详解
11-28
前言 之前我们在学些WebGL基础的时候每天都是在一直研究顶点位置，法向量，绘制下标什么的。虽然复杂，但是毕竟原生，性能没得说。 three.js也给我们提供了相关的接口供我们使用原生的方法绘制模型，下面话不多说了，来一起看看详细的介绍吧。 下面是我的个人一个案例。 首先，我创建了一个空白的形状： //立方体 var cubeGeometry = new THREE.Geometry(); 立方体的形状如下： // 创建一个立方体 // v6----- v5 // /| /| // v1------v0| // | | | | // | |v7---|-
php绘制正方体,Three.js利用顶点绘制立方体方法
weixin_33513255的博客
04-02 599
本文主要给大家介绍了关于Three.js利用顶点绘制立方体的方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。希望能帮助到大家。前言之前我们在学些WebGL基础的时候每天都是在一直研究顶点位置，法向量，绘制下标什么的。虽然复杂，但是毕竟原生，性能没得说。three.js也给我们提供了相关的接口供我们使用原生的方法绘制模型，下面话不多说了，来一起看看详细的介绍吧。下面是...
ThreeJS入门（062）：THREE.Vector3 知识详解，示例代码
最新发布
大剑师兰特的GIS世界
09-30 1275
`THREE.Vector3` 是 Three.js 中用于表示三维向量的一个类。向量是一个具有方向和大小的量，在计算机图形学中常用于表示位置、方向、速度、加速度等。在 Three.js 中，`THREE.Vector3` 主要用于处理三维空间中的点或向量。
threejs自定义顶点（vertex）创建几何体
popstarqq的博客
11-17 3631
threejs 提供了很多生成几何体的方法，如下: 调用上面的方法可以很方便创建各种几何体,比如创建一个平面和立方体盒子,设置长宽高或者长宽就可以创建，代码和效果如下: const material = new THREE.MeshBasicMaterial({ color: "orange", }); // 立方体 const cubegeometry = new THREE.BoxGeometry(10, 10, 10); const cube = new THREE.Mesh(.
ThreeJS两个点作为起始坐标画一个立方体
u011927449的博客
08-02 627
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.js3维坐标系+绘制立方体（带边框）
02-28
在本文中，我们将深入探讨如何使用three.js库创建一个3维坐标系，并在该系统中绘制带有边框的立方体，以及在立方体表面绘制线条。three.js是JavaScript的一个强大库，专门用于在Web浏览器中进行3D图形编程。让我们一...
Test1_海洋_three.js大海_ThreeJS_threejs体绘制数据_threejs颜色_
10-03
在本项目中，"Test1_海洋_three.js大海_ThreeJS_threejs体绘制数据_threejs颜色_" 提供了一个关于使用Three.js库创建海洋温度颜色体绘制的实例。Three.js是一款强大的JavaScript库，专用于在Web浏览器中进行3D图形...
【ThreeJS】基础教学 创建一个立方体
Ning+
04-24 2241
因为看到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 436
基础网格材质 material等
three.js绘制多边形并更新顶点
X01动力装甲的专栏
05-24 6251
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--》几何体顶点知识讲解
ztK63LrD的博客
05-03 1610
通过JS类型化数组创建一组xyz坐标数据用来表示几何体的顶点坐标。// 创建一个空的几何体顶对象// 添加顶点数据const vertices = new Float32Array([ // 数组里面编写顶点坐标数据0,0,0, // 顶点1坐标50,0,0, // 顶点2坐标0,100,0, // 顶点3坐标0,0,10, // 顶点4坐标0,0,100, // 顶点5坐标50,0,10 // 顶点6坐标])通过three.js的属性缓冲区对象表示threejs几何体顶点数据。
THREE.js学习第三天
weixin_48723882的博客
01-17 407
通过输出可以得到一下结果： 其中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学习
weixin_44208404的博客
12-02 2581
定义顶点法向量后点光源和平行光源会起作用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无效。
OpenGl 绘制一个立方体
weixin_30892889的博客
12-15 1731
OpenGl 绘制一个立方体 　　为了绘制六个正方形，我们为每个正方形指定四个顶点，最终我们需要指定6*4=24个顶点。但是我们知道，一个立方体其实总共只有八个顶点，要指定24次，就意味着每个顶点其实重复使用了三次，这样可不是好的现象。最起码，像上面这样重复烦琐的代码，是很容易出错的。稍有不慎，即使相同的顶点也可能被指定成不同的顶点了。 　　如果我们定义一个数组，把八个顶点都放到数组里，然后每...
threejs看这里就行了
越努力越幸运
06-07 4795
threejs技术预研 现代浏览器都支持WebGL，这样我们就不必使用Flash、Java等插件就能在浏览器中创建三维图形。虽然WebGL提供的接口非常丰富和强大，但使用起来过于繁琐和复杂。Three.js的出现完美地解决了这个矛盾。它提供一个很简单的关于WebGL特性的JavaScript API，使得用户不需要详细地学习WebGL，就能轻松创作出好看的三维图形样例。 1、基本介绍 1.1 Three.js 的功能特点 创建简单和复杂的三维几何图形。 在三维场景下......
three.js(3)：点、线、面（颜色插值，几何体三种渲染方式）
spider_man
08-26 4465
参考：http://www.yanhuangxueyuan.com/Three.js_course/face.html 直线模型对象 两个顶点确定一条直线，构造函数THREE.Vector3()可以用来创建一个顶点位置，下面代码中Vector3(10,0,0)表示三维笛卡尔坐标系中顶点坐标(10,0,0), vertices是几何体对象的顶点坐标属性，从Javascript语言的角度看vertices是数组对象，push()是Javascript语言支持的方法， 用于给数组增加元素。 &lt
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值