Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var container;
- var camera, scene, renderer;
- var windowHalfX = window.innerWidth / 2;
- var windowHalfY = window.innerHeight / 2;
- var mouse, raycaster, controls, hemiLight;
- var active = false;
- function init(containerID) {
- // Will setup all needed variables
- container = document.getElementById(containerID);
- camera = new THREE.PerspectiveCamera(1, window.innerWidth / window.innerHeight, 1, 2000);
- camera.position.z = 400;
- // Scene
- scene = new THREE.Scene();
- hemiLight = new THREE.HemisphereLight(0xCC9966, 0xCC9966, 1);
- hemiLight.position.set(0, 500, 0);
- scene.add(hemiLight);
- // Camera behaviour
- controls = new THREE.TrackballControls(camera);
- controls.rotateSpeed = 5.0;
- controls.zoomSpeed = 5;
- controls.panSpeed = 2;
- controls.noZoom = false;
- controls.noPan = false;
- controls.staticMoving = true;
- controls.dynamicDampingFactor = 0.3;
- // Model
- var onProgress = function ( xhr ) {
- // Only necessary if the obj-file-size is very large
- };
- var onError = function ( xhr ) {
- // Something went wrong during loading obj-file
- console.log("Error, please report to the devs");
- };
- THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
- var loader = new THREE.OBJMTLLoader();
- // Load the 3D Files
- loader.load( 'objects/head.obj', 'images/head.mtl', function ( object ) {
- prepareObj( object, "head" );
- }, onProgress, onError );
- loader.load( 'objects/torso.obj', 'images/torso.mtl', function ( object ) {
- prepareObj( object, "torso" );
- }, onProgress, onError );
- loader.load( 'objects/arm_left.obj', 'images/arm_left.mtl', function ( object ) {
- prepareObj( object, "arm_left" );
- }, onProgress, onError );
- loader.load( 'objects/arm_right.obj', 'images/arm_right.mtl', function ( object ) {
- prepareObj( object, "arm_right" );
- }, onProgress, onError );
- loader.load( 'objects/leg_right.obj', 'images/leg_right.mtl', function ( object ) {
- prepareObj( object, "leg_right" );
- }, onProgress, onError );
- loader.load( 'objects/leg_left.obj', 'images/leg_left.mtl', function ( object ) {
- prepareObj( object, "leg_left" );
- }, onProgress, onError );
- renderer = new THREE.WebGLRenderer();
- renderer.setPixelRatio(window.devicePixelRatio);
- renderer.setSize(500, 500);
- renderer.setClearColor(0xffffff, 1);
- container.appendChild(renderer.domElement);
- document.addEventListener("mouseover", function(e) {
- checkBodyActive(e);
- }, false);
- document.addEventListener("click", onClick, false);
- window.addEventListener("resize", onWindowResize, false);
- raycaster = new THREE.Raycaster();
- mouse = new THREE.Vector2();
- camera.aspect = 1;
- camera.updateProjectionMatrix();
- renderer.render(scene, camera);
- }
- function checkBodyActive(event) {
- // Checks, if the current body is active
- if(document.elementFromPoint(event.clientX, event.clientY) == container ||
- document.elementFromPoint(event.clientX, event.clientY) == renderer.domElement) {
- active = true;
- animate();
- }
- else {
- active = false;
- }
- }
- function changeTexture(part) {
- // Will change the texture of the selected body part
- scene.children[part].traverse( function ( child ) {
- if (child instanceof THREE.Mesh) {
- // Texture must be changed
- if(scene.children[part].children[0].children[0].material.map.sourceFile=="images/texture2.jpg") {
- // Texture2 is already equipped, unequip it
- child.material.map = THREE.ImageUtils.loadTexture("images/texture.jpg");
- } else {
- // Equip texture2
- child.material.map = THREE.ImageUtils.loadTexture("images/texture2.jpg");
- }
- child.material.needsUpdate = true;
- }
- });
- }
- function onWindowResize() {
- // This function will make sure that all proportions are correct after resizing the window
- windowHalfX = window.innerWidth / 2;
- windowHalfY = window.innerHeight / 2;
- camera.aspect = 1;
- camera.updateProjectionMatrix();
- }
- function onClick(event) {
- // Mouse-Click-Event, used to check if intersects where hit
- event.preventDefault();
- mouse.x = ((event.clientX - renderer.domElement.offsetLeft) / renderer.domElement.width) * 2 - 1;
- mouse.y = - ((event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height) * 2 + 1;
- console.log(mouse);
- console.log(renderer);
- // Create intersect raycasting
- raycaster.setFromCamera(mouse, camera);
- var intersects = raycaster.intersectObjects(scene.children, true);
- if(intersects.length) {
- var name = intersects[0].object.parent.parent.name;
- for(var j = 0; j < scene.children.length; j++ ) {
- if(scene.children[j].name == name) {
- // Found same model as the intersects, change texture
- changeTexture(j);
- }
- }
- }
- }
- function prepareObj(object, name){
- // General configuration of the .obj files while loading
- object.position.y = -3;
- object.traverse(function(child) {
- if(child instanceof THREE.Mesh) {
- child.material.map = THREE.ImageUtils.loadTexture("images/texture.jpg");
- child.material.needsUpdate = true;
- }
- });
- object.name = name;
- scene.add(object);
- }
- function animate() {
- // On every frame we need to calculate the new camera position
- // and have it look exactly at the center of our scene.
- if(active) {
- requestAnimationFrame(animate);
- controls.update();
- camera.lookAt(scene.position);
- renderer.render(scene, camera);
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement