three.js中的燈模型中出來的光

我在攪拌機中開發了3D燈模型，並使用three.js將它加載到網上。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>

來源

2013-06-23 Pamplones

您將要使用聚光燈（甚至啓用漂亮的燈光效果陰影）。該代碼基本上是：

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-24 00:48:58

嘿謝謝你的回答。實際上，我一直在研究你的例子，並且榮幸地親自幫助你。我甚至用英文和西班牙文將您的示例鏈接添加到three.js wikipedia頁面。 – Pamplones

我已經看到你提到的這個例子，但是，上面的代碼有可能讓spotLight從立方體的一個面（從它的內部）出來而不是從上面出現嗎？ – Pamplones

真正的燈有很多東西，所有這些都有助於總體體驗。因此，在嘗試複製幻想時，您可能需要考慮很多方面。和不同的技術..當然不是所有的都需要。

照亮周圍環境。這是最明顯的，而且很簡單，涉及將燈放入燈泡的位置。這可以是SpotLight或PointLight，具體取決於所需燈的類型。如果你看看這個真實的例子：http://www.piggsvinet.com/jalkalamppu.jpg-for-web-normal.jpg，你甚至可以考慮多個燈。一個用於柔光燈的點光源和兩個用於上下指向照明的聚光燈。
燈是否以某種方式塑造光線或阻擋光線？您可以使用上面的多個燈光和/或陰影貼圖來創建更逼真的光線輸出。其他的技術是輕型餅乾，如下所述：http://docs.unity3d.com/Documentation/Components/class-Light.html。然而，Three.js並沒有內置的對輕型cookies的支持，而且我也沒有意識到任何已經完成的示例。
您可能想讓實際的燈模型發光。做到這一點的一種方式是讓燈罩材料具有發射顏色。
可能你想給燈提供一個光環效果或類似的效果，讓周圍的空氣略帶手套（空氣中的小顆粒反射一些光線）。這可以通過使用粒子，紋理廣告牌或某種類型的光線後處理效果來完成，例如：http://threejs.org/examples/webgl_postprocessing_godrays.html
對於您的燈型示例，您甚至可以創建一個錐形幾何圖形來表示形狀從燈裏出來的光。這可以被設置爲部分透明，除了實際的3d光（其隻影響其照亮的表面）之外，具有合適的混合/紋理/發射顏色以創建聚光錐的幻覺。
可能考慮鏡頭耀斑，http://threejs.org/examples/webgl_lensflares.html

正如你所看到的，「從燈內部發出的幻覺」是一個巨大的課題。也許你可以更具體地說明你真正想要完成的事情。

來源

2013-06-24 13:07:34 yaku

哇！我在兩個月前讓自己意識到webgl，threejs和攪拌機，從那時起我一直在研究如何用燈光做這個燈並在網頁上顯示它，但現在我覺得我還有數英里之遙。 – Pamplones

對不起，如果我省略一些3D術語，但我想要做的是不發光的燈。一個燈不允許從側面看到任何光線，只是從將要朝下的孔中看到，這樣燈就會將光線形成錐形，並阻止它從燈頭（錐形）的側面出來。像這樣的檯燈：http://www.bigw.com.au/home-garden/decor-furnishings/lamps/bpnBIGW_0000000112261/mirabella-lindsay-desk-lamp-black – Pamplones

好吧，簡單的方法是隻放置一個正如Lee Stemkoski所建議的那樣，燈泡所在的地方就是三燈。調整它的位置和角度以匹配燈的形狀。在你的例子中，場景中沒有別的東西，所以除非你放置一張桌子或一些可以被SpotLight點亮的東西，否則這個效果會很小。要製作類似這樣的圖片，您根本不需要真正的3D燈光，只需要白色的顏色，可能會發射顏色的燈泡模型，並在燈頭內部使用黃色材料。 – yaku

three.js中的燈模型中出來的光

回答

相關問題