![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3d2e82b6753f2629f2439e1aa8f1ac4b.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/19bbceba20446c8fc26353b36e661b0f.png)
<script>
var scene = new THREE.Scene();
var shape = new THREE.Shape();
shape.moveTo(0,0);
shape.lineTo(0,100);
shape.lineTo(100,100);
shape.lineTo(100,0);
shape.lineTo(0,0);
var geometry = new THREE.ExtrudeGeometry(
shape,
{
amount:180,
bevelEnabled:false
}
);
<!-- geometry.center();
<!-- geometry.scale(30,30,30);
<!-- var material=new THREE.PointsMaterial({ -->
<!-- color:0x0000ff, -->
<!-- size:5.0
<!-- });
<!-- var mesh=new THREE.Points(geometry,material);
<!-- scene.add(mesh);
var material = new THREE.MeshPhongMaterial({
color: 0x0000ff,
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 200;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(50, 100, 200);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xb9d3ff, 1);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);
</script>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/355da44f31b73ff00a83a14547e3067c.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Threejs对象、曲线、三维</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<!--引入three.js三维引擎-->
<script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js"></script>
<!--<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script>-->
<!-- <script src="./three.js"></script> -->
<!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>
<body>
<script>
var scene = new THREE.Scene();
var geometry = new THREE.Geometry();
v<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Threejs对象、曲线、三维</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<!--引入three.js三维引擎-->
<script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js"></script>
<!--<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script>-->
<!-- <script src="./three.js"></script> -->
<!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>
<body>
<script>
var scene = new THREE.Scene();
var shape = new THREE.Shape();
shape.moveTo(0,0);
shape.lineTo(0,10);
shape.lineTo(10,10);
shape.lineTo(10,0);
shape.lineTo(0,0);
var curve = new THREE.SplineCurve3([
new THREE.Vector3( -10, -50, -50 ),
new THREE.Vector3( 10, 0, 0 ),
new THREE.Vector3( 8, 50, 50 ),
new THREE.Vector3( -5, 0, 100)
]);
var geometry = new THREE.ExtrudeGeometry(
shape,
{
bevelEnabled:false,
extrudePath:curve,
steps:50
}
);
<!-- geometry.center();
<!-- geometry.scale(30,30,30);
var material = new THREE.MeshPhongMaterial({
color: 0x0ff0000,
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 200;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(50, 50, 200);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xb1d100, 1);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);
</script>
</body>
</html>
var shape = new THREE.Shape();
var points = [
new THREE.Vector2(150,60),
new THREE.Vector2(25,-10),
new THREE.Vector2(50,-60)
];
shape.splineThru(points);
var splinePoints = shape.getPoints(20);
var geometry = new THREE.LatheGeometry(splinePoints,30);
var material=new THREE.MeshPhongMaterial({
color:0x0000ff,
side:THREE.DoubleSide
});
material.wireframe = true;
var mesh=new THREE.Mesh(geometry,material);
scene.add(mesh);
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 200;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xb9d3ff, 1);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);
</script>
</body>
</html>