three js - webGL into Adobe Muse
Hello
I'm trying to incorporate this code into Adobe Muse. I'm placing it as an HTML Object at the top of my page, but it seems that is not correctly coded because it appears at the very bottom of the page.
http://pierosalardi-webgl2.businesscatalyst.com/index.html
This is the code I'm using:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: transparent;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="http://brangerbriz.net/labs/threejs_playGnd/js/three.min.js"></script>
<script src="http://brangerbriz.net/labs/threejs_playGnd/js/Detector.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var camera, scene, renderer;
var geometry, material, mesh;
function setup() {
var W = window.innerWidth, H = window.innerHeight;
renderer = new THREE.WebGLRenderer();
renderer.setSize( W, H );
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 50, W/H, 1, 10000 );
camera.position.z = 500;
scene = new THREE.Scene();
// paste your code from the geometryGUI here
geometry = new THREE.OctahedronGeometry(200, 1);
material = new THREE.MeshNormalMaterial({shading: THREE.SmoothShading, wireframe: true, wireframeLinewidth: 1});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
function draw() {
requestAnimationFrame( draw );
// experiment with code from the snippets menu here
mesh.rotation.x = Date.now() * 0.00005;
mesh.rotation.y = Date.now() * 0.00002;
mesh.rotation.z = Date.now() * 0.0001;
renderer.render( scene, camera );
}
setup();
draw();
</script>
</body>
</html>
Any ideas on how to incorporate this?
Thanks,
Piero
AdChoices