Model 从three.js中的灯模型中发出的光_Model_Three.js_Webgl_Light

Model 从three.js中的灯模型中发出的光

model three.js webgl

Model 从three.js中的灯模型中发出的光,model,three.js,webgl,light,Model,Three.js,Webgl,Light,我在blender中开发了一个3D灯模型，并使用three.js将其加载到web上这个模型非常基本，但对我来说重要的是，我希望有人能告诉我如何在three.js中产生灯光，这应该会让我产生从灯内发出的错觉，因为你可以找到很多关于如何从远处照亮一个物体的例子，但是如何从物体的一侧（特别是一个模型）发射光呢，就像这个灯场景一样请理解，我不是在偷懒，只是three.js文档非常有限，我无法找到适合我需要的示例或解释这是我到目前为止加载模型的代码： <!DOCTYPE html> &l

我在blender中开发了一个3D灯模型，并使用

three.js

将其加载到web上

这个模型非常基本，但对我来说重要的是，我希望有人能告诉我如何在

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>


示例1：负载模型
风险值控制；
var init=函数（）{
var canv=document.getElementsByTagName（“画布”）[0]；
var w=canv.clientWidth；
var h=canv.clientHeight；
var renderer=new THREE.WebGLRenderer（{canvas:canv，antialas:true}）；
渲染器。设置大小（w，h）；
var scene=new THREE.scene（）；
var摄像机=新的三视角摄像机(
40，//视野
宽高比，宽高比
5，//近
10000/远
);
相机。位置。设置（-10,7,10）；
摄像机。注视（场景。位置）；
//控制
控件=新的三个轨迹球控件（摄像头）；
灯光=新的三点灯光（0xFFFFDD）；
灯。位置。设置（-15，10，15）；
场景。添加（灯光）；
var loader=new THREE.JSONLoader（）；
var onGeometry=功能（几何、垫）{
var mesh=新三点网格（geom，新三点网格面材料（垫））；
场景。添加（网格）；
};
loader.load（“models/lamp.js”，onGeometry）；
var render=function（）{
渲染器。渲染（场景、摄影机）；
控件更新（）；
};
设置间隔（渲染，10）；
};
window.onload=init；
window.onresize=init；

您需要使用聚光灯（甚至可能启用阴影以获得良好的照明效果）。守则基本上是：

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

要获取一个实时示例，请查看：

查看那里的源代码。

真正的lamp可以做很多事情，所有这些都有助于提升整体体验。因此，当你试图复制这种幻觉时，你可能需要考虑很多方面。还有不同的技术。。当然，并非所有这些都是需要的

照亮周围的环境。这是最明显的，并且非常简单地涉及到将灯放置在灯泡所在的位置。这可以是聚光灯或点光源，具体取决于所需的灯类型。如果你看看这个现实的例子：你甚至可以考虑多个灯。一个点光源用于柔和的普通光源，两个聚光灯用于上下指向照明
这盏灯是塑造光线还是以某种方式阻挡光线？可以使用如上所述的多个灯光和/或阴影贴图来创建更真实的灯光输出。另一种技术是轻cookies，如下所述：。然而，Three.js没有内置对light Cookie的支持，我也不知道有任何这样做的例子
您可能希望为实际的灯模型提供发光的外观。一种方法是为灯罩材质提供发射颜色
可能您希望给灯一个光晕效果，或类似的效果，使周围的空气稍微有光泽（空气中的小颗粒反射一些光线）。这可以通过使用粒子、纹理公告牌或某种god ray后期处理效果来实现，例如：
对于灯模型示例，您甚至可以创建一个锥形几何体来表示从灯中发出的灯光的形状。这可以设置为部分透明，使用合适的混合/纹理/发射颜色，除了实际的3d灯光（仅影响其照亮的表面）之外，还可以创建聚光灯圆锥体的错觉

P>可能考虑晶状体耀斑，

正如你所看到的，“来自灯内的幻觉”是一个巨大的主题。也许你可以更具体地说明你真正想要实现的目标

嘿，谢谢你的回答。事实上，我一直在研究你们的例子，很荣幸能得到你们的亲自帮助。我甚至在three.js wikipedia的英文和西班牙文页面上添加了你的示例链接。我已经看到了你提到的这个示例，但是，上面的代码是否可能让人产生聚光灯从立方体的一个面（从内部）而不是从上面出来的错觉？哇！我在两个月前就意识到了webgl、threejs和blender，从那以后我一直在学习如何用灯光制作这盏灯并在网页上显示，但现在我觉得我离这还有好几英里远。如果我省略了一些3D术语，请原谅，但我想做的是一个不会发光的灯。一种不允许从侧面看到任何光线的灯，只允许从指向下方的孔看到任何光线，因此该灯将光线塑造成锥形，并阻止光线从灯头（锥形）侧面射出。类似于这盏台灯的东西：简单的方法就是像李·斯特姆科斯基建议的那样，在灯泡所在的位置放置一个三点聚光灯。调整其位置和角度，使其与灯的形状相匹配。在您的示例中，场景中只有灯光，因此这几乎没有效果，除非您放置一张桌子或可以由该聚光灯照亮的东西。要创建这样的图片，您根本不需要实际的3D灯光，只需要一个带有白色（可能是发射色）的灯泡模型，并在灯头内使用黄色材质。