0
私は最近、私が作成しているウェブサイトの3Dモデルの作成を開始しました。何らかの理由で、キャラクターの武器の1つが透明ですが、部分的にはあなたの内部を見ることができます。ここに見られるように： Transparent armと私はそれを把握することはできません。私は、コードの一部を無駄に追跡してみました。そして、私はblenderでレンダリングしようとしました（.objのインポートであるため）、それと同じ問題が残っています。誰かが問題の修正を知っていますか？Three.js odd transparency artifact
<body>
<script src="./JS/three.js"></script>
<script src="./JS/DDSLoader.js"></script>
<script src="./JS/MTLLoader.js"></script>
<script src="./JS/OBJLoader.js"></script>
<script src="./JS/OrbitControls.js"></script>
<script src="./JS/Detector.js"></script>
<script src="./JS/stats.min.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth/2;
var windowHalfY = window.innerHeight/2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(200,300);
container.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(14, window.innerWidth/window.innerHeight, .3, 1000);
camera.position.z = 1;
camera.position.y = 8;
//camera.rotation.y = -90*(180/3.14159265)
var orbit = new THREE.OrbitControls(camera, renderer.domElement);
orbit.enableZoom = false;
orbit.enablePan = false;
orbit.autoRotate = true;
// scene
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);
var dirLight = new THREE.DirectionalLight(0xffffff, .41);
dirLight.position.set(100, 100, 50);
scene.add(dirLight);
var light = new THREE.PointLight(0xf8f8ff, 0.25, 10000);
light.position.set(0, 100,-75);
scene.add(light);
//var directionalLight = new THREE.DirectionalLight(0xf8f8ff);
//directionalLight.position.set(0, 0, 1).normalize();
//scene.add(directionalLight);
// model
var onProgress = function (xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded/xhr.total * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}
};
var onError = function (xhr) { };
THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl('./Avatar/');
mtlLoader.setPath('./Avatar/');
mtlLoader.load('Avatar.mtl', function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('./Avatar/');
objLoader.load('Avatar.obj', function (object)
{
object.alphaTest = 0;
object.transparent = false;
object.side = THREE.DoubleSide;
//object.rotation.y = -25*(180/3.14159265)
//object.rotation.x = -35*(180/3.14159265)
object.position.y = 0;
scene.add(object);
}, onProgress, onError);
});
//
document.addEventListener('mousemove', onDocumentMouseMove, false);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
windowHalfX = window.innerWidth/2;
windowHalfY = window.innerHeight/2;
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
//renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowHalfX)/2;
mouseY = (event.clientY - windowHalfY)/2;
}
//
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
//camera.position.x += (mouseX - camera.position.x) * .005;
//camera.position.y += (- mouseY - camera.position.y) * .005;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>
私は少しこの時点で失われたと、本当にあなたの助けを使用することができますよ！前もって感謝します。ご質問がある場合、または私のコード内の何かがわからない場合は、私に知らせてください。
それはうまくいきました、ありがとうございます！ ：D –