three.js初级教程（一）画线

最新推荐文章于 2024-08-16 23:07:31 发布

田野的嘴好冰

最新推荐文章于 2024-08-16 23:07:31 发布

阅读量1.4k

点赞数 2

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

本文链接：https://blog.csdn.net/baidu_35377957/article/details/79254216

版权

前几个星期突然接了小程序的任务，所以three.js的教程就晚点发布了。

直接上代码，先码上html和css：

 <div id="canvas-frame"></div>

<style>
        canvas { width: 100%; height: 100% }
        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 600px;
            background-color: #EEEEEE;
        }
    </style>

重点在js代码上：

        //重构成规范的模式
        var renderer;
        function initThree(){
            width = document.getElementById('canvas-frame').clientWidth;
            height = document.getElementById('canvas-frame').clientHeight;
            renderer = new THREE.WebGLRenderer({
                antialias:true
            });
            renderer.setSize(width, height);
            document.getElementById('canvas-frame').appendChild(r