<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Extrude Geometry</title>
<script src="../../three-part/threejs/three.js"></script>
<script src="../../three-part/utils/stats.min.js"></script>
<script src="../../three-part/utils/dat.gui.min.js"></script>
<script src="../controls/TrackballControls.js"></script>
<script src="../util/util.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
init();
function init() {
// show FPS
let stats = initStats();
// resize
window.addEventListener('resize', onResize, false);
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
let renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.getElementById("container").appendChild(renderer.domElement);
// init trackball control
let trackballControls = initTrackballControls(camera, renderer);
let clock = new THREE.Clock();
const option = {
"depth" : 5,
"bevelThickness" : 1,
"bevelSize" : 0.5,
"bevelEnabled" : true,
"bevelSegments" : 3,
"curveSegments" : 12,
"steps" : 1
};
// attributes which can be modified in GUI
const controls = {
"depth" : option.depth,
"bevelThickness" : option.bevelThickness,
"bevelSize" : option.bevelSize,
"bevelEnabled" : option.bevelEnabled,
"bevelSegments" : option.bevelSegments,
"curveSegments" : option.curveSegments,
"steps" : option.steps,
"redraw" : function(){
draw(option);
}
};
// init GUI
initGUI();
let ambientLight = new THREE.AmbientLight("#606008", 1);
scene.add(ambientLight);
// add spotlight
let spotLight = new THREE.SpotLight(0xffffff, 1, 180, Math.PI / 4);
spotLight.shadow.mapSize.set(2048, 2048);
spotLight.position.set(-30, 40, -10);
spotLight.castShadow = true;
scene.add(spotLight);
// add a plane
let planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
let planeMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff
});
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
scene.add(plane);
let mesh;
draw(option);
renderScene();
function initGUI(){
let gui = new dat.GUI();
gui.add(controls, 'depth', 0, 20, 1).onChange(function (e) {
option.depth = e;
});
gui.add(controls, 'bevelThickness', 0, 20, 1).onChange(function (e) {
option.bevelThickness = e;
});
gui.add(controls, 'bevelSize', 0, 10, 1).onChange(function (e) {
option.bevelSize = e;
});
gui.add(controls, 'bevelEnabled', 0, 10, 1).onChange(function (e) {
option.bevelEnabled = e;
});
gui.add(controls, 'bevelSegments', 0, 30, 1).onChange(function (e) {
option.bevelSegments = e;
});
gui.add(controls, 'curveSegments', 0, 30, 1).onChange(function (e) {
option.curveSegments = e;
});
gui.add(controls, 'steps', 0, 10, 1).onChange(function (e) {
option.steps = e;
});
gui.add(controls, 'redraw');
}
function draw(){
if(mesh) scene.remove(mesh);
/**
* ExtrudeGeometry(shapes : Array, options : Object)
* shapes — Shape or an array of shapes.
* options — Object that can contain the following parameters.
* curveSegments — int. Number of points on the curves. Default is 12.
* steps — int. Number of points used for subdividing segments along the depth of the extruded spline. Default is 1.
* depth — float. Depth to extrude the shape. Default is 100.
* bevelEnabled — bool. Apply beveling to the shape. Default is true.
* bevelThickness — float. How deep into the original shape the bevel goes. Default is 6.
* bevelSize — float. Distance from the shape outline that the bevel extends. Default is bevelThickness - 2.
* bevelOffset — float. Distance from the shape outline that the bevel starts. Default is 0.
* bevelSegments — int. Number of bevel layers. Default is 3.
* extrudePath — THREE.Curve. A 3D spline path along which the shape should be extruded.
* UVGenerator — Object. object that provides UV generator functions
* @type {ExtrudeGeometry}
*/
let geometry = new THREE.ExtrudeGeometry(drawShape(), option);
geometry.applyMatrix(new THREE.Matrix4().makeTranslation(-20, 0, 0));
geometry.applyMatrix(new THREE.Matrix4().makeScale(0.4, 0.4, 0.4));
let material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
function drawShape() {
let shape = new THREE.Shape();
shape.moveTo(10, 10);
shape.lineTo(10, 40);
shape.bezierCurveTo(15, 25, 25, 25, 30, 40);
shape.splineThru([
new THREE.Vector2(32, 30),
new THREE.Vector2(28, 20),
new THREE.Vector2(30, 10)
]);
shape.quadraticCurveTo(20, 15, 10, 10);
let hole1 = new THREE.Path();
hole1.absellipse(16, 24, 2, 3, 0, Math.PI * 2, true);
shape.holes.push(hole1);
let hole2 = new THREE.Path();
hole2.absellipse(23, 24, 2, 3, 0, Math.PI * 2, true);
shape.holes.push(hole2);
let hole3 = new THREE.Path();
hole3.absarc(20, 16, 2, 0, Math.PI, true);
shape.holes.push(hole3);
return shape;
}
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function renderScene(){
trackballControls.update(clock.getDelta());
stats.update();
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
}
</script>
</body>
</html>
运行结果：
网友评论