threejs 参数化曲面

参考: http://www.yanhuangxueyuan.com/Three.js_course/geometry.html

      //创建场景对象
      var scene = new THREE.Scene();
      //  平面
      var plane = function(u, v, target) {
        var width = 50, height = 100;
        var x = u * width;
        var y = v * height;
        var z = 0;
        target.set(x, y, z);
      }
      // 旋转抛物面 z = a2*(x2+y2)
      var paraboloid = function(u,v, target) {
        var k = 100;//x、y取值范围
        var a = 0.2;//旋转抛物面焦点
        var x = (u-0.5) * k;
        var y = (v-0.5) * k;
        var z = Math.pow(a, 2) * (Math.pow(x, 2) + Math.pow(y, 2));
        target.set(x, y, z);
      }
      var planeGeometry = new THREE.ParametricGeometry(plane, 10, 10);
      //var planeGeometry = new THREE.ParametricGeometry(paraboloid, 10, 10);
      var planeMaterial = new THREE.MeshPhongMaterial({
        color:0x0000ff,//三角面颜色
        side:THREE.DoubleSide//两面可见
      });
      // 线条模式渲染
      planeMaterial.wireframe  = true;
      var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
      scene.add(planeMesh);
      
      // 旋转造型
      var points = [
        new THREE.Vector2(50,60),
        new THREE.Vector2(25,0),
        new THREE.Vector2(50,-60)
      ];
      var pointsGeometry = new THREE.LatheGeometry(points, 30);
      var pointsMaterial = new THREE.MeshPhongMaterial({
        color:0x0000ff,//三角面颜色
        side:THREE.DoubleSide//两面可见
      });
      pointsMaterial.wireframe  = true;
      var pointsMesh = new THREE.Mesh(pointsGeometry, pointsMaterial);
      pointsMesh.translateX(300);
      pointsMesh.translateY(150);
      scene.add(pointsMesh);

      var shape = new THREE.Shape();
      var points = [//定位定点
        new THREE.Vector2(50,60),
        new THREE.Vector2(25,0),
        new THREE.Vector2(50,-60)
      ];
      // 顶点带入样条插值计算函数 
      shape.splineThru(points);
      // 插值计算细分数20
      var splinePoints = shape.getPoints(20);
      var splineGeometry = new THREE.LatheGeometry(splinePoints, 30);
      var splineMaterial = new THREE.MeshPhongMaterial({
        color:0x00ffff,//三角面颜色
        side:THREE.DoubleSide//两面可见
      });
      var splineMesh = new THREE.Mesh(splineGeometry, splineMaterial);
      splineMesh.translateX(-300);
      splineMesh.translateY(-200);
      scene.add(splineMesh);



      //环境光
      var ambient=new THREE.AmbientLight(0x444444);
      scene.add(ambient);

      var width = window.innerWidth;
      var height = window.innerHeight;
      //窗口宽高比
      var k = width / height;
      //三维场景缩放系数
      var s = 150;
      //创建相机对象
      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);
      //执行渲染操作
      renderer.render(scene, camera);

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值