three.js之几何体 |
您所在的位置：网站首页 › 地球平面图怎么画几何体 › three.js之几何体 |
three.js之几何体
|
PlaneGeometry几何体介绍和使用
1.PlaneGeometry几何体介绍2.demo说明3.demo代码
1.PlaneGeometry几何体介绍
PlaneGeometry可以用来创建非常简单的矩形，创建这种几何体非常简单，const geom = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments) 按照如上语句便可以创建一个简单的二维矩形平面，接下来介绍一下它的常用属性 属性必须描述width是该属性指定矩形的宽度height是该属性指定矩形的高度widthSegments否该属性指定矩形的宽度应该分成几段heightSegments否该属性指定矩形的高度应该分成几段 2.demo说明
如上图，该示例支持以下功能 通过width属性调整平面的宽度通过height属性调整平面的高度通过widthSegments属性调整平面宽度分的段数通过heightSegments属性调整平面高度分的段数 3.demo代码 {{item.name}} {{item.value}} import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' import { SceneUtils } from 'three/examples/jsm/utils/SceneUtils.js' export default { data() { return { properties: { width: { name: 'width', value: 10, min: 0, max: 40, step: 1 }, height: { name: 'height', value: 14, min: 0, max: 40, step: 1 }, widthSegments: { name: 'widthSeg', value: 4, min: 0, max: 20, step: 1 }, heightSegments: { name: 'heightSeg', value: 4, min: 0, max: 20, step: 1 } }, plane: null, camera: null, scene: null, renderer: null, controls: null } }, mounted() { this.init() }, methods: { formatTooltip(val) { return val }, // 初始化 init() { this.createScene() // 创建场景 this.createMesh() // 创建网格模型 this.createLight() // 创建光源 this.createCamera() // 创建相机 this.createRender() // 创建渲染器 this.createControls() // 创建控件对象 this.render() // 渲染 }, // 创建场景 createScene() { this.scene = new THREE.Scene() }, // 创建网格模型 createMesh() { //创建平面几何体 const geom = new THREE.PlaneGeometry( this.properties.width.value, this.properties.height.value, Math.round(this.properties.widthSegments.value), Math.round(this.properties.heightSegments.value) ) // 创建材质 const meshMaterial = new THREE.MeshNormalMaterial() meshMaterial.side = THREE.DoubleSide const wireFrameMat = new THREE.MeshBasicMaterial() wireFrameMat.wireframe = true // 平面添加组合材质 this.plane = SceneUtils.createMultiMaterialObject(geom, [ meshMaterial, wireFrameMat ]) // 平面对象添加到场景中 this.scene.add(this.plane) }, // 创建光源 createLight() { // 环境光 const ambientLight = new THREE.AmbientLight(0xffffff, 0.1) // 创建环境光 this.scene.add(ambientLight) // 将环境光添加到场景 const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯 spotLight.position.set(-40, 60, -10) spotLight.castShadow = true this.scene.add(spotLight) }, // 创建相机 createCamera() { const element = document.getElementById('container') const width = element.clientWidth // 窗口宽度 const height = element.clientHeight // 窗口高度 const k = width / height // 窗口宽高比 // PerspectiveCamera( fov, aspect, near, far ) this.camera = new THREE.PerspectiveCamera(35, k, 0.1, 1000) this.camera.position.set(-80, 60, 40) // 设置相机位置 this.camera.lookAt(new THREE.Vector3(10, 0, 0)) // 设置相机方向 this.scene.add(this.camera) }, // 创建渲染器 createRender() { const element = document.getElementById('container') this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }) this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸 this.renderer.shadowMap.enabled = true // 显示阴影 this.renderer.shadowMap.type = THREE.PCFSoftShadowMap this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色 element.appendChild(this.renderer.domElement) }, // 更新属性 updateFun() { const tempRotationY = this.plane.rotation.y /* this.plane.children[0].geometry.parameters.width = this.properties.width.value this.plane.children[0].geometry.parameters.height = this.properties.height.value this.plane.children[0].geometry.parameters.widthSegments = this.properties.widthSegments.value this.plane.children[0].geometry.parameters.heightSegments = this.properties.heightSegments.value */ this.scene.remove(this.plane) this.createMesh() this.plane.rotation.y += tempRotationY + 0.01 }, render() { this.updateFun() this.renderer.render(this.scene, this.camera) requestAnimationFrame(this.render) }, // 创建控件对象 createControls() { this.controls = new OrbitControls(this.camera, this.renderer.domElement) } } } #container { position: absolute; width: 100%; height: 100%; } .controls-box { position: absolute; right: 5px; top: 5px; width: 300px; padding: 10px; background-color: #fff; border: 1px solid #c3c3c3; } .vertice-span { line-height: 38px; padding: 0 2px 0 10px; } |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |