Skip to content

Instantly share code, notes, and snippets.

@Nexengineer

Nexengineer/A-Frame_VR_Demo.html

Last active July 9, 2019 08:05
Show Gist options
  • Save Nexengineer/059bd684aab42442b267226dc46e354d to your computer and use it in GitHub Desktop.
Save Nexengineer/059bd684aab42442b267226dc46e354d to your computer and use it in GitHub Desktop.
Download ZIP
AFrame VR file. (This contains both HTML and Java script File). Run instructions attached at top.
Raw
A-Frame_VR_Demo.html
{% comment %}
AFRAME VR Setup:
1) Download aframe.min.js , three.module.js.
2) Create and populate assets marked as (<!-- Dowload asset and replce-->)
3) Install npm if not there... run npm install -g http-server
4) Navigate to that file's folder using Terminal.
5) Run http-server
Note: Please name the file 'index.html'
{% endcomment %}
<!DOCTYPE html>
<html>
<head>
<title>Car Demo VR</title>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<!-- <script src="js/aframe.min.js"></script> -->
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="info">
<span>Body color: <select id="body-mat"></select></span>
<span>Rim color: <select id="rim-mat"></select></span>
<span>Glass color: <select id="glass-mat"></select></span>
<span>Interior color: <select id="int-color"></select></span>
<br><br>
<span>Interior: <input type="checkbox" id="camera-toggle"></span>
</div>
<a-scene id="scene" background="color: cyan">
<!-- Loading the assets for the car model -->
<a-assets>
<a-asset-item id="demo-car-obj" src="models/car_demo.obj"></a-asset-item> <!-- Dowload asset and replce-->
<a-asset-item id="demo-car-mtl" src="models/mtl/car_demo.mtl"></a-asset-item> <!-- Dowload asset and replce-->
<img id="sky" src="models/sunrise.jpg" /> <!-- Dowload asset and replce-->
<img id="ground" src="models/ground.jpg"> <!-- Dowload asset and replce-->
</a-assets>
<!-- Camera of fixed type -->
<!-- <a-entity id="camera" position="1.242 4.687 12.529"></a-entity> -->
<!-- <a-entity id="rig" position="-0.073 3.5 11.897" camera-view>
<a-camera id="camera"></a-camera>
</a-entity> -->
<a-camera id="camera" position="-0.1 6 13.897" camera-view></a-camera>
<!-- Camera + cursor. -->
<!-- Below is the camera entity, This can come in handy further -->
<!-- <a-entity id="camera" camera look-controls >
<a-cursor id="cursor"
animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
event-set__mouseenter="_event: mouseenter; color: springgreen"
event-set__mouseleave="_event: mouseleave; color: black" raycaster="objects: .link"></a-cursor>
</a-entity> -->
<!-- Declaring the plane where Car is standing -->
<a-plane position="1 1 1" rotation="-90 0 0" width="100" height="100" src="#ground" shadow></a-plane>
<!-- Adding the car model -->
<a-entity>
<a-obj-model id="car" src="#demo-car-obj" mtl="#demo-car-mtl" scale="0.1 0.1 0.1" position="1 1.1 1"
rotation="0 40 0" car-model>
<a-animation attribute="rotation" dur="10" to="90 180 90" repeat="indefinite">
</a-animation>
</a-obj-model>
</a-entity>
<a-sky src="#sky" rotation="0 -90 0"></a-sky>
</a-scene>
<script type="module">
// Native framework, on which A-frame is build one
import * as THREE from './three.module.js'; //<!-- Dowload asset and replce-->
// Getting the elements by ID which we are going to use.
var bodyColorSelect = document.getElementById('body-mat'); // This is the Body material span
var rimColorSelect = document.getElementById('rim-mat'); // This is the Rim material span
var glassColorSelect = document.getElementById('glass-mat'); // This is the Glass material span
var interiorColorSelect = document.getElementById('int-color'); // This is the Interior material span
var interiorCamera = document.getElementById('camera-toggle'); // This is the Camera material span
// Adding event Listner
interiorCamera.addEventListener('change', updateCamera);
interiorCamera.checked = false;
// Referance for the camera
var current_camera = {};
// Dictionary for storing all the body parts
var carParts = {
body: [],
rims: [],
glass: [],
interior: []
};
// For adding textures
const materials = {
allColor: [
{ color: new THREE.Color(0, 0, 0), name: 'black' },
{ color: new THREE.Color(255, 0, 0), name: 'red' },
{ color: new THREE.Color(0, 255, 0), name: 'green' },
{ color: new THREE.Color(0, 0, 255), name: 'blue' }
],
glass: [
new THREE.Color({ color: 'transparent', name: 'transparent' })
]
}
AFRAME.registerComponent('camera-view', {
init: function () {
this.el.addEventListener('loaded', () => {
current_camera = this.el.sceneEl.camera.el;
})
}
});
// THis method is used for loading the model
AFRAME.registerComponent('car-model', {
init: function () {
this.el.addEventListener('model-loaded', () => {
const obj = this.el.getObject3D('mesh');
// Taking out the other body elements
carParts.body.push(
obj.getObjectByName('3D_Object__32_007'),
obj.getObjectByName('3D_Object__32_005'),
obj.getObjectByName('3D_Object__32_003'),
obj.getObjectByName('3D_Object__32_001'),
obj.getObjectByName('M_3_002'),
obj.getObjectByName('915_1_002'),
obj.getObjectByName('MTK_1_002'),
obj.getObjectByName('D_1_002'),
obj.getObjectByName('Plate_08_003'),
obj.getObjectByName('door_lf_ok_001'),
obj.getObjectByName('fara_lf_003'),
obj.getObjectByName('fara_lf_001'),
obj.getObjectByName('steklo_001'),
obj.getObjectByName('915_1_001'),
obj.getObjectByName('M_3_001'),
obj.getObjectByName('MTK_1_001'),
obj.getObjectByName('D_1_001'),
obj.getObjectByName('Plate_08_001'),
obj.getObjectByName('Group_004'),
obj.getObjectByName('Group_002'),
obj.getObjectByName('Group_001'),
obj.getObjectByName('DONT_EDIT_001'),
obj.getObjectByName('door_rf_ok_001'),
obj.getObjectByName('door_lr_ok_001'),
obj.getObjectByName('door_rr_ok_001'),
obj.getObjectByName('boot_ok_001'),
obj.getObjectByName('bonnet_ok_001'),
obj.getObjectByName('svetilo_001'),
obj.getObjectByName('WITHOUT_PE_001')
)
// Taking out the Tires and rims
carParts.rims.push(
obj.getObjectByName('wheel_004'),
obj.getObjectByName('wheel_003'),
obj.getObjectByName('wheel_002'),
obj.getObjectByName('wheel_001'),
)
// Taking out the windscreen
carParts.glass.push(obj.getObjectByName('windscre01_001'));
// Setting up the intial color of the elements
initMenuList()
setIntialColor();
// Test function looping
obj.traverse(node => {
console.log(node.name)
carParts.body.push(
)
})
})
}
})
// Setting up intial color
function setIntialColor() {
console.log('setIntialColor')
carParts.rims.forEach((parts) => {
parts.material.color = materials.allColor[0].color;
})
carParts.body.forEach((parts) => {
parts.material.color = materials.allColor[3].color;
})
carParts.glass.forEach((parts) => {
parts.material.color = materials.allColor[2].color
parts.material.transparent = true;
parts.material.opacity = 0.5;
});
}
// Function: Event listner to updateCamera
function updateCamera() {
let defaultCameraRotation = current_camera.getAttribute('rotation');
if (interiorCamera.checked) {
current_camera.setAttribute('position', { x: 1, y: 5, z: 1 });
current_camera.setAttribute('rotation', { x: 90, y: 0, z: 0 });
} else {
current_camera.setAttribute('position', { x: -0.1, y: 6, z: 13.897 });
current_camera.setAttribute('rotation', { x: 0, y: 0, z: 0 });
}
}
// Intialize menu list
function initMenuList() {
// Helper method for adding options to the menu
function addOption(name, menu) {
var option = document.createElement('option');
option.text = name;
option.value = name;
menu.add(option);
}
materials.allColor.forEach(function (obj) {
console.log(obj);
addOption(obj.name, bodyColorSelect);
addOption(obj.name, rimColorSelect);
addOption(obj.name, glassColorSelect);
addOption(obj.name, interiorColorSelect);
});
bodyColorSelect.selectedIndex = 3;
rimColorSelect.selectedIndex = 1;
glassColorSelect.selectedIndex = 2;
interiorColorSelect.selectedIndex = 0;
bodyColorSelect.addEventListener('change', updateBodyColor);
rimColorSelect.addEventListener('change', updateRimColor);
glassColorSelect.addEventListener('change', updateGlassColor);
interiorColorSelect.addEventListener('change', updateInteriorColor);
}
// Helper methods for changing the colors
function updateBodyColor() {
var color = materials.allColor[bodyColorSelect.selectedIndex];
carParts.body.forEach((parts) => {
parts.material.color = color.color;
})
}
function updateRimColor() {
var color = materials.allColor[rimColorSelect.selectedIndex];
carParts.rims.forEach((parts) => {
parts.material.color = color.color;
})
}
function updateGlassColor() {
var color = materials.allColor[glassColorSelect.selectedIndex];
carParts.glass.forEach((parts) => {
parts.material.color = color.color;
parts.material.transparent = true;
parts.material.opacity = 0.5;
});
}
function updateInteriorColor() {
var color = materials.allColor[interiorColorSelect.selectedIndex];
carParts.interior.forEach((parts) => {
parts.material.color = color.color;
})
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment