0
J'ai un problème avec la carte UV transparente dans troisjs. Quand je tournerai la texture dans un mélangeur et je clique sur « rendre » tout ce qu'il est ok
Trois.js "noir" transparence sur le matériau
mais quand je charge modèle threejs par JSONloader la charge de fond noir sous texture PNG au lieu de la couleur des matériaux du mélangeur. Comment puis-je supprimer ce fond noir en trois fois et utiliser la couleur du matériau du mélangeur?
Voici mon code
var scene, camera, renderer;
var guiControls, controls, stats, axis, lightHelper;
var sceneBackground;
var spotLight;
var cube, ground, toursKnot, text;
var groundMaterial, boxMaterial, torMaterial, textMaterial;
var groundGeometry, boxGeometry, torGeometry, textGeometry;
var SCREEN_WIDTH, SCREEN_HEIGHT;
var loader = new THREE.JSONLoader();
loader.load('models/CupME9.json', addModel);
function addModel(geometry, materials){
var material = new THREE.MeshFaceMaterial(materials);
model = new THREE.Mesh(geometry, material);
model.scale.set(1,1,1);
model.position.set(5,2,0);
model.castShadow = true;
scene.add(model);
}
function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, .1, 500);
renderer = new THREE.WebGLRenderer({antialias:true });
sceneBackground = renderer.setClearColor(0xdddddd);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;
//Controls
controls = new THREE.OrbitControls(camera,renderer.domElement);
controls.addEventListener('change', render);
//add helpers
axis = new THREE.AxisHelper(10);
scene.add(axis);
//grid
color = new THREE.Color("rgb(255,0,0)");
lineColor = new THREE.Color(0x000000);
grid = new THREE.GridHelper(50,20,color,lineColor);
scene.add(grid);
//camera
camera.position.set(15,12,10);
camera.lookAt(scene.position);
guiControls = new function(){
this.rotationX = 0.0;
this.rotationY = 0.0;
this.rotationZ = 0.0;
this.lightX = 10;
this.lightY = 10;
this.lightZ = 15;
this.intensity = 1;
this.distance = 0;
this.angle = 1.570;
this.exponent = 0;
this.shadowCameraNear = 1;
this.shadowCameraFar = 100;
this.shadowCameraFov = 50;
this.shadowCameraVisible = true;
this.shadowMapWidth = 1024;
this.shadowMapHeigh = 1024;
this.shadowBias = 0;
this.shadowDarkness = 0.5;
this.target = 'cube';
}
//lights
var ambient = new THREE.AmbientLight(0x404040);
scene.add(ambient);
spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(10,10,15);
spotLight.castShadow = true;
spotLight.shadow.camera.left = -500;
spotLight.shadow.camera.right = 500;
spotLight.shadow.camera.top = 500;
spotLight.shadow.camera.bottom = -500;
spotLight.intensity = guiControls.intensity;
spotLight.distance = guiControls.distance;
spotLight.shadow.bias = guiControls.shadowBias;
spotLight.shadow.camera.fov = guiControls.shadowCameraFov;
spotLight.shadow.camera.near = guiControls.shadowCameraNear;
spotLight.shadow.camera.far = guiControls.shadowCameraFar;
spotLight.shadow.camera.visible = guiControls.shadowCameraVisible;
spotLight.shadow.mapSize.width = guiControls.shadowMapWidth; // default is 512
spotLight.shadow.mapSize.height = guiControls.shadowMapHeigh;
spotLight.name = 'Spot light';
lightHelper = new THREE.CameraHelper(spotLight.shadow.camera)
scene.add(lightHelper);
scene.add(spotLight);
//Plane
groundGeometry = new THREE.BoxGeometry(40,0,40);
groundMaterial = new THREE.MeshPhongMaterial({
color: 0xa0adaf,
shininess: 150,
specular: 0xffffff,
flatShading : true
});
ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.castShadow = false;
ground.receiveShadow = true;
scene.add(ground);
var datGUI = new dat.GUI();
datGUI.add(guiControls, 'rotationX', 0, 1);
datGUI.add(guiControls, 'rotationY', 0, 1);
datGUI.add(guiControls, 'rotationZ', 0, 1);
datGUI.add(guiControls, 'lightX',-60,180);
datGUI.add(guiControls, 'lightY',0,180);
datGUI.add(guiControls, 'lightZ',-60,180);
datGUI.add(guiControls, 'target', ['cube', 'torusKnot','text']).onChange(function(){
if (guiControls.target == 'cube'){
spotLight.target = cube;
}
else if (guiControls.target == 'torusKnot'){
spotLight.target = toursKnot;
}
else if (guiControls.target == 'text'){
spotLight.target = text;
}
});
datGUI.add(guiControls, 'intensity', 0.01, 5).onChange(function(value){
spotLight.intensity = value;
});
datGUI.add(guiControls, 'distance', 0, 1000).onChange(function(value){
spotLight.distance = value;
});
datGUI.add(guiControls, 'angle', 0.001, 1.570).onChange(function(value){
spotLight.angle = value;
});
datGUI.add(guiControls, 'exponent', 0, 50).onChange(function(value){
spotLight.exponent = value;
});
datGUI.add(guiControls, 'shadowCameraNear', 0 , 100).name("Near").onChange(function(value){
spotLight.shadow.camera.near = value;
spotLight.shadow.camera.updateProjectionMatrix();
lightHelper.update();
});
datGUI.add(guiControls, 'shadowCameraFar', 0 , 100).name("Far").onChange(function(value){
spotLight.shadow.camera.far = value;
spotLight.shadow.camera.updateProjectionMatrix();
lightHelper.update();
});
datGUI.add(guiControls, 'shadowCameraFov', 0 , 100).name("Fov").onChange(function(value){
spotLight.shadow.camera.fov = value;
spotLight.shadow.camera.updateProjectionMatrix();
lightHelper.update();
});
datGUI.add(guiControls, 'shadowCameraVisible').onChange(function(value){
spotLight.shadow.camera.visible = value;
spotLight.shadow.camera.updateProjectionMatrix();
//lightHelper.update();
});
//datGUI.close();
datGUI.add(guiControls, 'shadowBias', 0 , 1).onChange(function(value){
spotLight.shadow.bias = value;
spotLight.shadow.camera.updateProjectionMatrix();
lightHelper.update();
});
/*datGUI.add(guiControls, 'shadowDarkness', 0 , 1).onChange(function(value){
spotLight.shadow.camera.darkness = value;
spotLight.shadow.camera.updateProjectionMatrix();
});*/
$("#webGL-container").append(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
$("#webGL-container").append(stats.domElement);
}
function render(){
spotLight.position.x = guiControls.lightX;
spotLight.position.y = guiControls.lightY;
spotLight.position.z = guiControls.lightZ;
}
function animate(){
requestAnimationFrame(animate);
render();
stats.update();
renderer.render(scene,camera);
}
init();
animate();
$(window).resize(function(){
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
camera.aspect = SCREEN_WIDTH/SCREEN_HEIGHT;
camera.updateProjectionMatrix();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
});