20three.js自定义几何体

最新推荐文章于 2024-05-04 15:27:35 发布

X01动力装甲

最新推荐文章于 2024-05-04 15:27:35 发布

阅读量825

点赞数

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

本文为博主原创文章，未经作者允许禁止任何形式的转载。

本文链接：https://blog.csdn.net/lin5165352/article/details/81571934

版权

three.js 专栏收录该内容

114 篇文章 81 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20three.js自定义几何体</title>
    <script src="../js/three.js"></script>
    <script src="../js/TrackballControls.js"></script>
    <style type="text/css">
        body{margin: 0;overflow: hidden;}
    </style>
</head>
<body>
<div id="WebGL-output" style="width:800px;height:600px;background-color: #6e3723"></div>
<script type="text/javascript">
    function init() {
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(45,4/3,0.1,1000);
        camera.position.set(0,0,30);
        camera.lookAt(scene.position);
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor('#08d48d');

        var cubegem = new THREE.BoxGeometry(4,4,4);
        var cubemer = new THREE.MeshLambertMaterial({color:0x00ff00});
        var cube = new THREE.Mesh(cubegem,cubemer);
        cube.position.set(0,0,0);
        scene.add(cube);
        console.log(cubegem);

        var vertices = [
            new THREE.Vector3(3,3,3),//上面四个点
            new THREE.Vector3(-2,2,2),
            new THREE.Vector3(-2,2,-2),
            new THREE.Vector3(2,2,-2),

            new THREE.Vector3(2,-2,2),//下面四个点
            new THREE.Vector3(-2,-2,2),
            new THREE.Vector3(-2,-2,-2),
            new THREE.Vector3(2,-2,-2),
        ];
        var faces = [
            new THREE.Face3(0,2,1),//上下
            new THREE.Face3(0,3,2),

            new THREE.Face3(7,4,6),
            new THREE.Face3(4,5,6),

            new THREE.Face3(1,4,0),//前后
            new THREE.Face3(1,4,5),

            new THREE.Face3(2,7,3),
            new THREE.Face3(2,7,6),

            new THREE.Face3(1,6,2),//左右
            new THREE.Face3(1,6,5),

            new THREE.Face3(0,7,3),
            new THREE.Face3(0,7,4),
        ];

        var faces1 = [
            //顶点顺序不同（顺时针和逆时针），生成面的法向也不同，开启双面显示可以忽视这个问题。
            //逆时针面对相机可见？不可见？没搞明白。总之测试一下，方向不对就换个方向。
            new THREE.Face3(0,2,1),//上下
            new THREE.Face3(0,3,2),

            new THREE.Face3(4,6,5),
            new THREE.Face3(4,7,6),

        ];
        var geom = new THREE.Geometry();
        geom.vertices =vertices;
        geom.faces = faces;
        geom.computeFaceNormals();
        //console.log(geom);
        var materials = [
            new THREE.MeshLambertMaterial({opacity: 1, color: '#e73a0d', transparent: true}),
            new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})
        ];
        //混合材质
        var geomcube = new THREE.SceneUtils.createMultiMaterialObject(geom,materials);
        geomcube.children[0].material.side = THREE.DoubleSide;//开启双面显示
        geomcube.position.set(10,0,0);
        geomcube.children[0].position.set(1,0,0);
        //使用foreach 方法设置统一属性
        geomcube.children.forEach(function (value) { value.receiveShadow = true });
        scene.add(geomcube);
        console.log(geomcube);

        //单一材质
        var cubemer1 = new THREE.MeshLambertMaterial({color:'#fff215'});
        var cube1 = new THREE.Mesh(geom,cubemer1);
        cube1.material.side = THREE.DoubleSide;//开启双面显示
        cube1.position.set(-10,0,0);
        scene.add(cube1);

        renderer.setSize(800,600);
        var amblight = new THREE.AmbientLight(0x444444);
        scene.add(amblight);
        var spotlight = new THREE.SpotLight(0xFFFFFF);
        spotlight.position.set(40,50,40);
        scene.add(spotlight);

        var axes = new THREE.AxisHelper(5);
        scene.add(axes);

        document.getElementById('WebGL-output').appendChild(renderer.domElement);
        renderer.render(scene,camera);
        var trackballControls = new THREE.TrackballControls(camera);
        var clock = new THREE.Clock();
        function renderscence() {
            var delta = clock.getDelta();
            trackballControls.update(delta);
            requestAnimationFrame(renderscence);
            renderer.render(scene,camera);
        }
        renderscence();
    }
    window.onload = init;
</script>
</body>
</html>