我想加载一个.obj文件,并在运行时通过按钮点击使用three.js改变它的纹理/材料
i want to load a .obj file and change its texture/material at run-time by button click using three.js
每次我想加载加载我的模型并改变它的纹理时,模型没有加载,屏幕上什么也没有。我是三个。js/webgl语言和javascript的新手。请帮助我进行正确的信息。下面是代码。https://drive.google.com/open?id=0BxJJ7XpRqKz4S3JONlAwSHJxdFk这个链接提供了我在这个项目中使用的资源。
// once everything is loaded, we run our Three.js stuff.
function init() {
var stats = initStats();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColor(new THREE.Color(0xaaaaff, 1.0));
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true;
// position and point the camera to the center of the scene
camera.position.x = 100;
camera.position.y = 40;
camera.position.z = 50;
camera.lookAt(scene.position);
scene.add(camera);
// add spotlight for the shadows
var spotLight = new THREE.DirectionalLight(0xfa93e5);
spotLight.position.set(30, 40, 50);
spotLight.intensity = 0.5;
scene.add(spotLight);
// add the output of the renderer to the html element
document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
// call the render function
var step = 0;
// setup the control gui
var controls = new function () {
// we need the first child, since it's a multimaterial
};
var gui = new dat.GUI();
//model
var loader = new THREE.OBJLoader();
loader.load( 'sofa 1.obj', function (object) );
var sofa = new THREE.Mesh(object,fabric_1);
var texture = new THREE.ImageUtils.loadTexture("defaultMat_Base_Color(1).png");
var texture2 = new THREE.ImageUtils.loadTexture("defaultMat_Base_Color_1.png");
var material = THREE.ImageUtils.loadTexture("defaultMat_Normal_DirectX bump.png");
var material1 = THREE.ImageUtils.loadTexture("sofa new final4 high-AO_u0_v0.png");
var material2 = THREE.ImageUtils.loadTexture("lambert2SG_Roughness specular.png");
var fabric_1 = new THREE.MeshPhongMaterial(
{ fabric_1.map = texture;
fabric_1.normalMap = material;
fabric_1.aoMap = material1;
fabric_1.specularMap = material2; });
var fabric_2 = new THREE.MeshPhongMaterial(
{ fabric_2.map = texture_2;
fabric_2.normalMap = material;
fabric_2.aoMap = material1;
fabric_2.specularMap = material2;
});
scene.add(sofa),
function setfabric_1 () {
sofa.traverse(function(child){
if(child instanceof THREE.Mesh){
child.material = fabric_1;
}
sofa.geometry.uvsNeedUpdate = true;
sofa.needsupdate = true;
});
}
function setfabric_2 () {
sofa.traverse(function(child){
if(child instanceof THREE.Mesh){
child.material = fabric_2;
}
sofa.geometry.uvsNeedUpdate = true;
sofa.needsupdate = true;
});
}
render();
function render() {
stats.update();
if (mesh) {
mesh.rotation.y += 0.006;
;
}
// render using requestAnimationFrame
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
}
window.onload = init;
使用制服将局部变量链接到着色器,但要确保先预加载纹理。threejs.org/uniforms。最好还是用
"uTexArray" : { type: "tv", value: [ new THREE.Texture(), new THREE.Texture() ] } // texture array (regular)
输入链接描述
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 多个单选按钮组相互干扰
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- Javascript按钮下拉列表
- jquery试图按名称获取按钮位置
- 漂亮照片图片库中的Facebook赞按钮
- 扩展移相器按钮类不工作
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- 单击按钮以等待单击按钮
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 如何从querySelectorAll中获取按钮类型
- 如何在输入字段中的按钮的帮助下打开日历,该字段的类型为“=”;日期”;
- 按下按钮时保存cookie
- 是否可以禁用jquery中的单个单选按钮
- ASP.NET通过单击JavaScript按钮触发c#事件
- 当我点击jsf中的primefaces命令按钮时,如何获得点击事件
- 如果单选按钮被选中,则显示THREE.Group()
- 我想加载一个.obj文件,并在运行时通过按钮点击使用three.js改变它的纹理/材料