<html>

    <head>

        <title>My first three.js app</title>

        <style>

            body { margin: 0;}

            canvas { width: 100%; height: 100% }

        </style>

    </head>

    <body>

        <script src=three.min.js></script>

        <script>

            var scene = new THREE.Scene();

            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

            var renderer = new THREE.WebGLRenderer();

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

            document.body.appendChild( renderer.domElement );

            camera.position.z = 100;//我们把视线放置到z轴的100位置.这是我们眼睛的位置,如果把点也放在这个100的位置 我们会看不到点，就好像把一个物体放在我们的眼球中，我们不会看到那个物体

            var group = new THREE.Group();

            //创建一个简单的点

            function createPoint() {

                var starsGeometry = new THREE.Geometry();

                starsGeometry.vertices.push(new THREE.Vector3(0,0,10));//设置点的位置在z轴的10的位置，可以试试放在100的位置 我们会看不到点

                var starsMaterial = new THREE.PointsMaterial({color: 0x888888,size:20})

                var starsPoint = new THREE.Points(starsGeometry, starsMaterial);

                group.add(starsPoint);

                scene.add(group);

            }

            //创建一个圆形点

            function createArcPoint(){

              let canvas = document.createElement("canvas");

              canvas.width = 100;

              canvas.height = 100;

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

              context.fillStyle = "#ffff00";

              context.arc(50,50,45,0,2*Math.PI);;

              context.fill();

              let texture = new THREE.Texture(canvas);

              texture.needsUpdate = true;

               //创建点，是用PointsMaterial的map属性来设置材质

               var starsGeometry = new THREE.Geometry();

               starsGeometry.vertices.push(new THREE.Vector3(0,0,0));

               starsGeometry.vertices.push(new THREE.Vector3(15,15,0));

               starsGeometry.vertices.push(new THREE.Vector3(-15,2,0));

               var starsMaterial = new THREE.PointsMaterial({color: 0x888888,size:20,map:texture})

               var starsPoint = new THREE.Points(starsGeometry, starsMaterial);

               group.add(starsPoint);

               scene.add(group);

            }

            //创建线

            function createLine(){

              let geometry = new THREE.Geometry();

              geometry.vertices.push(new THREE.Vector3(-35,2,0));

              geometry.vertices.push(new THREE.Vector3(15,15,0));

              geometry.vertices.push(new THREE.Vector3(-15,2,0));

              let material = new THREE.LineBasicMaterial({color:0xff0000}); //注意这里使用的是LineBasicMaterial

              let line = new THREE.Line(geometry,material);

              scene.add(line);

            }

            //创建虚线

            function createLineSegments(){

              let geometry = new THREE.Geometry();

              geometry.vertices.push(new THREE.Vector3(15,15,0));

              geometry.vertices.push(new THREE.Vector3(-15,2,0));

              geometry.computeLineDistances();  //设置虚线

              let material = new THREE.LineDashedMaterial({color:0xff0000,dashSize:3,gapSize:2,lineWidth:1 });//dashSize线的长度 gapSize间隔的长度

              let line = new THREE.LineSegments(geometry,material);

              scene.add(line);

            }

            //创建一个二维平面

            function createSqurePlane(){

              var groundGeometry = new THREE.PlaneGeometry(100, 100, 4, 4);//宽度 长度 宽度段数 长度段数

              var groundMaterial = new THREE.MeshBasicMaterial({color: 0x777777});

              ground = new THREE.Mesh(groundGeometry, groundMaterial);

              //ground.rotation.set(-0.5 * Math.PI, 0, 0); // 沿着 X轴旋转-90°

              scene.add(ground);

            }

            renderer.render(scene, camera);

        </script>

    </body>

</html>

下一篇:创建几何图形

