imagecube.js Example File
threejs/oneqt/imagecube.js
Qt.include("three.js")
var camera, scene, renderer;
var cube;
var pointLight;
function initializeGL(canvas) {
camera = new THREE.PerspectiveCamera(50, canvas.width / canvas.height, 1, 2000);
camera.position.z = 400;
camera.position.y = 140;
scene = new THREE.Scene();
var textureLoader = new THREE.TextureLoader();
var textureCase1 = textureLoader.load(canvas.image1);
var textureCase2 = textureLoader.load(canvas.image2);
var textureCase3 = textureLoader.load(canvas.image3);
var textureCase4 = textureLoader.load(canvas.image4);
var textureCase5 = textureLoader.load(canvas.image5);
var textureCase6 = textureLoader.load(canvas.image6);
var materials = [];
materials.push(new THREE.MeshLambertMaterial({ map: textureCase1 }));
materials.push(new THREE.MeshLambertMaterial({ map: textureCase1 }));
materials.push(new THREE.MeshLambertMaterial({ map: textureCase3 }));
materials.push(new THREE.MeshLambertMaterial({ map: textureCase3 }));
materials.push(new THREE.MeshLambertMaterial({ map: textureCase5 }));
materials.push(new THREE.MeshLambertMaterial({ map: textureCase5 }));
materials.push(new THREE.MeshLambertMaterial({ map: textureCase6 }));
materials.push(new THREE.MeshLambertMaterial({ map: textureCase6 }));
materials.push(new THREE.MeshLambertMaterial({ map: textureCase4 }));
materials.push(new THREE.MeshLambertMaterial({ map: textureCase4 }));
materials.push(new THREE.MeshLambertMaterial({ map: textureCase2 }));
materials.push(new THREE.MeshLambertMaterial({ map: textureCase2 }));
var geometry = new THREE.BoxGeometry(200, 200, 200);
for (var i = 0, len = geometry.faces.length; i < len; i ++) {
geometry.faces[ i ].materialIndex = i;
}
geometry.materials = materials;
var faceMaterial = new THREE.MeshFaceMaterial(materials);
cube = new THREE.Mesh(geometry, faceMaterial);
scene.add(cube);
camera.lookAt(cube.position);
scene.add(new THREE.AmbientLight(0x444444));
var directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight.position.y = 130;
directionalLight.position.z = 700;
directionalLight.position.x = Math.tan(canvas.angleOffset) * directionalLight.position.z;
directionalLight.position.normalize();
scene.add(directionalLight);
renderer = new THREE.Canvas3DRenderer(
{ canvas: canvas, antialias: true, devicePixelRatio: canvas.devicePixelRatio });
renderer.setPixelRatio(canvas.devicePixelRatio);
renderer.setSize(canvas.width, canvas.height);
setBackgroundColor(canvas.backgroundColor);
}
function setBackgroundColor(backgroundColor) {
var str = ""+backgroundColor;
var color = parseInt(str.substring(1), 16);
if (renderer)
renderer.setClearColor(color);
}
function resizeGL(canvas) {
if (camera === undefined) return;
camera.aspect = canvas.width / canvas.height;
camera.updateProjectionMatrix();
renderer.setPixelRatio(canvas.devicePixelRatio);
renderer.setSize(canvas.width, canvas.height);
}
function paintGL(canvas) {
cube.rotation.x = canvas.xRotation * Math.PI / 180;
cube.rotation.y = canvas.yRotation * Math.PI / 180;
cube.rotation.z = canvas.zRotation * Math.PI / 180;
renderer.render(scene, camera);
}