创建自定义几何体（以立方体为例）

最新推荐文章于 2025-04-22 19:06:19 发布

weixin_30853329

最新推荐文章于 2025-04-22 19:06:19 发布

阅读量413

点赞数

CC 4.0 BY-SA版权

文章标签： c/c++

原文链接：http://www.cnblogs.com/sangzs/p/9202518.html

效果图：

创建几何体的方法：

// 创建几何体
function addGeomtries() {
    // 通过一系列点创建物体  
    var vertices = [
        new THREE.Vector3(1, 3, 1),
        new THREE.Vector3(1, 3, -1),
        new THREE.Vector3(1, -1, 1),
        new THREE.Vector3(1, -1, -1),
        new THREE.Vector3(-1, 3, -1),
        new THREE.Vector3(-1, 3, 1),
        new THREE.Vector3(-1, -1, -1),
        new THREE.Vector3(-1, -1, 1)
    ];
    var faces = [
        new THREE.Face3(0, 2, 1),
        new THREE.Face3(2, 3, 1),
        new THREE.Face3(4, 6, 5),
        new THREE.Face3(6, 7, 5),
        new THREE.Face3(4, 5, 1),
        new THREE.Face3(5, 0, 1),
        new THREE.Face3(7, 6, 2),
        new THREE.Face3(6, 3, 2),
        new THREE.Face3(5, 7, 0),
        new THREE.Face3(7, 2, 0),
        new THREE.Face3(1, 3, 4),
        new THREE.Face3(3, 6, 4),
    ];
    var geom = new THREE.Geometry();
    geom.vertices = vertices;
    geom.faces = faces;
    geom.computeFaceNormals();
    
    var material = new THREE.MeshLambertMaterial({ color: 0xcccccc })
    var geomobj = new THREE.Mesh(geom, material)
    geomobj.castShadow = true

    scene.add(geomobj);
}

源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo4</title>
    <script src="js/three.js"></script>
    <script src="js/stats.js"></script>
    <script src="js/dat.gui.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="webgl-output"></div>
    <div id="stats-output"></div>
    <script>
        // 初始化THREE对象
        var scene
        var camera
        var renderer
        var controls
        var stats

        function init() {
            stats = initStats()
            window.addEventListener('resize', onResize, false)

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

            // 创建相机
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
            camera.position.set(-30, 40, 30)
            camera.lookAt(scene.position)

            // 创建渲染器
            renderer = new THREE.WebGLRenderer()
            renderer.setClearColor(0xEEEEEE)
            renderer.setSize(window.innerWidth, window.innerHeight)
            renderer.shadowMap.enabled = true

            // 地面
            var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1)
            var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccc })
            var plane = new THREE.Mesh(planeGeometry, planeMaterial)
            plane.rotation.x = -0.5 * Math.PI
            plane.receiveShadow = true
            scene.add(plane)

            // 聚光灯
            var spotLight = new THREE.SpotLight(0xffffff)
            spotLight.position.set(-40, 60, -10)
            spotLight.castShadow = true
            scene.add(spotLight)

            addGeomtries()
            
            // 查看场景元素
            console.log(scene.children)
            // 输出到网页
            document.getElementById('webgl-output').appendChild(renderer.domElement)

            // 创建data.GUI可视化变量调整插件
            controls = new function () {
                this.rotationSpeed = 0.02
                this.bouncingSpeed = 0.03
            }
            var gui = new dat.GUI()
            gui.add(controls, 'rotationSpeed', 0, 0.5)
            gui.add(controls, 'bouncingSpeed', 0, 0.5)

            // 逐帧绘制方法
            function renderScene() {
                stats.update()
                // ......
                requestAnimationFrame(renderScene)
                renderer.render(scene, camera)
            }

            renderScene()
        }
        
        // 创建几何体
        function addGeomtries() {
            // 通过一系列点创建物体  
            var vertices = [
                new THREE.Vector3(1, 3, 1),
                new THREE.Vector3(1, 3, -1),
                new THREE.Vector3(1, -1, 1),
                new THREE.Vector3(1, -1, -1),
                new THREE.Vector3(-1, 3, -1),
                new THREE.Vector3(-1, 3, 1),
                new THREE.Vector3(-1, -1, -1),
                new THREE.Vector3(-1, -1, 1)
            ];
            var faces = [
                new THREE.Face3(0, 2, 1),
                new THREE.Face3(2, 3, 1),
                new THREE.Face3(4, 6, 5),
                new THREE.Face3(6, 7, 5),
                new THREE.Face3(4, 5, 1),
                new THREE.Face3(5, 0, 1),
                new THREE.Face3(7, 6, 2),
                new THREE.Face3(6, 3, 2),
                new THREE.Face3(5, 7, 0),
                new THREE.Face3(7, 2, 0),
                new THREE.Face3(1, 3, 4),
                new THREE.Face3(3, 6, 4),
            ];
            var geom = new THREE.Geometry();
            geom.vertices = vertices;
            geom.faces = faces;
            geom.computeFaceNormals();
            
            var material = new THREE.MeshLambertMaterial({ color: 0xcccccc })
            var geomobj = new THREE.Mesh(geom, material)
            geomobj.castShadow = true 
            scene.add(geomobj);
        }

        // FPS统计图形插件
        function initStats() {
            var stats = new Stats()
            stats.setMode(0)
            stats.domElement.style.position = 'absolute'
            stats.domElement.style.left = '0px'
            stats.domElement.style.top = '0px'
            document.getElementById('stats-output').appendChild(stats.domElement)
            return stats
        }

        // 场景对浏览器自适应
        function onResize() {
            camera.aspect = window.innerWidth / window.innerHeight
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
        }

        window.onload = init()
    </script>
</body>

</html>

转载于:https://www.cnblogs.com/sangzs/p/9202518.html