1
나는 three.js를 배우기 시작합니다. 웹 사이트의 시작하기 섹션을 공부하고 예제를 살펴 보았지만 많은 것들을 알 수는 없습니다.three.js 큐브 안에 카메라 위치
내가하고 싶은 것은 큐브 (상자)를 만들고 그 가운데에 카메라를 넣어서 각면의 안쪽을 볼 수있게하려는 것입니다. 이것은 실제로 가능합니까?
var camera, scene, renderer;
var isUserInteracting = false,
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0;
init();
animate();
function init() {
var container, mesh;
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1100);
camera.target = new THREE.Vector3(1, 1, 1);
scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry(7, 7, 7);
geometry.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));
var material = [
new THREE.MeshBasicMaterial({ color: 0x8bf2a7 }),
new THREE.MeshBasicMaterial({ color: 0x1ad9a5 }),
new THREE.MeshBasicMaterial({ color: 0xdadcad }),
new THREE.MeshBasicMaterial({ color: 0xb1b1b1 }),
new THREE.MeshBasicMaterial({ color: 0x3a3a3a }), // front
new THREE.MeshBasicMaterial({ color: 0xf5f5f5 })
];
mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(material));
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('dragover', function (event) {
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
}, false);
document.addEventListener('dragenter', function (event) {
document.body.style.opacity = 0.5;
}, false);
document.addEventListener('dragleave', function (event) {
document.body.style.opacity = 1;
}, false);
document.addEventListener('drop', function (event) {
event.preventDefault();
var reader = new FileReader();
reader.addEventListener('load', function (event) {
material.map.image.src = event.target.result;
material.map.needsUpdate = true;
}, false);
reader.readAsDataURL(event.dataTransfer.files[ 0 ]);
document.body.style.opacity = 1;
}, false);
//
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseDown(event) {
event.preventDefault();
isUserInteracting = true;
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
}
function onDocumentMouseMove(event) {
if (isUserInteracting === true) {
lon = (onPointerDownPointerX - event.clientX) * 0.1 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * 0.1 + onPointerDownLat;
}
}
function onDocumentMouseUp(event) {
isUserInteracting = false;
}
function onDocumentMouseWheel(event) {
// WebKit
if (event.wheelDeltaY) {
camera.fov -= event.wheelDeltaY * 0.05;
// Opera/Explorer 9
} else if (event.wheelDelta) {
camera.fov -= event.wheelDelta * 0.05;
// Firefox
} else if (event.detail) {
camera.fov += event.detail * 1.0;
}
camera.updateProjectionMatrix();
}
function animate() {
requestAnimationFrame(animate);
update();
}
function update() {
if (isUserInteracting === false) {
// lon += 0.1;
}
lat = Math.max(- 85, Math.min(85, lat));
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
camera.target.x = 500 * Math.sin(phi) * Math.cos(theta);
camera.target.y = 500 * Math.cos(phi);
camera.target.z = 500 * Math.sin(phi) * Math.sin(theta);
camera.lookAt(camera.target);
camera.position.z = 3;
/*
// distortion
camera.position.copy(camera.target).negate();
*/
renderer.render(scene, camera);
}
내가 실제로 내부에서 큐브를 볼 수 있지만 정확히 내가 원하는 게 아니에요 :
지금 나는이 점에있어, 문서, 다양한 예에서와 유래에 찾고. 방의 정확한 중앙에 카메라를 놓으려는 중이고 카메라 자체를 회전시킬 것입니다. 정확하게 움직이는 방법이 정확하지 않습니다.
에서 자세한 내용을보실 수 있습니다? – gaitat
아니요, 그냥 생각 THREE.WebGLRenderer 70, 내가 정상적인 것 같아요 – Carlo