three.js - 如何加载具有透明背景的纹理并使其可移动?
问题描述
目标:我希望用户能够使用按钮添加图像/颜色
问题:但是使用 textureLoader() 加载的 png 图像纹理(笑脸)具有黑色背景和穿过图像的线条。:皱眉:
小问题:
(1) 有什么方法可以匹配图像的背景颜色和我加载的 obj/gltf(shirt) 吗?
这是我的代码。
const colorSelection = {
"pink": "#ff2d55",
"purple": "#5856d6",
"blue": "#007aff",
"orange": "#ff9500",
}
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer({ antialias: true });
const loader = new THREE.OBJLoader();
const myCanvas = document.getElementById("container");
const controls = new THREE.OrbitControls(camera, renderer.domElement);
const axisHelper = new THREE.AxisHelper(5);
const hlight = new THREE.AmbientLight (0x404040);
const directionalLight = new THREE.DirectionalLight(0xffffff,0.4);
const geometry = new THREE.SphereGeometry(50,50,50);
const texture = new THREE.TextureLoader().load("assets/smile2.png");
const newMat = new THREE.MeshPhongMaterial({ map: texture });
myCanvas.appendChild( renderer.domElement );
renderer.setSize( 800, 800 );
renderer.setClearColor ("darkgrey", 1);
camera.position.set(200,300,200);
controls.addEventListener("change", animate);
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
// SCENES and LIGHTING
scene.add(axisHelper);
scene.add(hlight);
scene.add(directionalLight);
directionalLight.position.set(0,1155,325);
directionalLight.castShadow = true;
function changeTextureColor(color) {
loader.load("assets/standard-t-shirt/source/tshirt.obj", function(obj) {
obj.scale.set(0.4,0.4,0.4)
obj.position.set(0,-500,0)
obj.traverse((child) => {
if (child instanceof THREE.Mesh) {
child.material.emissive = new THREE.Color(colorSelection[color])
console.log(child.material)
}
})
console.log(obj.children)
obj.children[0].material = newMat
scene.add(obj)
})
}
document.querySelectorAll("button").forEach(colorBtn => colorBtn.addEventListener("click", function () {
console.log(this.id)
const userColor = this.id;
changeTextureColor(userColor);
}))
非常感谢您的阅读!
解决方案
transparent: true
创建材质时需要设置,如下所示:
const newMat = new THREE.MeshPhongMaterial({ map: texture, transparent: true });
推荐阅读
- mysql - 函数 agregate SELECT AVG (uh1, uh2, uh3, uh4, uh5) AS ruh FROM nilai 出了什么问题
- odata - 如何使用异步等待实现 OData Core?
- conan - 什么是 ConanException:执行 conan install 命令时出现错误 32512?
- r - 使用 R Shiny 在不同的选项卡中创建不同的结果
- java - Java android RecyclerView 选择:IllegalStateException
- java - 如何在整个应用程序中更改 Textview 的字体系列?
- scala - 如何修复异常:java.math.BigDecimal 在数据帧上重新应用模式时不是双模式的有效外部类型?
- node.js - 使用 async await 进行多个数据库查询
- javascript - 更改背景
- 元素
- kubernetes - kubernetes localhost:8080 被上下文拒绝