• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

threejs引擎 环境光线和管道流动

武飞扬头像
qianbo_insist
帮助1

threejs 反锯齿,raser,发光
需要对opengl有一定得了解,

环境光线

这一节我们使用光线和环境光线,也就是,场景中得mesh,可以根据环境光得不同而反射和表现不同得光效果,当然,要除了自身得颜色,就像我们屋里得布置,有暖色调,出现淡淡得红色,冷色,淡淡得绿色,白色等等。术语叫hemisphere light,hemisphere本身有半球得意思,也就是说,整个环境-球状会击发一个什么样得环境光色。在threejs里面

  var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);
  hemiLight.position.set(0, 500, 0);
  scene.add(hemiLight);

学新通
环境光颜色不同,反应得整体颜色有差异,但是主体mesh得颜色基本不会有大变动。
学新通

管道流动

管道流动在做流体演示等等比较有用,包括上次得文章中有点击后产生发光,对于交互有一定得辅助作用,比如开启阀门以后,水开始流动。怎么制作流体呢?
学新通
管道流动实际上就是纹理流动,仅此而已
学新通


  var curve = new THREE.CatmullRomCurve3([
    new THREE.Vector3(-80, -40, 0),
    new THREE.Vector3(-70, 40, 0),
    new THREE.Vector3(70, 40, 0),
    new THREE.Vector3(80, -40, 0)
  ]);
  var tubeGeometry = new THREE.TubeGeometry(curve, 100, 0.6, 50, false);
  var textureLoader = new THREE.TextureLoader();
  var texture = textureLoader.load('../../assets/textures/run.jpg');

  texture.wrapS = THREE.RepeatWrapping
  texture.wrapT=THREE.RepeatWrapping
  texture.repeat.x = 20;
  var tubeMaterial = new THREE.MeshPhongMaterial({
    map: texture,
    transparent: true,
  });
  //网格模型对象Mesh
  var mesh111 = new THREE.Mesh(tubeGeometry, tubeMaterial); 
  scene.add(mesh111);

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhgfgjei
系列文章
更多 icon
同类精品
更多 icon
继续加载