如何在threejs中为对象添加reflectionMaterial [英] How to add reflectionMaterial for an object in threejs

问题描述

如何为环境贴图添加reflectionMaterial，我使用两个摄像头和两个场景来实现，基于webgl_materials_cubemap

并且我正在使用使用 OBJMTLLoder 加载的对象，我可以在场景中看到环境贴图和对象，但是环境的反射不适用于对象..

在下面找到我的代码:

var urls = ['纹理/立方体/金丝雀/pos-x.png','纹理/立方体/金丝雀/neg-x.png','纹理/立方体/金丝雀/pos-y.png','纹理/立方体/金丝雀/neg-y.png','纹理/立方体/金丝雀/pos-z.png','纹理/立方体/金丝雀/neg-z.png'];var cubemap = THREE.ImageUtils.loadTextureCube(urls);//加载纹理cubemap.format = THREE.RGBFormat;var shader = THREE.ShaderLib['cube'];//从内置库初始化立方体着色器shader.uniforms['tCube'].value = 立方体贴图；//将纹理应用到着色器//创建着色器材质var skyBoxMaterial = new THREE.ShaderMaterial( {片段着色器:shader.fragmentShader，vertexShader:shader.vertexShader，制服:shader.uniforms，深度写入:假，侧面:三.BackSide});skybox = new THREE.Mesh(new THREE.BoxGeometry(1000, 1000, 1000), skyBoxMaterial);场景添加(天空盒)；var object = scene.getObjectByName ("myname", true);object.traverse(函数(子){if (子实例THREE.Mesh){//child.geometry.computeFaceNormals();var geometry = child.geometry;varreflectionMaterial = new THREE.MeshBasicMaterial({颜色:0xcccccc，envMap:立方体贴图});mesh = new THREE.Mesh(geometry,reflectionMaterial);sceneCube.add(mesh);}});

这里只是将 scene.add(mesh); 更改为 sceneCube.add(mesh); 反射有效但相机没有 .. >

你可以在这里看到差异

示例 1示例 2

在第一个演示中，您可以看到场景与环境配合良好，没有对象反射

在第二个中，您可以看到 Reflection 工作正常，但相机行为已连接

解决方案

我自己通过在 Object traverse 中添加以下行来修复它

child.material.map =reflectionMaterial;child.material.needsUpdate = true;

但是我不知道我做的是否正确，但它按预期工作，

How to add reflectionMaterial with environment map, am using two cameras and two scene in order to achieve it, based on the webgl_materials_cubemap

and am using Object that is loaded using OBJMTLLoder, i can see the both Environment map, and Object on my scene, but the reflection of environment is not working on the object..

find my code below :

var urls = [
    'textures/cube/canary/pos-x.png',
    'textures/cube/canary/neg-x.png',
    'textures/cube/canary/pos-y.png',
    'textures/cube/canary/neg-y.png',
    'textures/cube/canary/pos-z.png',
    'textures/cube/canary/neg-z.png'
  ];


var cubemap = THREE.ImageUtils.loadTextureCube(urls); // load textures
cubemap.format = THREE.RGBFormat;

var shader = THREE.ShaderLib['cube']; // init cube shader from built-in lib
shader.uniforms['tCube'].value = cubemap; // apply textures to shader

// create shader material
var skyBoxMaterial = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide
});

skybox = new THREE.Mesh( new THREE.BoxGeometry( 1000, 1000, 1000 ), skyBoxMaterial );
scene.add( skybox );


var object = scene.getObjectByName ("myname", true);

object.traverse( function ( child ) {

if ( child instanceof THREE.Mesh )
{
//child.geometry.computeFaceNormals();
var  geometry = child.geometry;

var reflectionMaterial = new THREE.MeshBasicMaterial({
color: 0xcccccc,
envMap: cubemap
});

mesh = new THREE.Mesh(geometry, reflectionMaterial);
sceneCube.add(mesh);


}
});

Here am just changing the scene.add(mesh); to sceneCube.add(mesh); the reflection worked but the camera doesn't ..

you can see the differences here

Example 1 Example 2

In the first demo you can see that the scene working fine with the environment and without Object reflection

In the second you can see that the Reflection working fine but the camera behavior gets wired

解决方案

i fixed it myself by adding following line inside the Object traverse

child.material.map = reflectionMaterial;
child.material.needsUpdate = true;

However i don't know am doing is correct or not but it is worked as like expected,

这篇关于如何在threejs中为对象添加reflectionMaterial的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！