Question

我对WebGL和Three.js也很陌生，所以这可能是一个非常基本的问题，并且总是有人问过。

我在玩代码的时候正在制造小型太阳系。

我将SpotLight与SpotLightHelper以及PointLight和PointLightHelper一起使用。我使用的几何是BoxGeometry和SphereGeometry。尽管BoxGeometry似乎从PointLight发出光，但SphereGeometry却没有。

您认为我做错了什么问题？谢谢您的宝贵时间。

const timesTenIfOverFive = [23, 9, 11, 2, 10, 6];


for(var i = 0; i < timesTenIfOverFive.length; i++){
if (timesTenIfOverFive[i] >= 5) {
console.log(timesTenIfOverFive[i]*10); 
} else console.log(timesTenIfOverFive[i]);
} 

// console.log(timesTenIfOverFive); // -> should print [230, 90, 110, 2, 100, 60]

以下是链接：https://jsfiddle.net/ne7gjdnq/623/

Answer 1

无法看到点光源的光，因为光的颜色为红色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>

Three.js pointLight似乎不起作用

1 个答案: