three.js 创建点 线 面
<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>
下一篇:创建几何图形
