ThreeJS 开发实例

本文详细介绍了ThreeJS中形状和材质的使用,包括虚线、线宽、颜色的设置,以及如何打包对象、深度遍历子对象和设置面的可见性。还涉及物体形状和材质的动态改变、透明度调整、滚轮缩放、深度测试和解决Z-fighting问题。此外,讲解了创建2D文字、自定义形状和多材质物体的方法,以及添加控制面板、设置场景、相机和渲染器的技巧,最后讨论了事件处理和坐标转换在ThreeJS中的应用。
摘要由CSDN通过智能技术生成

形状和材质

虚线

画虚线

function DrawDashLine(){
        var geometry = new THREE.Geometry();
        /**
         * vertexColors: false 关闭使用点颜色来生成线的颜色,这个值默认是false,如果设置为true,那么后面设置的color将不起作用
         * dashSize:30 点长度30个单位
         * gapSize:20 点与点之间间隔长度20个单位
         * @type {THREE.LineDashedMaterial}
         */
        var material = new THREE.LineDashedMaterial({ vertexColors: false,dashSize:30,gapSize:20,color:0x839848});
        var p1 = new THREE.Vector3(0, 0,0);
        var p2 = new THREE.Vector3(500,300,0);
        geometry.vertices.push(p1);
        geometry.vertices.push(p2);
        /**
         * 记得加上这句,用于计算上面设置的点和间隔长度,不设置则画出来是实线
         */
        geometry.computeLineDistances();          
        var line = new THREE.Line(geometry,material,THREE.LineSegments );
        scene.add(line);
    }

注意:threejs定义了很多computeXXX方法和XXXneedsUpdate属性,这表示XXX是默认不更新的,你要想获得其真实值,就必须手动调用computeXXX方法或设置XXXneedsUpdate属性。threejs这么做,是出于性能考虑

给立方体画上虚线边框

思路,遍历立方体的所有顶点,对每一个顶点,画上与其相接的三条边,每条边画一半长度。


function drawUnVisiableBorder(){
                for(var i=0 ; i< cube.geometry.vertices.length ; i ++ ){
   
                    var v1 = new THREE.Vector3();
                    v1.copy(cube.geometry.vertices[i]);
                    var v2 = new THREE.Vector3();
                    v2.copy(v1);
                    v2.x = -v2.x/2;

                    DrawDashLine(v1,v2);

                    var v2 = new THREE.Vector3();
                    v2.copy(v1);
                    v2.y = -v2.y/2;
                    DrawDashLine(v1,v2);

                    var v2 = new THREE.Vector3();
                    v2.copy(v1);
                    v2.z = -v2.z/2;
                    DrawDashLine(v1,v2);
                }
            }

注意:画虚线只能画一次,如果画两次,第一次从A到B,第二次从B到A,虚线就会变成实线,因为两次画的线段和空缺刚好互补

另外,新的threejs提供了EdgesGeometry,也可以用来描边

线的粗细

在Threejs中,线本身是二维的,没有办法设置粗细,这样要选择、操作一条线就不太好操作。这时,可以在线外面包一层不可见的圆柱,这样线就很好操作了。

function drawCylinder(topRadius,bottomRadius ,height){
   
                //四个参数分别是上底面半径、下底面半径,高度,半径段数
                var geometry = new THREE.CylinderGeometry(topRadius,bottomRadius,height,16);
                var material = new THREE.MeshBasicMaterial({visible:true,color:0x879378});
                var cylinder = new THREE.Mesh(geometry,material);
                return cylinder;
            }

线的颜色

纯色的线

function colorLine(){
        var geometry = new THREE.Geometry();
        /**
         * vertexColors: false,表示使用color来设置颜色
         * @type {THREE.LineBasicMaterial}
         */
        var material = new THREE.LineBasicMaterial({ vertexColors: false,color:#cccccc });
        var p1 = new THREE.Vector3(0, 0,0);
        var p2 = new THREE.Vector3(500,300,0);
        geometry.vertices.push(p1);
        geometry.vertices.push(p2);
        var line = new THREE.Line(geometry,material,THREE.LineSegments );
        scene.add(line);
    }

渐变线:使用端点的颜色,从端点A的颜色变化到端点B的颜色

function initObject(){
        var geometry = new THREE.Geometry();
        /**
         * vertexColors: true 表示使用端点颜色
         * @type {THREE.LineBasicMaterial}
         */
        var material = new THREE.LineBasicMaterial({ vertexColors: true });
        var p1 = new THREE.Vector3(0<
  • 17
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值