Javascript Three.js导入collada模型-更改不同零件上的材料
我对three.js还不熟悉，正在努力解决使用代码更改材料的概念。我有一个汽车模型，我想把车身的颜色改成一种材质，把窗户改成另一种材质，等等。这可能吗？如果是这样的话，有人能用相对简单的术语解释一下如何做到这一点吗？ 我已将当前代码粘贴到下面Javascript Three.js导入collada模型-更改不同零件上的材料,javascript,3d,three.js,collada,Javascript,3d,Three.js,Collada,我对three.js还不熟悉，正在努力解决使用代码更改材料的概念。我有一个汽车模型，我想把车身的颜色改成一种材质，把窗户改成另一种材质，等等。这可能吗？如果是这样的话，有人能用相对简单的术语解释一下如何做到这一点吗？ 我已将当前代码粘贴到下面 <!doctype html> <html lang="en"> <head> <title>Test WebGL</title> <meta charset="utf-8"> &
<!doctype html>
<html lang="en">
<head>
<title>Test WebGL</title>
<meta charset="utf-8">
</head>
<body style="margin: 0;">
<script src="js/three.min.js"></script>
<script src="js/ColladaLoader.js"></script>
<script src="js/OrbitControls.js"></script>
<script type="x-shader/x-vertex" id="vertexShader">
varying vec3 vWorldPosition;
void main() {
vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
vWorldPosition = worldPosition.xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
uniform vec3 topColor;
uniform vec3 bottomColor;
uniform float offset;
uniform float exponent;
varying vec3 vWorldPosition;
void main() {
float h = normalize( vWorldPosition + offset ).y;
gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( h, exponent
), 0.0 ) ), 1.0 );
}
</script>
<script>
var scene, camera, renderer;
init();
animate();
function init() {
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 10000);
camera.position.set(100,100,100);
scene.add(camera);
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
var vertexShader = document.getElementById( 'vertexShader' ).textContent;
var fragmentShader = document.getElementById(
'fragmentShader').textContent;
var uniforms = {
topColor: { type: "c", value: new THREE.Color(0x171717) },
bottomColor: { type: "c", value: new THREE.Color( 0xcbcbcb ) },
offset: { type: "f", value: 100 },
exponent: { type: "f", value: 0.7 }
}
var skyGeo = new THREE.SphereGeometry( 2000, 32, 15 );
var skyMat = new THREE.ShaderMaterial( { vertexShader: vertexShader,
fragmentShader: fragmentShader, uniforms: uniforms, side:
THREE.BackSide } );
var sky = new THREE.Mesh( skyGeo, skyMat );
scene.add( sky );
var light = new THREE.PointLight(0xfffff3, 0.8);
light.position.set(-100,200,100);
scene.add(light);
var sphereSize = 1;
var pointLightHelper = new THREE.PointLightHelper( light, sphereSize );
scene.add( pointLightHelper );
var light2 = new THREE.PointLight(0xd7f0ff, 0.2);
light2.position.set(200,200,100);
scene.add(light2);
var sphereSize = 1;
var pointLightHelper2 = new THREE.PointLightHelper( light2, sphereSize );
scene.add( pointLightHelper2 );
var light3 = new THREE.PointLight(0xFFFFFF, 0.5);
light3.position.set(150,200,-100);
scene.add(light3);
var sphereSize = 1;
var pointLightHelper3 = new THREE.PointLightHelper( light3, sphereSize );
scene.add( pointLightHelper3 );
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( 'models/Mini.dae', function ( collada ) {
//Mustang.dae
var dae = collada.scene;
var skin = collada.skins[ 0 ];
dae.position.set(0,0,0);//x,z,y- if you think in blender dimensions ;)
dae.scale.set(0.7,0.7,0.7);
scene.add(dae);
var axes = new THREE.AxisHelper(50);
axes.position = dae.position;
scene.add(axes);
var gridXZ = new THREE.GridHelper(100, 10);
gridXZ.setColors( new THREE.Color(0x8f8f8f), new THREE.Color(0x8f8f8f) );
gridXZ.position.set(0,0,0 );
scene.add(gridXZ);
});
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
}
</script>
</body>
</html>
测试WebGL
可变vec3位置；
void main（）{
vec4世界位置=模型矩阵*vec4（位置，1.0）；
vWorldPosition=worldPosition.xyz；
gl_位置=projectionMatrix*modelViewMatrix*vec4（位置，1.0）；
}
均匀的vec3顶色；
颜色均匀；
均匀浮动偏移量；
均匀浮动指数；
可变vec3位置；
void main（）{
浮点h=规格化（vWorldPosition+偏移）.y；
gl_FragColor=vec4（混合（底色、顶色、最大功率（h、指数
), 0.0 ) ), 1.0 );
}
var场景、摄影机、渲染器；
init（）；
制作动画（）；
函数init（）{
场景=新的三个。场景（）；
变量宽度=window.innerWidth，
高度=窗内高度；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
设置大小（宽度、高度）；
document.body.appendChild（renderer.doElement）；
摄像机=新的三个透视摄像机（45，宽/高，0.11000）；
摄像机位置设置（100100）；
场景。添加（摄影机）；
addEventListener（'resize'，function（））{
变量宽度=window.innerWidth，
高度=窗内高度；
设置大小（宽度、高度）；
camera.aspect=宽度/高度；
camera.updateProjectMatrix（）；
});
var vertexShader=document.getElementById（'vertexShader'）.textContent；
var fragmentShader=document.getElementById（
“fragmentShader”）.textContent；
变量={
topColor:{type:“c”，值：new THREE.Color（0x171717）}，
bottomColor:{type:“c”，值：new THREE.Color（0xCBCB）}，
偏移量：{type:“f”，值：100}，
指数：{type:“f”，值：0.7}
}
var skyGeo=新三种。球墨法（2000,32,15）；
var skyMat=new THREE.ShaderMaterial（{vertexShader:vertexShader，
碎片着色器：碎片着色器，制服：制服，侧面：
3.背面}）；
var sky=新的三点网格（skyGeo、skyMat）；
场景。添加（天空）；
var灯=新的三点灯（0xfffff3，0.8）；
灯。位置。设置（-100200100）；
场景。添加（灯光）；
var sphereSize=1；
var pointLightHelper=new THREE.pointLightHelper（light，sphereSize）；
添加（pointLightHelper）；
var light2=新的三点光源（0xd7f0ff，0.2）；
light2.位置设置（200100）；
场景。添加（light2）；
var sphereSize=1；
var pointLightHelper2=新的三个.PointLightHelper（light2，sphereSize）；
添加（pointLightHelper2）；
var light3=新的三点光源（0xFFFFFF，0.5）；
灯3.位置设置（150200，-100）；
场景。添加（light3）；
var sphereSize=1；
var pointLightHelper3=新的三个.PointLightHelper（light3，sphereSize）；
添加（pointLightHelper3）；
var loader=new THREE.ColladaLoader（）；
loader.options.convertUpAxis=true；
loader.load（'models/Mini.dae'，函数（collada）{
//野马科
var dae=collada.scene；
var skin=collada.skins[0]；
dae.position.set（0,0,0）；//x，z，y-如果您考虑混合器维度；）
刻度组（0.7,0.7,0.7）；
添加（dae）；
var轴=新的三个.AxisHelper（50）；
axes.position=dae.position；
场景。添加（轴）；
var gridXZ=new THREE.GridHelper（100,10）；
setColors（新三色（0x8F8F）、新三色（0x8F8F））；
gridXZ.position.set（0,0,0）；
scene.add（gridXZ）；
});
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
}
函数animate（）{
请求动画帧（动画）；
渲染器。渲染（场景、摄影机）；
控件更新（）；
}