Three.js使用ExtrudeGeometry拉伸模型
Three.js坐标系ExtrudeGeometry拉伸模型沿Y轴拉伸图形Three.js坐标系
坐标系分为左手坐标系和右手坐标系，Three.js采用右手坐标系。
ExtrudeGeometry拉伸模型
Three.js新建Plane后，图形会生成在XY面，然后沿着Z轴拉伸。测试例子向-Z轴拉伸。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>第一个three.js文件_WebGL三维场景</title><style>body {margin: 0;overflow: hidden;/* 隐藏body窗口区域滚动条 */}</style><script src="../three.js-master/build/three.js"></script><script src="../three.js-master/examples/js/controls/OrbitControls.js"></script></head><body><script>/*** 创建场景对象Scene*/var scene = new THREE.Scene();var shape = new THREE.Shape();/**四条直线绘制一个矩形轮廓*/shape.moveTo(0, 0); //起点shape.lineTo(0, 100); //第2点shape.lineTo(100, 100); //第3点shape.lineTo(100, 0); //第4点shape.lineTo(0, 0); //第5点var geometry = new THREE.ExtrudeGeometry( //拉伸造型shape, //二维轮廓//拉伸参数{depth: -20, //拉伸长度bevelEnabled: false, //无倒角});var material = new THREE.MeshBasicMaterial({color: 0x0000ff,});const plane = new THREE.Mesh(geometry, material);scene.add(plane);// 平行光directionalLight = new THREE.DirectionalLight(0xffffff);// 平行光配置directionalLight.position.set(-40, 60, -10);directionalLight.castShadow = true;directionalLight.shadow.camera.near = 20;directionalLight.shadow.camera.far = 200;directionalLight.shadow.camera.left = -50;directionalLight.shadow.camera.right = 50;directionalLight.shadow.camera.top = 50;directionalLight.shadow.camera.bottom = -50;// 距离和强度directionalLight.distance = 0;directionalLight.intensity = 0.5;// 设置阴影的分辨率directionalLight.shadow.mapSize.width = 1024;directionalLight.shadow.mapSize.height = 1024;scene.add(directionalLight);//环境光var ambient = new THREE.AmbientLight(0x444444);scene.add(ambient);// 辅助坐标系 参数250表示坐标系大小，可以根据场景大小去设置var axisHelper = new THREE.AxesHelper(250);scene.add(axisHelper);const cameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera);// scene.add(cameraHelper);/*** 相机设置*/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); //body元素中插入canvas对象renderer.shadowMap.enabled = true;//执行渲染操作 指定场景、相机作为参数// renderer.render(scene, camera);function render() {renderer.render(scene, camera); //执行渲染操作// mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度requestAnimationFrame(render); //请求再次执行渲染函数render}render();var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象</script></body></html>
沿Y轴拉伸图形
如果需要沿着XZ平面，向Y轴拉伸。则使用plane.rotation.x = Math.PI / 2 旋转图形即可。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>第一个three.js文件_WebGL三维场景</title><style>body {margin: 0;overflow: hidden;/* 隐藏body窗口区域滚动条 */}</style><script src="../three.js-master/build/three.js"></script><script src="../three.js-master/examples/js/controls/OrbitControls.js"></script></head><body><script>/*** 创建场景对象Scene*/var scene = new THREE.Scene();var shape = new THREE.Shape();/**四条直线绘制一个矩形轮廓*/shape.moveTo(0, 0); //起点shape.lineTo(0, 100); //第2点shape.lineTo(100, 100); //第3点shape.lineTo(100, 0); //第4点shape.lineTo(0, 0); //第5点var geometry = new THREE.ExtrudeGeometry( //拉伸造型shape, //二维轮廓//拉伸参数{depth: -20, //拉伸长度bevelEnabled: false, //无倒角});var material = new THREE.MeshBasicMaterial({color: 0x0000ff,});const plane = new THREE.Mesh(geometry, material);plane.rotation.x = Math.PI / 2;scene.add(plane);// 平行光directionalLight = new THREE.DirectionalLight(0xffffff);// 平行光配置directionalLight.position.set(-40, 60, -10);directionalLight.castShadow = true;directionalLight.shadow.camera.near = 20;directionalLight.shadow.camera.far = 200;directionalLight.shadow.camera.left = -50;directionalLight.shadow.camera.right = 50;directionalLight.shadow.camera.top = 50;directionalLight.shadow.camera.bottom = -50;// 距离和强度directionalLight.distance = 0;directionalLight.intensity = 0.5;// 设置阴影的分辨率directionalLight.shadow.mapSize.width = 1024;directionalLight.shadow.mapSize.height = 1024;scene.add(directionalLight);//环境光var ambient = new THREE.AmbientLight(0x444444);scene.add(ambient);// 辅助坐标系 参数250表示坐标系大小，可以根据场景大小去设置var axisHelper = new THREE.AxesHelper(250);scene.add(axisHelper);const cameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera);// scene.add(cameraHelper);/*** 相机设置*/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); //body元素中插入canvas对象renderer.shadowMap.enabled = true;//执行渲染操作 指定场景、相机作为参数// renderer.render(scene, camera);function render() {renderer.render(scene, camera); //执行渲染操作// mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度requestAnimationFrame(render); //请求再次执行渲染函数render}render();var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象</script></body></html>
