three.js自定义几何体

three.js提供了很多创建几何体对象的方法，如BoxGeometry，SphereGeometry等，当然也可以自己创建几何体如下面这段代码

var gemo=new THREE.Geometry()
//定义几何体的顶点
var vertices=[new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,6),new THREE.Vector3(7,0,0),new THREE.Vector3(0,8,0)]
//定义顶点的连接顺序，顺时针为向光，逆时针为背光
var face=[new THREE.Face3(0,1,2),new THREE.Face3(0,2,3),new THREE.Face3(0,1,3),new THREE.Face3(1,2,3)]
gemo.vertices=vertices;
gemo.faces=face;
gemo.computeFaceNormals()
var Mesh=[new THREE.MeshLambertMaterial({color:0x44ff44,opacity:0.6,transparent:true}),new THREE.MeshBasicMaterial({color:0x000000,wireframe:true})]
//定义两种材质混和var mesh=new THREE.SceneUtils.createMultiMaterialObject(gemo,Mesh)
mesh.children.forEach((item)=>{item.receiveShadow=true;})

这样就创建了一个四面体，其中THREE.SceneUtils.createMultiMaterialObject(gemo,Mesh)是创建多种材质的网格对象，接下来我们还可以用dat.GUI控制它的各个顶点

 var gui= new dat.GUI()function contorls(x,y,z){var con=new function(){this.x=xthis.y=ythis.z=z}return con;}var con=[]con.push(contorls(0,0,0))con.push(contorls(0,0,6))con.push(contorls(7,0,0))con.push(contorls(0,8,0))for(var i=0;i<4;i++){var flod=gui.addFolder('vertices'+i);flod.add(con[i],'x',-10,10)flod.add(con[i],'y',-10,10)flod.add(con[i],'z',-10,10)}function render(){var vertices=[]for(var i=0;i<4;i++){vertices.push(new THREE.Vector3(con[i].x,con[i].y,con[i].z))}mesh.children.forEach((item)=>{item.geometry.vertices=vertices//更新顶点item.geometry.verticesNeedUpdate=true;//设置顶点需要更新item.geometry.computeFaceNormals()})renderer.render(scene,camera)requestAnimationFrame(render)}render()

最后我们还可以克隆出另一个几何体，完整代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>test</title><style>body{margin:auto;overflow:hidden;}</style>
</head>
<script src="../learning-threejs/libs/three.js"></script>
<script src="../learning-threejs/libs/stats.js"></script>
<script src="../learning-threejs/libs/dat.gui.js"></script>
<script src="../learning-threejs/libs/ConvexGeometry.js"></script>
<script src="../learning-threejs/libs/ParametricGeometries.js"></script><body><div id="Webgl-output"></div><div id='stats'></div><script>function init(){var stats=new Stats()var scene=new THREE.Scene();var renderer=new THREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight)renderer.setClearColor(new THREE.Color(0xffffff))var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);var planeGeometry=new THREE.PlaneGeometry(50,50)var planeMesh=new THREE.MeshLambertMaterial({color:0xffffff})var plane=new THREE.Mesh(planeGeometry,planeMesh);plane.rotation.x=-0.5*Math.PIplane.position.set(-10,0,-10);plane.receiveShadow=true;renderer.ShadowMapEnabled=true;scene.add(plane)camera.position.set(15,30,35)var spotLight=new THREE.SpotLight({color:0xffffff});spotLight.position.set(-20,30,35)scene.add(spotLight)var gemo=new THREE.Geometry()var Mesh=[new THREE.MeshLambertMaterial({color:0x44ff44,opacity:0.6,transparent:true}),new THREE.MeshBasicMaterial({color:0x000000,wireframe:true})]var mesh=new THREE.SceneUtils.createMultiMaterialObject(gemo,Mesh)mesh.children.forEach((item)=>{item.receiveShadow=true;})var gui= new dat.GUI()function contorls(x,y,z){var con=new function(){this.x=xthis.y=ythis.z=z}return con;}var con=[]con.push(contorls(0,0,0))con.push(contorls(0,0,6))con.push(contorls(7,0,0))con.push(contorls(0,8,0))for(var i=0;i<4;i++){var flod=gui.addFolder('vertices'+i);flod.add(con[i],'x',-10,10)flod.add(con[i],'y',-10,10)flod.add(con[i],'z',-10,10)}var vertices=[new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,6),new THREE.Vector3(7,0,0),new THREE.Vector3(0,8,0)]var face=[new THREE.Face3(0,1,2),new THREE.Face3(0,2,3),new THREE.Face3(0,1,3),new THREE.Face3(1,2,3)]gemo.vertices=vertices;gemo.faces=face;gemo.computeFaceNormals()function render(){var vertices=[]for(var i=0;i<4;i++){vertices.push(new THREE.Vector3(con[i].x,con[i].y,con[i].z))}mesh.children.forEach((item)=>{item.geometry.vertices=verticesitem.geometry.verticesNeedUpdate=true;item.geometry.computeFaceNormals()})renderer.render(scene,camera)requestAnimationFrame(render)}render()gui.add(new function(){this.clone=function(){ var gemo=mesh.children[0].geometry.clone()var materials = [new THREE.MeshLambertMaterial({opacity: 0.6, color: 0xff44ff, transparent: true}),new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})];var clone=new THREE.SceneUtils.createMultiMaterialObject(gemo,materials)clone.children.forEach(item=>{item.receiveShadow=true})clone.name='clone'scene.remove(scene.getObjectByName('clone'))//移除原先克隆的clone.translateX(5)clone.translateZ(9)scene.add(clone)}},'clone')scene.add(mesh)var ambientLight=new THREE.AmbientLight(0x0c0c0c)scene.add(ambientLight)scene.add(camera)camera.lookAt(scene.position)renderer.render(scene,camera)document.getElementById('Webgl-output').appendChild(renderer.domElement)window.resize=function(){camera.ascept=window.innerWidth/window.innerHeight;renderer.setSize(window.innerWidth,window.innerHeight);camera.updateProjectionMatrix()renderer.render(scene,camera)}}window.onload=init()</script>
</body>
</html>

其中mesh.children[0].geometry.clone是创建一个坐标，平面跟原来一样的几何体

three.js自定义几何体相关推荐

threejs 三面体_Three.js 自定义了一个几何体
几何体本质: 立方体几何体BoxGeometry本质上就是一系列的顶点构成,只是Threejs的APIBoxGeometry把顶点的生成细节封装了,用户可以直接使用. 比如一个立方体网格模型,有6个面 ...
原生html js css绘制折现图,HTML5教程 Chart.js自定义提示折线图
本篇教程探讨了HTML5教程 Chart.js自定义提示折线图,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < var randomScalingFactor ...
js自定义函数及参数问题
js自定义函数的过程中,往往我们希望指定一些参数的默认值很容易的会写出如下的js 方法 function test(a,b,c=1,d='id'){ return 1; } 但是定义完之后,浏览器会 ...
html 自定义js,js 自定义事件
js怎么自定义事件,并能让用on事件监听你这个问题全部内容应该是如下吧: 在视频播放的时候,能够用on监听事件的触发,如下: player.on('pause',function(){ consol ...
Ajax异步请求（重渲染DOM元素时，如何自动调用并执行JS自定义函数【含代码】）- 案例篇
文章目录 Ajax异步请求(重渲染DOM元素时,如何自动调用并执行JS自定义函数[含代码])- 案例篇效果截图: 重要代码: 附:全部HTML代码: Ajax异步请求(重渲染DOM元素时,如何自动调 ...
three.js使用OrbitControls.js控制几何体旋转、平移、缩放
附带一个可用的OrbitControls.js http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js ...
Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
Vue+bpmn.js自定义流程图之palette（二）
自定义bpmn.js左侧工具栏palette样式一.回顾 1.预览 2.目录结构二.代码 1.paletteProvider.js文件 2.css文件 3.index.js文件三.总结一.回顾 ...
js：Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...

three.js自定义几何体

three.js自定义几何体相关推荐

最新文章

热门文章