three.js Face3对象定义Geometry的三角形面

最新推荐文章于 2023-04-29 14:37:25 发布

汉武大帝·

最新推荐文章于 2023-04-29 14:37:25 发布

阅读量1.8k

点赞数

分类专栏： three.js 文章标签： javascript linq p2p

本文链接：https://blog.csdn.net/yinge0508/article/details/122884105

版权

three.js 专栏收录该内容

112 篇文章 11 订阅

订阅专栏

Face3对象定义Geometry的三角形面:

Face3( a, b, c, normal, color, materialIndex )

a — 顶点索引A。
b — 顶点索引B。
c — 顶点索引C。
normal — 面法向量或顶点法向量数组。
color — 面颜色或顶点颜色的数组。
materialIndex — 材料索引。

效果如下：

添加了法向量，设置了点光源，环境光，但是两个面的分界面处不明显，此处有bug

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Face3对象定义Geometry的三角形面</title>
  <script src="./three.js"></script>
  <script src="./OrbitControls.js"></script>
</head>
<body>
  <script>
    /**
     * Face3对象定义Geometry的三角形面: 三角面（Face3）
     * 定义两个三角形面，这两个三角形面有一个公共边
    */
    //  1,创建场景对象
    var scene = new THREE.Scene();
    // 2, 创建普通几何体对象
    var geometry = new THREE.Geometry();
    // 使用Vector3创建顶点数据widht 
    var p1 = new THREE.Vector3(0,0,0);
    var p2 = new THREE.Vector3(100,0,0);
    var p3 = new THREE.Vector3(0,100,0);
    var p4 = new THREE.Vector3(0,0,100);
    geometry.vertices.push(p1,p2,p3,p4);
    // 创建三角面对象
    var face1 = new THREE.Face3(0,1,2);
    var n1 = new THREE.Vector3(0,0,-1);
    var n2 = new THREE.Vector3(0,0,-1);
    var n3 = new THREE.Vector3(0,0,-1);
    face1.vertexNormals.push(n1,n2,n3);
    var face2 = new THREE.Face3(0,1,3);
    // 创建face2面法向量
    var face2_n = new THREE.Vector3(0,-1,0);
    face2.normal = face2_n;
    geometry.faces.push(face1,face2);
    var material = new THREE.MeshLambertMaterial({
                          color:0x0000ff,
                          side:THREE.DoubleSide
                        });
    var mesh = new THREE.Mesh(geometry,material);
    scene.add(mesh);
    // 3,创建点光源对象，环境光对象
    var point_light = new THREE.PointLight(0xff0000,100,1000,2);
    point_light.position.set(-100, 100, -100);
    point_light.castShadow = true;
    scene.add(point_light);
    
    var ambient = new THREE.AmbientLight({color:0xffffff});
    scene.add(ambient);
    // 4，创建正交相机对象
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width/height;
    var s = 100;
    var camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 1000);
    camera.position.set(200,300,200);
    camera.lookAt(scene.position);
    // 创建坐标轴对象
    var axis_helper = new THREE.AxisHelper(500);
    scene.add(axis_helper);
    var gridHelper = new THREE.GridHelper(500,70);
    // scene.add(gridHelper);
    // 5，创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width,height);
    renderer.shadowMap.enabled = true;
    document.body.appendChild(renderer.domElement);
    function render(){
      renderer.render(scene,camera);
    }
    render();
    // 6,创建轨道控制对象
    var controls = new THREE.OrbitControls(camera,renderer.domElement);
    controls.addEventListener('change',render);
  </script>
</body>
</html>

汉武大帝·

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
three.js Face3对象定义Geometry的三角形面

Face3对象定义Geometry的三角形面:Face3(a,b,c,normal,color,materialIndex)a — 顶点索引A。b — 顶点索引B。c — 顶点索引C。normal — 面法向量或顶点法向量数组。color — 面颜色或顶点颜色的数组。materialIndex — 材料索引。效果如下：添加了法向量，设置了点光源，环境光，但是两个面的分界面处不明显，此处有bug代码如下:<!DOCTYPE html><h...
复制链接

扫一扫