Camera around BV
HTML
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
CSS
body {
background: #202020;
margin: 0;
overflow: hidden;
}
JavaScript
var scene, camera, renderer;
var controls;
var box;
var tmpPosition, tmpTarget;
var contact;
var helper;
var distance;
init();
animate();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x202020);
camera = new THREE.PerspectiveCamera(60, 4 / 3, 0.1, 1000.0);
camera.position.set(-4.5, 0.0, 0.0);
camera.userData.cachedPosition = new THREE.Vector3().copy(camera.position);
renderer = new THREE.WebGLRenderer({antialias: true});
controls = new THREE.OrbitControls(camera, renderer.domElement);
// put these to prevent the user from getting stuck in tricky situations
// controls.minPolarAngle = 0.5;
// controls.maxPolarAngle = 2.6;
controls.enableZoom = false;
tmpPosition = new THREE.Vector3();
tmpTarget = new THREE.Vector3();
contact = new THREE.Vector3();
direction = new THREE.Vector3();
distance = 5.0;
var width = 2.0;
var height = 2.0;
var depth = 8.0;
// Object
var object = new THREE.Mesh(
new THREE.BoxBufferGeometry(width, height, depth),
new THREE.MeshPhongMaterial({
color: 0xffffff,
})
);
scene.add(object);
// AABB
box = new THREE.Box3(
new THREE.Vector3(width * -0.5, height * -0.5, depth * -0.5),
new THREE.Vector3(width * 0.5, height * 0.5, depth * 0.5)
);
helper = new THREE.Mesh(
new THREE.SphereBufferGeometry(0.01),
new THREE.MeshBasicMaterial({
color: 0x000000
})
);
scene.add(helper);
// Lighting
var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(-0.5, 1.0, -0.25).normalize();
scene.add(directionalLight);
window.addEventListener('resize', onResize);
onResize();
document.body.appendChild(renderer.domElement);
...