<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 创建点 线 面
原文地址：https://www.cnblogs.com/mrzhu/p/8366489.html