Pam*_*nes 3 model light webgl three.js
我在搅拌机中开发了一个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>
真正的灯具有许多功能,所有这些都有助于提升整体体验.因此,在尝试复制幻觉时,您可能需要考虑许多方面.和不同的技术..当然不是所有的技术都需要.
照亮周围的环境.这是最明显的,并且非常简单地涉及将灯放置在灯泡所在的位置.这可以是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光(仅影响它照亮的表面)之外,还可以产生聚光锥的幻觉.
正如你所看到的,"来自灯内的错觉"是一个巨大的主题.也许你可以更具体地了解你真正想要完成的事情.
