四边形的顶点着色

最新推荐文章于 2022-09-02 10:35:18 发布

桑榆未晚_

最新推荐文章于 2022-09-02 10:35:18 发布

阅读量6.4k

点赞数 1

分类专栏： ThreeJs 文章标签： threejs material

本文链接：https://blog.csdn.net/TW934440653/article/details/102576903

版权

ThreeJs 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

作者：桑榆
QQ：934440653
有问题，评论留言，或qq联系

案例效果

四边形的只给顶点着色，渐变效果是计算机自己的插值运算产生的效果。
在这里插入图片描述

vertices，数组中的四个顶点，数组下标索引与案例效果图的标注一致。
四边形由两个三角面组成，分别为索引0,1,2和索引2,3,4。
下图为四边形其中一个面，face[0]的a,b,c索引对应着vertices的下标。

vertexColors，未给顶点赋上颜色是，数组为空。
给两个三角面的顶点分别赋顶点颜色。

 var color1 = new THREE.Color(0x0090F);
            var color2 = new THREE.Color(0x000F0);
            var color3 = new THREE.Color(0x20F0FF);

            for(var i = 0 ; i < geometry.faces.length ; i++){  
                    var face  = geometry.faces[i]; //拿到四边形的两个面
                    face.vertexColors[0] = color1; //每个面由三个点组成，给三个点附上顶点颜色
                    face.vertexColors[1] = color2;
                    face.vertexColors[2] = color3;
            }

给材质的着色方式

1.属性

a. vertexColors:THREE.NoColors, 没有颜色
b. vertexColors:THREE.FaceColors, 面着色
c. vertexColors:THREE.VertexColors, 顶点着色的方式

2.

//创建四边形
        var geometry;
        function initObject(){
            geometry = new THREE.PlaneGeometry(100,100);
            var material = new THREE.MeshBasicMaterial({vertexColors:THREE.VertexColors,}); //vertexColors 试用顶点着色

            var color1 = new THREE.Color(0x0090F);
            var color2 = new THREE.Color(0x000F0);
            var color3 = new THREE.Color(0x20F0FF);

            for(var i = 0 ; i < geometry.faces.length ; i++){  
                    var face  = geometry.faces[i]; //拿到四边形的两个面
                    face.vertexColors[0] = color1; //每个面由三个点组成，给三个点附上顶点颜色
                    face.vertexColors[1] = color2;
                    face.vertexColors[2] = color3;
            }

            var object = new THREE.Mesh(geometry,material);
            object.position.set(0,0,0);
            scene.add(object);
        }

3.完整代码

<!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>四边形的顶点着色</title>
    <script src="../buildJs//build/three105.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        #webGL{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="webGL"></div>

    <script>
        var scene,camera,renderer;
        var ambientLight,directionalLight;
        var domWidth, domHeight;

        //创建场景
        function initScene(){
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xcfcfcf);
        }

        //创建相机
        function initCamera(){
            camera = new THREE.PerspectiveCamera(45 ,domWidth / domHeight ,1,1000);
            camera.position.set(0,0,500);
            camera.lookAt(new THREE.Vector3(0,0,0));
            scene.add(camera);
        }

        //创建灯光
        function initLight(){
            ambientLight = new THREE.AmbientLight(0x404040 );
            scene.add(ambientLight);

            directionalLight = new THREE.DirectionalLight(0xffffff,0.8);
            directionalLight.position.set(-200,300,200);
            directionalLight.target.position.set(0, 60, 0)
            directionalLight.target.updateMatrixWorld();
            scene.add(directionalLight);
        }

        //创建渲染器
        function initRender(){
            console.log("dom::",document.getElementById('webGL'))
            domWidth = document.getElementById('webGL').clientWidth;
            domHeight = document.getElementById('webGL').clientHeight;

            renderer = new THREE.WebGLRenderer({
                antialias:true
            });

            renderer.setSize(domWidth,domHeight); 
            renderer.setPixelRatio(window.devicePixelRatio); //设置canvas的像素比为当前设备的屏幕像素比，避免高分屏下模糊

            document.getElementById('webGL').appendChild(renderer.domElement);

            renderer.setClearColor(0xFFFFFF,1.0);
        }

        //循环渲染
        function animate(){  
            renderer.render(scene, camera);
            requestAnimationFrame(animate);
        }

        //监听屏幕变化
        window.addEventListener('resize', onWindowResize, false);
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        //创建四边形
        var geometry;
        function initObject(){
            geometry = new THREE.PlaneGeometry(100,100);
            var material = new THREE.MeshBasicMaterial({vertexColors:THREE.VertexColors,}); //vertexColors 试用顶点着色

            var color1 = new THREE.Color(0x0090F);
            var color2 = new THREE.Color(0x000F0);
            var color3 = new THREE.Color(0x20F0FF);

            for(var i = 0 ; i < geometry.faces.length ; i++){  
                    var face  = geometry.faces[i]; //拿到四边形的两个面
                    face.vertexColors[0] = color1; //每个面由三个点组成，给三个点附上顶点颜色
                    face.vertexColors[1] = color2;
                    face.vertexColors[2] = color3;
            }

            var object = new THREE.Mesh(geometry,material);
            object.position.set(0,0,0);
            scene.add(object);
        }


        initRender();
        initScene();
        initCamera();
        initLight();
        initObject();
        animate();

    </script>
    
</body>
</html>

桑榆未晚_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
四边形的顶点着色

作者：桑榆QQ：934440653有问题，评论留言，或qq联系案例效果四边形的只给顶点着色，渐变效果是计算机自己的插值运算产生的效果。vertices，数组中的四个顶点，数组下标索引与案例效果图的标注一致。四边形由两个三角面组成，分别为索引0,1,2和索引2,3,4。下图为四边形其中一个面，face[0]的a,b,c索引对应着vertices的下标。vertexColors，...
复制链接

扫一扫