점등을 사용하여 Three.js 장면에서 큐브의 각면을 밝게하려고합니다. 그러나 큐브의 위쪽과 아래쪽면이 어둡게 남아 있기 때문에 장면에 추가하는 6 개의 조명 중 4 개만 실제로 렌더링됩니다. 전면 및 후면 조명을 제거하면 갑자기 상단 및 하단 조명이 작동합니다.Three.js의 최대 점등 수
장면에서 Three.js가 동시에 4 점 표시등 만 지원하거나 잘못된 동작을하는 것이 가능합니까?
three.js가 4 개 이상의 조명을 지원하는지 확인할 수 있습니다. 나는 캔버스 등의 예를 수정하여 간단한 테스트를하고 그것을 작동 :
이<!doctype html>
<html lang="en">
<head>
<title>three.js canvas - point light</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
}
a {
color: #ff0080;
text-decoration: none;
}
a:hover {
color: #0080ff;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
based on <a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - point lights demo.<br />
</div>
<script src="../build/Three.js"></script>
<script src="js/RequestAnimationFrame.js"></script>
<script>
var camera, scene, renderer,
mesh,sphere;
init();
animate();
function init() {
var container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(65, window.innerWidth/window.innerHeight, 1, 1000);
camera.position.z = 100;
scene = new THREE.Scene();
var lc = [0xFF0000,0x00FF00,0x0000FF,0xFFFF00,0x00FFFF,0xFF00FF];
var PI2 = Math.PI * 2;
var program = function (context) {
context.beginPath();
context.arc(0, 0, 1, 0, PI2, true);
context.closePath();
context.fill();
}
var nl = lc.length;
var ai = PI2/nl;
for(var i = 0; i < nl ; i++){
var light = new THREE.PointLight(lc[i], 2, 50);
scene.add(light);
light.position.x = Math.cos(ai*i) * 40;
light.position.y = Math.sin(ai*i) * 40;
var p = new THREE.Particle(new THREE.ParticleCanvasMaterial({ color: lc[i], program: program }));
p.position.copy(light.position);
p.scale.multiplyScalar(0.5);
scene.add(p);
}
sphere = new THREE.SphereGeometry(20, 12, 6, false);
mesh = new THREE.Mesh(sphere, new THREE.MeshLambertMaterial({ color: 0xffffff, shading: THREE.FlatShading }));
mesh.overdraw = true;
scene.add(mesh);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
}
//
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
mesh.rotation.y -= 0.01;
renderer.render(scene, camera);
}
</script>
</body>
</html>
당신이 필요의 대부분은 그러나 초기화에 있습니다 :
이
여기에 참조 할 수 있도록 전체 코드입니다
var lc = [0xFF0000,0x00FF00,0x0000FF,0xFFFF00,0x00FFFF,0xFF00FF];
var PI2 = Math.PI * 2;
var program = function (context) {
context.beginPath();
context.arc(0, 0, 1, 0, PI2, true);
context.closePath();
context.fill();
}
var nl = lc.length;
var ai = PI2/nl;
for(var i = 0; i < nl ; i++){
var light = new THREE.PointLight(lc[i], 2, 50);
scene.add(light);
light.position.x = Math.cos(ai*i) * 40;
light.position.y = Math.sin(ai*i) * 40;
var p = new THREE.Particle(new THREE.ParticleCanvasMaterial({ color: lc[i], program: program }));
p.position.copy(light.position);
p.scale.multiplyScalar(0.5);
scene.add(p);
}
lc 배열에 더 많은 색상을 추가하고 자유롭게 빛을 시험해보십시오.
그것은 당신의 설정이 무엇인지 말해, 그러나 첫번째 여부를 확인하기 어렵다 : 지금까지 닫습니다 최소한의 영향을하거나하지하는 (모델을하지 형성
이것은 캔버스 렌더러에서 작동하지만 webgl 렌더러에서는 작동하지 않습니다. 빛의 수를 늘리려면 다음과 같이 렌더러를 초기화해야합니다. 렌더러 = 새 THREE.WebGLRenderer ({maxLights : 6}), ' 일부 하드웨어에서는 작동하지 않을 수 있습니다. –