学习threejs（二）—— 创建点

作者: 一沭丶 | 来源:发表于2019-01-04 09:39 被阅读8次

学习threejs（二）—— 创建点
学习threejs(三)—— 创建线
学习threejs（四）—— 创建面
02、添加材质、光源以及物体对象的阴影
threejs绘制中文方案
【ThreeJs】06 - 纹理
Three.JS 粒子系统实现雪花飘落动画花飘落动画
Three.JS 粒子系统实现雪花飘落动画
落地成盒？前端必收藏的干货：threeeJs插件Gui添加盒子功
解决: WARNING: Too many active Web

创建点

createPoints() 创建普通的点

createShapePoints() 创建自定义材质的点

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
        <style>
            * { margin: 0; padding: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="three.js"></script>
        <script>
            var scene = new THREE.Scene();
            // 相机 正交相机（OrthographicCamera）、透视相机（PerspectiveCamera）、全景相机（CubeCamera）和3D相机（StereoCamera）。
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 600 );

            // 渲染器
            var renderer = new THREE.WebGLRenderer();

            renderer.setSize( window.innerWidth, window.innerHeight );

            document.body.appendChild( renderer.domElement );

            function createPoints() {
                // 创建一个几何模型（Geometry）,并添加点
                let geometry = new THREE.Geometry();

                // 点位置
                const p1 = new THREE.Vector3(0,0,0);
                const p2 = new THREE.Vector3(15,15,0);
                const p3 = new THREE.Vector3(-15,2,0);

                // vertices 表示顶点
                geometry.vertices.push(p1, p2, p3);
                // 使用 PointsMaterial, 记得加上size属性，用来设置点的大小
                // https://threejs.org/docs/index.html#api/en/materials/PointsMaterial
                let material = new THREE.PointsMaterial({
                    color: 0x00ff66, 
                    size: 2
                });

                let points = new THREE.Points(geometry, material);
                return points;
            }

            

            function createShapePoints(){
                //创建一个圆形的材质，记得一定要加上texture.needsUpdate = true;
                let canvas = document.createElement("canvas");
                canvas.width = 100;
                canvas.height = 100;

                let context = canvas.getContext("2d");
                context.fillStyle = "#ffff00";

                //canvas 创建圆
                // http://www.w3school.com.cn/tags/canvas_arc.asp
                context.arc(50,50,45,0,2*Math.PI);
                context.fill();

                // 创建材质
                let texture = new THREE.Texture(canvas);
                texture.needsUpdate = true;

                //创建点，是用PointsMaterial的map属性来设置材质
                let geometry = new THREE.Geometry();
                // 点位置
                const p1 = new THREE.Vector3(0,0,0);
                const p2 = new THREE.Vector3(15,15,0);
                const p3 = new THREE.Vector3(-15,2,0);

                // vertices 表示顶点
                geometry.vertices.push(p1, p2, p3);

                // 如果这边的颜色没有设置，那么就默认取canvas中的颜色
                let material = new THREE.PointsMaterial({
                    color:0xff0000,
                    size:4,
                    map:texture
                });

                let points = new THREE.Points(geometry,material);

                return points;
            }

            // var points = createPoints();

            var points = createShapePoints();

            scene.add( points );
            camera.position.z = 100;

            function render() {
                renderer.render( scene, camera );
            }
            render();
        </script>
    </body>
</html>