Three.js pointLight 似乎不起作用
Three.js pointLight seems not working
我对 WebGL 和 Three.js 都很陌生,所以这可能是一个非常基本的问题,之前总是有人问过。
我用我的代码玩的是制作小太阳系。
我将 SpotLight 与 SpotLightHelper、PointLight 和 PointLightHelper 一起使用。
我使用的几何体是 BoxGeometry 和 SphereGeometry。尽管 BoxGeometry 似乎从 PointLight 获得光,但 SphereGeometry 却没有。
你觉得我做错的问题是什么?
提前感谢您的宝贵时间。
var width, height;
var camera, renderer, scene;
var position = {
earth: {
x: 200,
y: 1,
z: 0,
theta: 0,
traceRadius: 200
}
};
width = window.innerWidth;
height = window.innerHeight;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, // Field of view
400 / 400, // Aspect ratio
.1, // Near
10000 // Far);
);
camera.lookAt(scene.position);
camera.position.set(0, 0, 1000);
scene.add(camera);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1);
renderer.setSize(width, height);
renderer.shadowMapEnabled = false;
var sunGeo = new THREE.SphereGeometry(70, 128, 128);
var sunMat = new THREE.MeshLambertMaterial({color: 0x00ff00});
var sunMesh = new THREE.Mesh(sunGeo, sunMat);
sunMesh.position.set(0, 0, 0);
sunMesh.castShadow = true;
sunMesh.receiveShadow = false;
scene.add(sunMesh);
var boxGeo = new THREE.BoxGeometry(50, 50, 50);
var boxMat = new THREE.MeshLambertMaterial({color: 0xfff0f0});
var boxMesh = new THREE.Mesh(boxGeo, boxMat);
boxMesh.position.set(-100, 100, 0);
boxMesh.castShadow = true;
scene.add(boxMesh);
var earthTraceGeo = new THREE.CircleGeometry(position.earth.traceRadius, 128, 128);
var edges = new THREE.EdgesGeometry(earthTraceGeo);
var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color: 0xffffff}));
scene.add(line);
var earthGeo = new THREE.SphereGeometry(30, 128, 128);
var earthMat = new THREE.MeshLambertMaterial({color: 0x0000ff});
var earthMesh = new THREE.Mesh(earthGeo, earthMat);
earthMesh.position.set(position.earth.traceRadius, 0, 0);
earthMesh.castShadow = true;
earthMesh.receiveShadow = true;
scene.add(earthMesh);
var lightSize = 250;
var pointLight = new THREE.PointLight(0xff0000, 1000, lightSize, 2);
pointLight.position.set(110, 0, 110);
pointLight.castShadow = true;
scene.add(pointLight);
var spotLight = new THREE.SpotLight(0xffffff, 1, 1000);
spotLight.position.set(-200, 120, 200);
spotLight.castShadow = true;
scene.add(spotLight);
var spotLightHelper = new THREE.SpotLightHelper( spotLight, 0xffbbaa);
scene.add( spotLightHelper );
var pointLightHelper = new THREE.PointLightHelper( pointLight, lightSize );
scene.add( pointLightHelper );
var ambientLight = new THREE.AmbientLight(0x404040);
// scene.add(ambientLight);
renderer.render(scene, camera);
render();
document.getElementById("WebGL-output").appendChild(renderer.domElement);
function render() {
// spotLightHelper.update();
position.earth.theta += 1;
position.earth.x = getX(0, position.earth.theta, position.earth.traceRadius);
position.earth.y = getY(0, position.earth.theta, position.earth.traceRadius);
earthMesh.position.set(position.earth.x, position.earth.y, 0);
renderer.render(scene, camera);
requestAnimationFrame(render);
}
function getX(x, theta, radius) {
return x + Math.cos((Math.PI / 180) * theta) * radius;
}
function getY(y, theta, radius) {
return y + Math.sin((Math.PI / 180) * theta) * radius;
}
看不到点光源的光,因为光的颜色是红色0xff0000
而球体几何体的颜色是绿色0x00ff00
.
光源的红光不影响绿色球体。盒子受到影响,因为它的颜色是 0xfff0f0
.
请注意,在灯光模型中,颜色或多或少地成倍增加。如果颜色通道相乘的一侧为0,则结果也为0
要么改变光源的颜色
var pointLight = new THREE.PointLight(0xffff00, 1000, lightSize, 2);
或者球体的颜色
var sunGeo = new THREE.SphereGeometry(70, 128, 128);
var sunMat = new THREE.MeshLambertMaterial({color: 0xffff00});
var sunMesh = new THREE.Mesh(sunGeo, sunMat);
解决问题。
查看示例中的结果:
var width, height;
var camera, renderer, scene;
var position = {
earth: {
x: 200,
y: 1,
z: 0,
theta: 0,
traceRadius: 200
}
};
width = window.innerWidth;
height = window.innerHeight;
scene = new THREE.Scene();
// camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera = new THREE.PerspectiveCamera(45, // Field of view
400 / 400, // Aspect ratio
.1, // Near
10000 // Far);
);
camera.lookAt(scene.position);
camera.position.set(0, 0, 1000);
scene.add(camera);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1);
renderer.setSize(width, height);
renderer.shadowMapEnabled = false;
var sunGeo = new THREE.SphereGeometry(70, 128, 128);
var sunMat = new THREE.MeshLambertMaterial({color: 0x00ff00});
var sunMesh = new THREE.Mesh(sunGeo, sunMat);
sunMesh.position.set(0, 0, 0);
sunMesh.castShadow = true;
sunMesh.receiveShadow = false;
scene.add(sunMesh);
var boxGeo = new THREE.BoxGeometry(50, 50, 50);
var boxMat = new THREE.MeshLambertMaterial({color: 0xfff0f0});
var boxMesh = new THREE.Mesh(boxGeo, boxMat);
boxMesh.position.set(-100, 100, 0);
boxMesh.castShadow = true;
scene.add(boxMesh);
var earthTraceGeo = new THREE.CircleGeometry(position.earth.traceRadius, 128, 128);
var edges = new THREE.EdgesGeometry(earthTraceGeo);
var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color: 0xffffff}));
scene.add(line);
var earthGeo = new THREE.SphereGeometry(30, 128, 128);
var earthMat = new THREE.MeshLambertMaterial({color: 0x0000ff});
var earthMesh = new THREE.Mesh(earthGeo, earthMat);
earthMesh.position.set(position.earth.traceRadius, 0, 0);
earthMesh.castShadow = true;
earthMesh.receiveShadow = true;
scene.add(earthMesh);
var lightSize = 250;
var pointLight = new THREE.PointLight(0xffff00, 1000, lightSize, 2);
pointLight.position.set(110, 0, 110);
pointLight.castShadow = true;
scene.add(pointLight);
var spotLight = new THREE.SpotLight(0xffffff, 1, 1000);
spotLight.position.set(-200, 120, 200);
spotLight.castShadow = true;
scene.add(spotLight);
var spotLightHelper = new THREE.SpotLightHelper( spotLight, 0xffbbaa);
// scene.add( spotLightHelper );
var pointLightHelper = new THREE.PointLightHelper( pointLight, lightSize );
scene.add( pointLightHelper );
var ambientLight = new THREE.AmbientLight(0x404040);
// scene.add(ambientLight);
renderer.render(scene, camera);
window.onresize = resize;
render();
document.getElementById("WebGL-output").appendChild(renderer.domElement);
function render() {
// spotLightHelper.update();
position.earth.theta += 1;
position.earth.x = getX(0, position.earth.theta, position.earth.traceRadius);
position.earth.y = getY(0, position.earth.theta, position.earth.traceRadius);
earthMesh.position.set(position.earth.x, position.earth.y, 0);
renderer.render(scene, camera);
requestAnimationFrame(render);
}
function getX(x, theta, radius) {
return x + Math.cos((Math.PI / 180) * theta) * radius;
}
function getY(y, theta, radius) {
return y + Math.sin((Math.PI / 180) * theta) * radius;
}
function resize() {
var aspect = window.innerWidth / window.innerHeight;
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = aspect;
camera.updateProjectionMatrix();
//controls.handleResize();
}
* { padding:0; margin:0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<div id="WebGL-output"></div>
我对 WebGL 和 Three.js 都很陌生,所以这可能是一个非常基本的问题,之前总是有人问过。
我用我的代码玩的是制作小太阳系。
我将 SpotLight 与 SpotLightHelper、PointLight 和 PointLightHelper 一起使用。 我使用的几何体是 BoxGeometry 和 SphereGeometry。尽管 BoxGeometry 似乎从 PointLight 获得光,但 SphereGeometry 却没有。
你觉得我做错的问题是什么? 提前感谢您的宝贵时间。
var width, height;
var camera, renderer, scene;
var position = {
earth: {
x: 200,
y: 1,
z: 0,
theta: 0,
traceRadius: 200
}
};
width = window.innerWidth;
height = window.innerHeight;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, // Field of view
400 / 400, // Aspect ratio
.1, // Near
10000 // Far);
);
camera.lookAt(scene.position);
camera.position.set(0, 0, 1000);
scene.add(camera);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1);
renderer.setSize(width, height);
renderer.shadowMapEnabled = false;
var sunGeo = new THREE.SphereGeometry(70, 128, 128);
var sunMat = new THREE.MeshLambertMaterial({color: 0x00ff00});
var sunMesh = new THREE.Mesh(sunGeo, sunMat);
sunMesh.position.set(0, 0, 0);
sunMesh.castShadow = true;
sunMesh.receiveShadow = false;
scene.add(sunMesh);
var boxGeo = new THREE.BoxGeometry(50, 50, 50);
var boxMat = new THREE.MeshLambertMaterial({color: 0xfff0f0});
var boxMesh = new THREE.Mesh(boxGeo, boxMat);
boxMesh.position.set(-100, 100, 0);
boxMesh.castShadow = true;
scene.add(boxMesh);
var earthTraceGeo = new THREE.CircleGeometry(position.earth.traceRadius, 128, 128);
var edges = new THREE.EdgesGeometry(earthTraceGeo);
var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color: 0xffffff}));
scene.add(line);
var earthGeo = new THREE.SphereGeometry(30, 128, 128);
var earthMat = new THREE.MeshLambertMaterial({color: 0x0000ff});
var earthMesh = new THREE.Mesh(earthGeo, earthMat);
earthMesh.position.set(position.earth.traceRadius, 0, 0);
earthMesh.castShadow = true;
earthMesh.receiveShadow = true;
scene.add(earthMesh);
var lightSize = 250;
var pointLight = new THREE.PointLight(0xff0000, 1000, lightSize, 2);
pointLight.position.set(110, 0, 110);
pointLight.castShadow = true;
scene.add(pointLight);
var spotLight = new THREE.SpotLight(0xffffff, 1, 1000);
spotLight.position.set(-200, 120, 200);
spotLight.castShadow = true;
scene.add(spotLight);
var spotLightHelper = new THREE.SpotLightHelper( spotLight, 0xffbbaa);
scene.add( spotLightHelper );
var pointLightHelper = new THREE.PointLightHelper( pointLight, lightSize );
scene.add( pointLightHelper );
var ambientLight = new THREE.AmbientLight(0x404040);
// scene.add(ambientLight);
renderer.render(scene, camera);
render();
document.getElementById("WebGL-output").appendChild(renderer.domElement);
function render() {
// spotLightHelper.update();
position.earth.theta += 1;
position.earth.x = getX(0, position.earth.theta, position.earth.traceRadius);
position.earth.y = getY(0, position.earth.theta, position.earth.traceRadius);
earthMesh.position.set(position.earth.x, position.earth.y, 0);
renderer.render(scene, camera);
requestAnimationFrame(render);
}
function getX(x, theta, radius) {
return x + Math.cos((Math.PI / 180) * theta) * radius;
}
function getY(y, theta, radius) {
return y + Math.sin((Math.PI / 180) * theta) * radius;
}
看不到点光源的光,因为光的颜色是红色0xff0000
而球体几何体的颜色是绿色0x00ff00
.
光源的红光不影响绿色球体。盒子受到影响,因为它的颜色是 0xfff0f0
.
请注意,在灯光模型中,颜色或多或少地成倍增加。如果颜色通道相乘的一侧为0,则结果也为0
要么改变光源的颜色
var pointLight = new THREE.PointLight(0xffff00, 1000, lightSize, 2);
或者球体的颜色
var sunGeo = new THREE.SphereGeometry(70, 128, 128);
var sunMat = new THREE.MeshLambertMaterial({color: 0xffff00});
var sunMesh = new THREE.Mesh(sunGeo, sunMat);
解决问题。
查看示例中的结果:
var width, height;
var camera, renderer, scene;
var position = {
earth: {
x: 200,
y: 1,
z: 0,
theta: 0,
traceRadius: 200
}
};
width = window.innerWidth;
height = window.innerHeight;
scene = new THREE.Scene();
// camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera = new THREE.PerspectiveCamera(45, // Field of view
400 / 400, // Aspect ratio
.1, // Near
10000 // Far);
);
camera.lookAt(scene.position);
camera.position.set(0, 0, 1000);
scene.add(camera);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1);
renderer.setSize(width, height);
renderer.shadowMapEnabled = false;
var sunGeo = new THREE.SphereGeometry(70, 128, 128);
var sunMat = new THREE.MeshLambertMaterial({color: 0x00ff00});
var sunMesh = new THREE.Mesh(sunGeo, sunMat);
sunMesh.position.set(0, 0, 0);
sunMesh.castShadow = true;
sunMesh.receiveShadow = false;
scene.add(sunMesh);
var boxGeo = new THREE.BoxGeometry(50, 50, 50);
var boxMat = new THREE.MeshLambertMaterial({color: 0xfff0f0});
var boxMesh = new THREE.Mesh(boxGeo, boxMat);
boxMesh.position.set(-100, 100, 0);
boxMesh.castShadow = true;
scene.add(boxMesh);
var earthTraceGeo = new THREE.CircleGeometry(position.earth.traceRadius, 128, 128);
var edges = new THREE.EdgesGeometry(earthTraceGeo);
var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color: 0xffffff}));
scene.add(line);
var earthGeo = new THREE.SphereGeometry(30, 128, 128);
var earthMat = new THREE.MeshLambertMaterial({color: 0x0000ff});
var earthMesh = new THREE.Mesh(earthGeo, earthMat);
earthMesh.position.set(position.earth.traceRadius, 0, 0);
earthMesh.castShadow = true;
earthMesh.receiveShadow = true;
scene.add(earthMesh);
var lightSize = 250;
var pointLight = new THREE.PointLight(0xffff00, 1000, lightSize, 2);
pointLight.position.set(110, 0, 110);
pointLight.castShadow = true;
scene.add(pointLight);
var spotLight = new THREE.SpotLight(0xffffff, 1, 1000);
spotLight.position.set(-200, 120, 200);
spotLight.castShadow = true;
scene.add(spotLight);
var spotLightHelper = new THREE.SpotLightHelper( spotLight, 0xffbbaa);
// scene.add( spotLightHelper );
var pointLightHelper = new THREE.PointLightHelper( pointLight, lightSize );
scene.add( pointLightHelper );
var ambientLight = new THREE.AmbientLight(0x404040);
// scene.add(ambientLight);
renderer.render(scene, camera);
window.onresize = resize;
render();
document.getElementById("WebGL-output").appendChild(renderer.domElement);
function render() {
// spotLightHelper.update();
position.earth.theta += 1;
position.earth.x = getX(0, position.earth.theta, position.earth.traceRadius);
position.earth.y = getY(0, position.earth.theta, position.earth.traceRadius);
earthMesh.position.set(position.earth.x, position.earth.y, 0);
renderer.render(scene, camera);
requestAnimationFrame(render);
}
function getX(x, theta, radius) {
return x + Math.cos((Math.PI / 180) * theta) * radius;
}
function getY(y, theta, radius) {
return y + Math.sin((Math.PI / 180) * theta) * radius;
}
function resize() {
var aspect = window.innerWidth / window.innerHeight;
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = aspect;
camera.updateProjectionMatrix();
//controls.handleResize();
}
* { padding:0; margin:0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<div id="WebGL-output"></div>