2
html 5 캔버스로 프로젝트 작업 중입니다. 이를 위해 저는 간단한 찬장 형태로 간단한 큐브를 그릴 때 three.js 라이브러리를 사용합니다. 주변 조명, 앤티 앨리어싱 및 텍스처를 이미 추가했습니다. 모두 잘되면 찬장을 렌더링하고 마우스를 사용하여 그것을 옮길 수 있습니다.Three.js : 텍스처, 버퍼링 및 브라우저 호환성 타일링
현재 문제 :
var textureMap = map: THREE.ImageUtils.loadTexture("wood1.jpg")
textureMap.wrapS = THREE.RepeatWrapping;
textureMap.wrapT = THREE.RepeatWrapping;
textureMap.repeat.x = 100;
textureMap.repeat.y = 100;
material = new THREE.MeshLambertMaterial(textureMap);
텍스처는 현재 각면에 걸쳐 뻗어있다. 타일링하는 것을 선호하지만 작동시키지 못하는 것 같습니다. 위의 코드는 내가 사이트에서 찾은 것을 기반으로 생각한 최고의 추측이었습니다 (미안하지만, 현재의 평판과 더 많은 링크를 공유 할 수 없습니다). 그것은 스크립트가 전혀 실행되지 않기 때문에 주석 처리됩니다.
이전에는 약간의 지연 문제가있었습니다. 빠른 검색 후에 메인 루프에서 시간 제한을 설정해야한다는 것과 버퍼링에 두 번째 캔버스를 사용해야한다는 사이트 (죄송합니다. 현재 평판과 더 많은 링크를 공유 할 수 없음)를 발견했습니다. 타임 아웃을 추가하는 것은 매력처럼 작동했지만 버퍼링 캔버스에 대해서는 여전히 궁금합니다. 나는 renderer와 canvas를 다루고 있기 때문에 이것을 어떻게 처리해야하는지 확신 할 수 없다. 비록 버퍼를 신경 쓰지 않아도 될지조차 모르겠다. 지금은 정상적으로 작동하는 것 같아.하지만, 한 번에 더 많은 메시를 렌더링하려고 할 때 미래에 변할 수도있다.
내 코드는 현재 Firefox 용으로 만 실행됩니다. Chrome과 Internet Explorer는 모두 빈 화면을 표시합니다. 이 문제를 해결하기 위해 내가 바꿀 필요가있는 아이디어?
파이어 폭스에서 코드를 실행할 때 찬장은 처음에는 완전히 검은 색입니다. 내가 그것을 움직이면 (즉) 즉시 텍스처로 바뀝니다. 어떤 아이디어? 셋업에서 카메라를 위아래로 움직이는 더러운 픽스를 만들 수는 있지만 오히려하지는 않을 것입니다.
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas demo</title>
<script type="text/javascript" src="http://www.html5canvastutorials.com/libraries/Three.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
//three.js vars
var camera;
var scene;
var renderer;
var material;
var directionalLight;
//input vars
var lastX = 0;
var lastY = 450;
var clickX;
var clickY;
var mousedown;
function rerender(){
//draw
renderer.render(scene, camera);
//redraw after 25 ms (the 25 ms delay reduces lag)
setTimeOut(requestAnimFrame(function(){rerender()}), 25);
}
$(document).ready(function() {
//initialize renderer
renderer = new THREE.WebGLRenderer({antialias : true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.domElement.id = "visiblecanvas";
document.body.appendChild(renderer.domElement);
//camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000);
camera.position.y = -450;
camera.position.z = 400;
camera.rotation.x = 45.2;
//scene
scene = new THREE.Scene();
//material
//non-working tiled texture
/*
var textureMap = map: THREE.ImageUtils.loadTexture("wood1.jpg")
textureMap.wrapS = THREE.RepeatWrapping;
textureMap.wrapT = THREE.RepeatWrapping;
textureMap.repeat.x = 100;
textureMap.repeat.y = 100;
*/
//workingg stretched texture
material = new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture("wood1.jpg")});
//the cupboard
//cube
var cube1 = new THREE.Mesh(new THREE.CubeGeometry(300,50,10), material);
cube1.overdraw = true;
scene.add(cube1);
//cube
var cube2 = new THREE.Mesh(new THREE.CubeGeometry(300,10,300), material);
cube2.overdraw = true;
cube2.position.z += 150;
cube2.position.y += 20;
scene.add(cube2);
//cube
var cube3 = new THREE.Mesh(new THREE.CubeGeometry(10,50,300), material);
cube3.overdraw = true;
cube3.position.z += 150;
cube3.position.x += 145;
scene.add(cube3);
//cube
var cube4 = new THREE.Mesh(new THREE.CubeGeometry(10,50,300), material);
cube4.overdraw = true;
cube4.position.z += 150;
cube4.position.x -= 145;
scene.add(cube4);
//cube
var cube5 = new THREE.Mesh(new THREE.CubeGeometry(300,50,10), material);
cube5.overdraw = true;
cube5.position.z += 300;
scene.add(cube5);
// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x555555);
scene.add(ambientLight);
// add directional light source
directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
//mousedown event
$('#visiblecanvas').mousedown(function(e){
clickX = e.pageX - this.offsetLeft + lastX;
clickY = e.pageY - this.offsetLeft + lastY;
mousedown = true;
});
//mousemove event, act if mousedown
$('#visiblecanvas').mousemove(function(e){
if(mousedown) {
var xDiff = e.pageX - this.offsetLeft - clickX;
var yDiff = e.pageY - this.offsetLeft - clickY;
lastX = -xDiff;
lastY = -yDiff;
camera.position.x = lastX;
camera.position.y = -lastY;
rerender();
}
delay(5);
});
//mouseup event
$('#visiblecanvas').mouseup(function(e){
mousedown = false;
});
//mouseleave event (mouse leaves canvas, stop moving cupboard)
$('#visiblecanvas').mouseleave(function(e){
mousedown = false;
});
rerender();
});
//request new frame
window.requestAnimFrame = (function (callback){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000/60);
};
})();
</script>
</body>
</html>
감사합니다. 내 질문에 답할 수 있기를 바랍니다.
케어는 코드에 몇 가지 의견을 추가? OP 질문을 어떻게 해결합니까? 어떻게 작동합니까? – Yaroslav