18、处理大量物体

创建日期：2024-07-08
更新日期：2025-01-12
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>18_处理大量物体</title>
    <link href="../css/index.css" rel="stylesheet" />
    <script src="../libs/three.js"></script>
    <script src="../libs/stats.min.js"></script>
    <script src="../libs/dat.gui.min.js"></script>
</head>
<body>
    <script>
        var scene = new THREE.Scene();

        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0x000000, 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
        camera.position.set(40, 40, 40);
        camera.lookAt(scene.position);

        // stats
        var stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = 0;
        stats.domElement.style.top = 0;
        document.body.appendChild(stats.domElement);

        // light
        var light = new THREE.DirectionalLight(0xffffff);
        scene.add(light);
        light.position.set(50, 50, 50);
        light.lookAt(scene.position);

        var pivot = new THREE.Object3D();
        scene.add(pivot);

        var render = function () {
            requestAnimationFrame(render);
            pivot.rotation.y += 0.01;
            renderer.render(scene, camera);
            stats.update();
        }

        var control = new function () {
            this.addObjects = function () {
                for (var i = 0; i < 100; i++) {
                    var geometry = new THREE.BoxGeometry(10 * Math.random(), 10 * Math.random(), 10 * Math.random());
                    var material = new THREE.MeshPhongMaterial({
                        color: 0xffffff * Math.random(),
                        transparent: true,
                        opacity: 0.8
                    });
                    var mesh = new THREE.Mesh(geometry, material);
                    pivot.add(mesh);
                    mesh.position.set(100 * Math.random() - 50, 0, 100 * Math.random() - 50);
                }
            };
            this.addMerged = function () {
                for (var i = 0; i < 100; i++) {
                    var geometry = new THREE.Geometry();

                    var merged = new THREE.BoxGeometry(10 * Math.random(), 10 * Math.random(), 10 * Math.random());
                    var translation = new THREE.Matrix4().makeTranslation(100 * Math.random() - 50, 100 * Math.random() - 50);
                    merged.applyMatrix(translation);
                    geometry.merge(merged);

                    var material = new THREE.MeshPhongMaterial({
                        color: 0xffffff * Math.random(),
                        transparent: true,
                        opacity: 0.8
                    });
                    var mesh = new THREE.Mesh(geometry, material);
                    pivot.add(mesh);
                    mesh.position.set(100 * Math.random() - 50, 0, 100 * Math.random() - 50);
                }
            }
        };
        var gui = new dat.GUI();
        gui.add(control, 'addObjects');
        gui.add(control, 'addMerged');

        render();
    </script>
</body>
</html>
简介

一个来自三线小城市的程序员开发经验总结。
18、处理大量物体

简介

最新修改

导航
