4

我在搅拌机中开发了一个 3D 灯模型，并使用three.js.

该模型非常基本，但对我来说重要的是，我希望有人告诉我如何产生光three.js，应该给人一种来自灯内部的错觉，因为你可以找到很多关于如何从远处照亮一个物体，但是从一个物体（特别是模型）的一侧发射光呢？就像这个灯场景一样。

请理解我不是偷懒，只是three.js文档太有限，我无法找到适合我需要的示例或解释。

这是我到目前为止加载模型的代码：

<!DOCTYPE html>
<html>
<head>
<title>example 1: load model</title>
<script type="text/javascript" src="js/three.js"></script>
<script src="js/TrackballControls.js"></script>

<script type="text/javascript">
var controls;
var init = function() {
  var canv = document.getElementsByTagName("canvas")[0];
  var w = canv.clientWidth;
  var h = canv.clientHeight;

  var renderer = new THREE.WebGLRenderer({canvas:canv, antialias: true});
  renderer.setSize( w, h );


  var scene = new THREE.Scene();

  var camera = new THREE.PerspectiveCamera(
      40,     // Field of view
      w / h,  // Aspect ratio
      5,    // Near
      10000   // Far
  );
  camera.position.set( -10, 7, 10 );
  camera.lookAt(scene.position);

  // CONTROLS
 controls = new THREE.TrackballControls( camera );

  light = new THREE.PointLight( 0xFFFFDD );
  light.position.set( -15, 10, 15 );
  scene.add( light );



  var loader = new THREE.JSONLoader(  );
  var onGeometry = function(geom, mats) {
    var mesh = new THREE.Mesh( geom, new THREE.MeshFaceMaterial( mats ) );
    scene.add(mesh);
  };
  loader.load("models/lamp.js", onGeometry);

  var render = function() {

    renderer.render(scene, camera);
    controls.update();
  };

  setInterval(render,10);
};

window.onload = init;
window.onresize = init;
</script>
</head>
<body><canvas style="width:100%;height:95%;border:1px gray solid;"></body>
</html>
4

2 回答 2

8

一盏真正的灯可以做很多事情，所有这些都有助于整体体验。因此，在尝试复制这种错觉时，您可能需要考虑许多方面。和不同的技术.. 当然不是所有的都需要。

  • 照亮周围。这是最明显的，并且非常简单地涉及将灯定位到灯泡所在的位置。这可以是 SpotLight 或 PointLight，具体取决于您想要的灯类型。如果你看看这个真实的例子：http ://www.piggsvinet.com/jalkalamppu.jpg-for-web-normal.jpg ，你甚至可以考虑多个灯。一个点灯用于柔和的普通光，两个聚光灯用于上下指向照明。

  • 灯是塑造光线还是以某种方式阻碍光线？您可以使用上述多个灯光和/或阴影映射来创建更逼真的灯光输出。其他技术是轻 cookie，如下所述：http: //docs.unity3d.com/Documentation/Components/class-Light.html。但是 Three.js 并没有内置对轻量 cookie 的支持，而且我不知道有任何例子可以做到这一点。

  • 您可能希望给实际的灯模型一个发光的外观。一种方法是给灯罩材料一个发光颜色。

  • 可能你想给灯一个光晕效果，或者类似的给周围空气的外观稍微戴上手套（空气中的小颗粒反射一些光）。这可以使用粒子、纹理广告牌或某种神光后处理效果来完成，如下所示：http ://threejs.org/examples/webgl_postprocessing_godrays.html

  • 对于您的灯模型示例，您甚至可以创建一个锥形几何体来表示从灯发出的光的形状。这可以设置为部分透明，使用合适的混合/纹理/发光颜色来创建除实际 3d 光之外的聚光灯锥体的错觉（仅影响它照亮的表面）。

  • 可能考虑镜头光晕，http ://threejs.org/examples/webgl_lensflares.html

如您所见，“来自灯内的错觉”是一个巨大的主题。也许你可以更具体地说明你真正想要完成的事情。

于 2013-06-24T13:07:34.090 回答
2

您将需要使用 SpotLight（甚至可能启用阴影以获得良好的照明效果）。代码基本上是：

var spotlight = new THREE.SpotLight(0xffffff);
spotlight.position.set(x,y,z);
spotlight.lookAt(p,q,r);
scene.add(spotlight);

对于一个活生生的例子，请查看：

http://stemkoski.github.io/Three.js/Shadow.html

并在那里查看源代码。

于 2013-06-24T00:48:58.913 回答