0
我在threejs中有透明UV貼圖問題。當我設置在攪拌機的質感和我點擊「渲染」一切這是確定
Three.js材質上的「黑色」透明度
，但是當我通過JSONloader下PNG質地，而不是攪拌機的材質顏色加載threejs模型黑色背景負載。
如何在threejs中刪除此黑色背景並使用blender材質顏色？
這裏是我的代碼
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);
});