three.js 创建点 线 面的更多相关文章

  1. 使用webgl(three.js)创建3D机房，3D机房微模块详细介绍(升级版二)

    序: 上节课已经详细描述了普通机房的实现过程,文章地址(https://www.cnblogs.com/yeyunfei/p/10473021.html) 紧接着上节课的内容 我们这节可来详细讲解机房 ...

  2. 使用webgl(three.js)创建3D机房(升级版)-普通机房

    序: 目前市面上的数据中心主要分两大类,一类属于普通数据中心,机柜按照XY轴 有序排放,一类属于微模块集合的数据中心,多个机柜组合而成的微模块.  本节课主要详细讲解普通数据中心的可视化展示,浏览器直 ...

  3. 用Backbone.js创建一个联系人管理系统(五)

    原文: Build a Contacts Manager Using Backbone.js: Part 5 这是这系列教程最后一部分了. 之前所有的增删改都在前端完成. 这部分我们要把Contact ...

  4. 使用 iosOverlay.js 创建 iOS 风格的提示和通知

    iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼 ...

  5. Dynamics.js - 创建逼真的物理动画的 JS 库

    Dynamics.js 是一个用来创建物理动画 JavaScript 库.你只需要把dynamics.js引入你的页面,然后就可以激活任何 DOM 元素的 CSS 属性动画,也可以用户 SVG 属性. ...

  6. 使用three.js创建3D机房模型-分享一

    序:前段时间公司一次研讨会上,一市场部同事展现了同行业其他公司的3D机房,我司领导觉得这个可以研究研究,为了节约成本,我们在网上大量检索,最后找到一位前辈的博文[TWaver的技术博客],在那篇博文的 ...

  7. Node.js 创建HTTP服务器

    Node.js 创建HTTP服务器 如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 mod_php5 模块和php-cgi. 从这个角度看,整个& ...

  8. 用Backbone.js创建一个联系人管理系统(一)

    原文 Build a Contacts Manager Using Backbone.js: Part 1 在这个教程里我们将会使用Backbone.js,Underscore.js,JQuery创建 ...

  9. Node.js 创建HTTP服务器（经过测试，这篇文章是靠谱的T_T）

    Node.js 创建HTTP服务器 如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 mod_php5 模块和php-cgi. 从这个角度看,整个& ...

随机推荐

  1. ArcGIS API for JavaScript经典例子

    地址为本地 1.绘制图形: http://localhost/arcgis_js_api/sdk/sandbox/sandbox.html?sample=toolbar_draw 2.双击编辑图形 h ...

  2. 深度学习基础（三）NIN_Network In Network

    该论文提出了一种新颖的深度网络结构,称为"Network In Network"(NIN),以增强模型对感受野内local patches的辨别能力.与传统的CNNs相比,NIN主 ...

  3. axios实现拦截器

    项目中通常使用token进行用户权限认证,需要在请求的header中添加token信息进行验证,拦截返回的状态码进行跳转或重新登陆,在全局配置这些不妥,所以新建一个axios实例进行项目的配置. // ...

  4. 【Java】NO.84.Project.1.OCEA.1.001-【Dreamcar】-

    1.0.0 Summary Tittle:[Java]NO.84.Project.1.OCEA.1.001-[Dreamcar]- Style:Project Series:Java Since:20 ...

  5. JavaScript 事件之event.preventDefault()与event.stopPropagation()简单介绍

    event.preventDefault()用法介绍: 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作). 例如,如果 type 属性是 “submit”,在事件传播的任 ...

  6. python调用RPC接口

    要调用RPC接口,python提供了一个框架grpc,这是google开源的 rpc相关文档: https://grpc.io/docs/tutorials/basic/python.html 需要安 ...

  7. appium元素获取

    查看安卓手机的界面元素: 1.打开模拟器: 2.启动服务: 在cmd 输入:  adb connect 127.0.0.1:62001  回车 可以输入 adb devices 查看启动状态 3.在a ...

  8. UVA 11582 Colossal Fibonacci Numbers(数学)

    Colossal Fibonacci Numbers 想先说下最近的状态吧,已经考完试了,这个暑假也应该是最后刷题的暑假了,打完今年acm就应该会退了,但是还什么都不会呢? +_+ 所以这个暑假,一定 ...

  9. HTTPS学习笔记一----HTTPS的基础理论知识

    首先推荐一本书,<HTTP权威指南>我就是看这本书入门的,对http协议有了更好的理解,学习https的理论知识我认为需要了解以下几点,需要一步步的深入学习: 1.HTTPS的基本概念? ...

  10. CentOS 7 使用SVN+Apache搭建版本控制服务器

    svn简介 Subversion是一个免费/开源的版本控制系统, Subversion 可以跨越时间地对文件和目录, 以及它们的修改进行管理. 这就允许你恢复 数据的旧版本, 或检查数据的修改历史. ...