threejs绘制三角面

threejs绘制三角面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>ifc三维场景</title>
        <style>
            body {
                margin: 0;
                overflow: hidden;
            }
        </style>
        
        <script src="js/three2.js"></script>
        <script src="js/OrbitControls2.js"></script>
        
    </head>

    <body>
        <script>
            //创建一个renderer ,
            var renderer = new THREE.WebGLRenderer({ antialias: true });
            //设置清空颜色，每秒会渲染60次，渲染的时候会使用此颜色先清空
            renderer.setClearColor(new THREE.Color(0xeeeeee, 1));
            //设置渲染尺寸
            renderer.setSize(window.innerWidth, window.innerHeight);
            //设置阴影允许
            renderer.shadowMapEnabled = true;
            //将webgl元素添加到body中
            document.body.appendChild(renderer.domElement);

            //创建场景
            var scene = new THREE.Scene();

            //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
            var camera = new THREE.PerspectiveCamera(
                45,
                window.innerWidth / window.innerHeight,
                0.1,
                20000
            );
            //将相机放到x:1000 , y:1000 , z:1000的位置
            camera.position.set(2000, 1000, 1000);
            //设置相机的朝向，可以认为与相机镜头垂直的轴线应该和哪一个轴相交
            camera.up.set(0, 1, 0);
            //将相机的镜头对准x:0 , y:0 , z:0的位置 经过这个设置相机就被固定住了
            camera.lookAt({ x: 0, y: 0, z: 0 });
            //将相机添加到场景中
            scene.add(camera);

            //创建一个自然光，自然光无处不在
            var light1 = new THREE.AmbientLight(0xffffff);
            //设置灯光的位置
            light1.position.set(0, 0, 0);
            //将灯光加入场景
            scene.add(light1);

            var mesh17 = test17();
            var mesh18 = test18();
            scene.add(mesh17);
            scene.add(mesh18);
            

            var orbitCtl = new THREE.OrbitControls(camera);
            orbitCtl.autoRotate = false;

            var clock = new THREE.Clock();

            function threeStart() {
                var delta = clock.getDelta();
                orbitCtl.update(delta);

                renderer.clear();
                renderer.render(scene, camera);
                requestAnimationFrame(threeStart);
            }

            threeStart();


            function test17(){
                
                var geometry = new THREE.BufferGeometry();
                var triangleGeometry = new THREE.Geometry(); 

                triangleGeometry.vertices.push(new THREE.Vector3(0.0,-150.0,-150.0));
                triangleGeometry.vertices.push(new THREE.Vector3(0.0,-150.0,-10.0));
                triangleGeometry.vertices.push(new THREE.Vector3(0.0,150.0,-150.0));


                triangleGeometry.faces.push(new THREE.Face3(0,1,2));
                
                
                var triangleMaterial = new THREE.MeshBasicMaterial({ color:0xff0000, side:THREE.DoubleSide });   
                var mesh = new THREE.Mesh(triangleGeometry, triangleMaterial); //网格模型对象Mesh
                //scene.add(mesh); //网格模型添加到场景中

                return mesh;
            }


            function test18(){
                
                var geometry = new THREE.BufferGeometry();
                var triangleGeometry = new THREE.Geometry(); 

                triangleGeometry.vertices.push(new THREE.Vector3(50.0,-150.0,-150.0));
                triangleGeometry.vertices.push(new THREE.Vector3(50.0,-150.0,-10.0));
                triangleGeometry.vertices.push(new THREE.Vector3(50.0,150.0,-150.0));


                triangleGeometry.faces.push(new THREE.Face3(0,1,2));
                
                
                var triangleMaterial = new THREE.MeshBasicMaterial({ color:0xff0000, side:THREE.DoubleSide });   
                var mesh = new THREE.Mesh(triangleGeometry, triangleMaterial); //网格模型对象Mesh
                //scene.add(mesh); //网格模型添加到场景中

                return mesh;
            }
            


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

 

 

 

 

###########################

posted @ 2022-01-06 12:28  西北逍遥  阅读(530)  评论(0)    收藏  举报