Three.js 灯光移动有点莫名其妙 - ByeBye
一段还凤看懂的代码！
分析过程不断更新中。。。
<html>
<head>
<title> Interaction </title>
<style>
canvas { width:100%; height:100%; background-color: black }
body { background-color: white };
</style>
</head>
<body>
<h1 align= "center" style="color:blue"> Interaction </h1>
<div style="width:1000px;">
<div style="float:left;display:inline-block; width:250px; margin-left:10px; padding:20px;">
<h3> Light </h3>
<table border="1">
<tr>
<td> Color </td>
<td> <input type="text" id="light-color" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Type </td>
<td>
<select id="light-type">
<option value="point"> Point Light </option>
<option value="spot"> Spot Light </option>
<option value="ambient"> Ambient Light </option>
<option value="area"> Area Light </option>
<option value="directional"> Directional Light </option>
<select>
</td>
</tr>
<tr>
<td> x position </td>
<td>
<input type="number" value="0" id="light-position-x"> </input>
</td>
</tr>
<tr>
<td> y position </td>
<td>
<input type="number" value="0" id="light-position-y"> </input>
</td>
</tr>
<tr>
<td> z position </td>
<td>
<input type="number" value="20" id="light-position-y"> </input>
</td>
</tr>
</table>
<button onClick="changeLightParameters()" style="width:130px;"> Apply </button>
</div>
<div style="float:left;display:inline-block; width:250px; margin-left:10px; padding:20px;">
<h3> Material </h3>
<table border="1">
<tr>
<td> Diffuse </td>
<td> <input type="text" id="material-diffuse" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Ambient </td>
<td> <input type="text" id="material-ambient" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Emissive </td>
<td> <input type="text" id="material-emissive" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Specular </td>
<td> <input type="text" id="material-specular" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Shininess </td>
<td> <input type="number" id="material-shininess" value="1"> </input> </td>
</tr>
<tr>
<td> Type </td>
<td>
<select id="material-type">
<option value="lambert"> Lambert </option>
<option value="normal"> Normal </option>
<option value="phong"> Phong </option>
</select>
</td>
</tr>
</table>
<button onClick="changeMaterialParameters()" style="width:130px;"> Apply </button>
</div>
<div style="float:left;display:inline-block; width:250px; margin-left:10px; padding:20px;">
<h3> Object </h3>
<table border="1">
<tr>
<td> Type </td>
<td>
<select id="object-type">
<option value= "sphere"> Sphere </option>
<option value= "cube"> Cube </option>
<option value= "cylinder"> Cylinder </option>
</select>
</td>
</tr>
</table>
<button onClick= "changeObjectParameters()" style="width:130px;"> Apply </button>
</div>
</div>
<script src="/Users/ramy/Documents/HTML/mrdoob-three.js-58e4622/build/three.min.js"></script>
<script>
// Funzioni per leggere i parametri:
function getLightParameters() {
var lightParameters={};
lightParameters.color= parseInt(document.getElementById("light-color").value,16);
lightParameters.position= new THREE.Vector3(
document.getElementById("light-position-x").value,
document.getElementById("light-position-y").value,
document.getElementById("light-position-z").value );
if(isNaN(lightParameters.color)) {
return null;
}
lightParameters.type= document.getElementById("light-type").value;
return lightParameters;
}
function getObjectParameters() {
var objectParameters={};
objectParameters.type= document.getElementById("object-type").value;
return objectParameters;
}
function getMaterialParameters() {
var materialParameters={};
materialParameters.diffuse= parseInt(document.getElementById("material-diffuse").value , 16);
materialParameters.ambient= parseInt(document.getElementById("material-ambient").value , 16);
materialParameters.emissive= parseInt(document.getElementById("material-emissive").value , 16);
materialParameters.specular= parseInt(document.getElementById("material-specular").value , 16);
materialParameters.shininess= document.getElementById("material-shininess");
if(isNaN(materialParameters.diffuse) || isNaN(materialParameters.ambient) || isNaN(materialParameters.emissive) || isNaN(materialParameters.specular) ) {
return null;
}
materialParameters.type= document.getElementById("material-type").value;
return materialParameters;
}
// Cambiare la scena:
function changeLightParameters() {
var lightParameters= getLightParameters();
if(lightParameters== null) {
alert("Invalid values");
return;
}
if(light.name!= lightParameters.type) {
scene.remove(light);
if(lightParameters.type== "spot") {
light= new THREE.SpotLight(lightParameters.color);
}
else if(lightParameters.type== "point") {
light= new THREE.PointLight(lightParameters.color);
}
else if(lightParameters.type== "ambient") {
light= new THREE.AmbientLight(lightParameters.color);
}
else if(lightParameters.type== "area") {
light= new THREE.AreaLight(lightParameters.color);
}
else if(lightParameters.type== "directional") {
light= new THREE.DirectionalLight(lightParameters.color);
}
light.position.set(lightParameters.position.x, lightParameters.position.y, lightParameters.position.z);
light.name= lightParameters.name;
scene.add(light);
}
else {
light.position= lightParameters.position;
light.color= new THREE.Color(lightParameters.color);
}
}
function changeObjectParameters() {
var objectParameters= getObjectParameters();
if(objectParameters== null) {
alert("Invalid values");
return;
}
if(object.name != objectParameters.type) {
scene.remove(object);
if(objectParameters.type== "sphere") {
geometry= new THREE.SphereGeometry(2,15,15);
}
else if(objectParameters.type== "cube") {
geometry= new THREE.CubeGeometry(2,2,2);
}
else if(objectParameters.type== "cylinder") {
geometry= new THREE.CylinderGeometry(1,1,2.5);
}
object= new THREE.Mesh(geometry,material);
object.name= objectParameters.type;
scene.add(object);
}
}
function changeMaterialParameters() {
var materialParameters= getMaterialParameters();
if(materialParameters== null) {
alert("Invalid values");
return;
}
if(materialParameters.type!= material.name) {
scene.remove(object);
if(materialParameters.type== "lambert") {
material= new THREE.MeshLambertMaterial({
color:materialParameters.diffuse,
ambient:materialParameters.ambient,
emissive:materialParameters.emissive });
}
else if(materialParameters.type== "normal") {
material= new THREE.MeshNormalMaterial();
}
else if(materialParameters.type== "phong") {
material= new THREE.MeshPhongMaterial({
color:materialParameters.diffuse,
ambient:materialParameters.ambient,
emissive:materialParameters.emissive,
specular:materialParameters.specular,
shininess:materialParameters.shininess });
}
material.name= materialParameters.type;
object= new THREE.Mesh(geometry,material);
scene.add(object);
}
else {
material.color= new THREE.Color(materialParameters.diffuse);
material.ambient= new THREE.Color(materialParameters.ambient);
material.emissive= new THREE.Color(materialParameters.emissive);
material.specular= new THREE.Color(materialParameters.specular);
material.shininess= new THREE.Color(materialParameters.shininess);
material.needsUpdate= true;
}
}
// Creazione scena, camera e renderer:
var scene= new THREE.Scene();
var camera= new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
var renderer= new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z=5;
// Creazione geometria, materiale e oggetto:
var geometry= new THREE.SphereGeometry(1,15,15);
var material= new THREE.MeshLambertMaterial({color:0xffffff, ambient:0xffffff, emissive:0xffffff});
var object= new THREE.Mesh(geometry,material);
material.name= "lambert";
object.name= "sphere";
scene.add(object);
// Creazione luci:
var light= new THREE.PointLight(0xffffff);
light.position.set(0,0,20);
light.name= "point";
scene.add(light);
// Creazione della funzione di rendering:
var render= function() {
requestAnimationFrame(render);
renderer.render(scene,camera);
}
render();
</script>
</body>
</html>