threejs 几何体变换

参考: http://www.yanhuangxueyuan.com/Three.js_course/transformation.html#1

 

      //创建场景对象
      var scene = new THREE.Scene();
      // var cube = new THREE.BoxGeometry(100, 100, 100);
      // var material = new THREE.MeshLambertMaterial({color: "#00ff00"});
      // var mesh = new THREE.Mesh(cube, material);
      // x轴方向放大2倍
      // mesh.scale.x = 2.0;

      // 缩小为原来0.5倍
      // mesh.scale.set(0.5, 0.5, 0.5);

      // 沿着x轴正方向平移距离100
      // mesh.translateX(100);

      // 向量
      // var axis = new THREE.Vector3(0, 1, 0);
      // 沿着axis轴表示方向平移100
      // mesh.translateOnAxis(axis, 100);

      // 绕x轴旋转π/4
      // mesh.rotateX(Math.PI / 4);

      // 向量
      // var axis = new THREE.Vector3(0,1,0);
      // mesh.rotateOnAxis(axis, Math.PI / 4);

      // 设置网格模型几何中心y坐标
      // mesh.position.y = 80;

      // 设置网格模型几何中心三维坐标
      // mesh.position.set(80, 5, 10);
      // scene.add(mesh);
      
      // 一个几何体-多个网格模型
      var moreMeshGeometry = new THREE.BoxGeometry(50, 50, 50);
      var moreMeshMaterial = new THREE.MeshLambertMaterial({color: "#00ff00"});
      var mesh1 = new THREE.Mesh(moreMeshGeometry, moreMeshMaterial);
      var mesh2 = new THREE.Mesh(moreMeshGeometry, moreMeshMaterial);
      mesh1.translateX(-50);
      mesh2.translateX(50);
      mesh2.scale.y = 2.0;
      scene.add(mesh1);
      scene.add(mesh2);

      //点光源
      var point = new THREE.PointLight(0xffffff);
      //点光源位置
      point.position.set(400, 200, 300);
      //点光源添加到场景中
      scene.add(point);

      //环境光
      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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值