江西h5响应式网站建设设计,找题做的网站,宁波高新区建设局网站,网站建设合同服务事项上一章节实现了胶囊体的绘制#xff0c;这节来绘制圆锥体#xff0c;圆锥体就是三角形旋转获得的#xff0c;如上文一样#xff0c;先要创建出基础的组件#xff0c;包括场景#xff0c;相机#xff0c;灯光#xff0c;渲染器。代码如下#xff1a; initScene() {this… 上一章节实现了胶囊体的绘制这节来绘制圆锥体圆锥体就是三角形旋转获得的如上文一样先要创建出基础的组件包括场景相机灯光渲染器。代码如下 initScene() {this.scene new THREE.Scene();//创建一个Scene场景},initLight(){const light new THREE.DirectionalLight(0xffffff, 1);//创建一个灯光this.scene.add(light)},initCamera(){//创建一个透视相机视角为45度宽高比为window窗口的宽高比0.1为近面10000为远面this.camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);this.camera.position.set(50,50,50);//设置相机位置this.camera.lookAt(0,0,0);//设置相机位置},initRenderer(){//初始化渲染器this.renderer new THREE.WebGLRenderer({ antialias: true });this.container document.getElementById(container);//获取容器this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);//设置渲染器的大小this.container.appendChild(this.renderer.domElement);//将渲染器添加到容器中this.renderer.setClearColor(#FFFFFF, 1.0);//设置背景颜色},initOrbitControls(){ //创建鼠标控制工具this.orbitControls new OrbitControls(this.camera, this.renderer.domElement);//创建控制器},initAnimate() { //循环渲染requestAnimationFrame(this.initAnimate);this.renderer.render(this.scene, this.camera);},
ConeGeometry圆锥几何体用于创建圆锥形状的三维几何体。
ConeGeometry(radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength) radius圆锥底面半径决定圆锥底部的大小。默认值为 1。height圆锥的高度从底面到顶点的距离。默认值为 1。radialSegments圆锥侧面圆周方向的分段数决定圆锥侧面的平滑程度。默认值为 8。heightSegments圆锥高度方向的分段数影响圆锥在高度上的平滑度。默认值为 1。openEnded一个布尔值决定圆锥的底面是否开放。如果为true则圆锥底面没有面只有侧面如果为false则圆锥是封闭的既有侧面也有底面。默认值为false。thetaStart圆锥侧面起始角度以弧度表示。默认值为 0。thetaLength圆锥侧面的角度范围以弧度表示。默认值为 2π即完整的圆周。、
代码如下 //创建圆锥体
initConeGeometry(){ const geometry new THREE.ConeGeometry(1, 2, 32);const material new THREE.MeshBasicMaterial( {color: #CCCCCC} ); //创建材质颜色为白色#CCCCCCconst cone new THREE.Mesh( geometry, material ); //通过geometry和材质创建网格模型this.scene.add( cone ); //将网格模型添加到场景中},
效果如下 但是因为颜色会纯色看不出立体效果我们将材质修改为只显示框架只需要将材质修改为 const material new THREE.MeshBasicMaterial( {color: #CCCCCC,wireframe:true} ); //创建材质颜色为白色#CCCCCC
