<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. C和C指针小记(十三)-数组

    1.1 一维数组 一维数组的声明: int a[10]; 这里a就是一个数组. 数组a的类型就是一个指向整型的常量指针. 但是数组和指针是**不相同**的. **数组具有特定数量的元素,而指针只是一个 ...

  2. Ecplise通过Git将项目提交到GitHub

    一.参考https://blog.csdn.net/bendanany/article/details/78891804 二.注意点: 1.仓库名必须和项目名相同: 2.若提交出现Can't conn ...

  3. PHP多维数组转一维

    目录 1. array_column函数 2. array_walk函数 3. array_map函数 4. foreach循环 5. array_map变种 参考:https://www.awaim ...

  4. 如何相互转换逗号分隔的字符串和List【转】

    将逗号分隔的字符串转换为List 方法 1: 利用JDK的Arrays类 String str = "a,b,c"; List<String> result = Arr ...

  5. python常用函数总结

    原文地址https://www.cnblogs.com/nice107/p/8118876.html 我们在学习python的时候,接触最多的往往则是那些函数,对于python函数,在这里为大家总结归 ...

  6. c# 结构的使用

    类的定义的是引用类型,重点在堆上创建,有的时候类只包含极少的数据,因为管理堆而造成的开销是很大的.这时候更好的做法就是将类型定义成结构.结构是值类型,在栈上存储,能有效的减小内存管理的开销.c#基元类 ...

  7. django开发(二)

    1.django数据库操作---model的使用以及django自带的数据api django中已经做了ORM,表就是一个类class,表中的一个项就是一个对象object,很好用 1.1django ...

  8. SliverList , SliverFixedExtentList

    SliverList 高度自动, SliverFixedExtentList 高度固定死. CustomScrollView( slivers:[ SliverList( delegate: Sliv ...

  9. oracle insert、append、parallel、随后查询的redo与磁盘读写

    SQL> set autotrace traceonly statistics; SQL> insert into big_table_dir_test1 select * from bi ...

  10. 使用OwnerDraw改变ListView的ColumnHeader

    当我使用了OwnerDraw改变ListView的ColumnHeader的颜色之后,发现行无法显示内容了.其原因就是OwnerDraw属性设置为True造成了,也就是说,这个属性需要我们重画List ...