DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - colladatitle>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body
{
font-family: Monospace;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info
{
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display: block;
}
a
{
color: skyblue;
}
style>
head>
<body>
<script src="./mrdoob-three.js-a3ba076/build/three.min.js">script>
<script src="./mrdoob-three.js-a3ba076/examples/js/loaders/ColladaLoader.js">script>
<script src="./mrdoob-three.js-a3ba076/examples/js/Detector.js">script>
<script src="./mrdoob-three.js-a3ba076/examples/js/libs/stats.min.js">script>
<script src="./mrdoob-three.js-a3ba076/examples/js/controls/OrbitControls.js">script>
<script src="./mrdoob-three.js-a3ba076/examples/js/controls/TrackballControls.js">script>
<script>
if (!Detector.webgl)
Detector.addGetWebGLMessage();
var container;
var camera, scene, renderer, objects;
var controls;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
scene = new THREE.Scene();
scene.add(camera);
camera.position.set(10, 12, 16);
camera.lookAt(scene.position);
// Grid
var size = 14, step = 1;
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({ color: 0xfffff0 });
for (var i = -size; i <= size; i += step) {
geometry.vertices.push(new THREE.Vector3(-size, -0.04, i));
geometry.vertices.push(new THREE.Vector3(size, -0.04, i));
geometry.vertices.push(new THREE.Vector3(i, -0.04, -size));
geometry.vertices.push(new THREE.Vector3(i, -0.04, size));
}
var line = new THREE.Line(geometry, material, THREE.LinePieces);
scene.add(line);
// Lights
scene.add(new THREE.AmbientLight(0x777777));
var light = new THREE.DirectionalLight(0xdfebff, 1.75);
light.position.set(300, 400, 50);
light.position.multiplyScalar(1.3);
light.castShadow = true;
scene.add(light);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0xcccccc, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
//controls = new THREE.TrackballControls(camera);
var axes = new THREE.AxisHelper(200);
scene.add(axes);
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('./collada/iphone.xml', loadDae);
function loadDae(collada) {
var dae;
dae = collada.scene;
dae.scale.x = dae.scale.y = dae.scale.z = 0.5;
dae.updateMatrix();
scene.add(dae);
}
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function update() {
controls.update();
}
function animate() {
requestAnimationFrame(animate);
render();
update();
}
function render() {
renderer.render(scene, camera);
}
script>
body>
html>