three.js从入门到精通系列教程038 - 使用THREE.Sprite和THREE.SpriteMaterial绘制多个随机粒子

最新推荐文章于 2024-06-08 08:26:28 发布

smartsmile2012

最新推荐文章于 2024-06-08 08:26:28 发布

阅读量435

点赞数 5

分类专栏： three.js从入门到精通系列教程文章标签： javascript 开发语言 ecmascript three.js 数字孪生前端

本文链接：https://blog.csdn.net/smartsmile2012/article/details/135743618

版权

three.js从入门到精通系列教程专栏收录该内容

52 篇文章 9 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程038 - 使用THREE.Sprite和THREE.SpriteMaterial绘制多个随机粒子</title>
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
</head>

<body>
    <center id="myContainer"></center>
    <script type="text/javascript">
        //创建渲染器
        var myRenderer = new THREE.WebGLRenderer({ antialias: true });
        myRenderer.setSize(window.innerWidth, window.innerHeight);
        myRenderer.setClearColor('white', 1.0);
        $('#myContainer')[0].appendChild(myRenderer.domElement);
        var myCamera = new THREE.PerspectiveCamera(45,
            window.innerWidth / window.innerHeight, 1, 1000);
        var myScene = new THREE.Scene();
        //使用THREE.Sprite和THREE.SpriteMaterial绘制多个随机粒子
        var myGroup = new THREE.Group();
        myScene.add(myGroup);
        for (var i = 0; i < 10000; i++) {
            var mySpriteMaterial = new THREE.SpriteMaterial({
                color: new THREE.Color(+SetRandomColor())
            });
            var mySprite = new THREE.Sprite(mySpriteMaterial);
            mySprite.position.x = THREE.Math.randFloatSpread(2000);
            mySprite.position.y = THREE.Math.randFloatSpread(2000);
            mySprite.position.z = THREE.Math.randFloatSpread(2000);
            mySprite.scale.set(8, 8, 8);
            myGroup.add(mySprite);
        }
        //渲染多个随机粒子
        myRenderer.render(myScene, myCamera);
        //随机生成颜色
        function SetRandomColor() {
            var arrHex = ["0", "1", "2", "3", "4", "5", "6",
                "7", "8", "9", "a", "b", "c", "d", "e", "f"],
                strHex = "0x",
                index;
            for (var i = 0; i < 6; i++) {
                index = Math.round(Math.random() * 15);
                strHex += arrHex[index];
            }
            return strHex;
        }
    </script>
</body>

</html>

smartsmile2012

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
three.js从入门到精通系列教程038 - 使用THREE.Sprite和THREE.SpriteMaterial绘制多个随机粒子

【代码】three.js从入门到精通系列教程038 - 使用THREE.Sprite和THREE.SpriteMaterial绘制多个随机粒子。
复制链接

扫一扫