打开APP
未登录
开通VIP,畅享免费电子书等14项超值服
开通VIP
首页
好书
留言交流
下载APP
联系客服
Three.js 灯光移动有点莫名其妙
pengphie
>《待分类》
2016.12.21
关注
一段还凤看懂的代码
!
分析过程不断更新中。。。
[html]
view plain
copy
print
?
<
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
>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报
。
打开APP,阅读全文并永久保存
查看更多类似文章
猜你喜欢
类似文章
《基于MFC的OpenGL编程》Part 9 Lighting
opengl如何使用着色器做出漂亮的光照?附代码
Phong光照模型的简单说明
What?is?a?Surface?Shader?
Quantum dots light up under strain
通达信好用主图指标公式
更多类似文章 >>
生活服务
热点新闻
留言交流
回顶部
联系我们
分享
收藏
点击这里,查看已保存的文章
导长图
关注
一键复制
下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!
联系客服
微信登录中...
请勿关闭此页面
先别划走!
送你5元优惠券,购买VIP限时立减!
5
元
优惠券
优惠券还有
10:00
过期
马上使用
×