cancel
Turn on suggestions
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0
Upvote

three js - webGL into Adobe Muse

PS777
Participant ,
Dec 07, 2015 Dec 07, 2015

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

1.9K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

David_Powers
LEGEND , Dec 08, 2015 Dec 08, 2015

The reason it appears at the bottom of the page lies in the following line of code:

document.body.appendChild( renderer.domElement );

That appends the element to the body rather than to the div that you have nested the code inside.

Move the script outside the div it's currently nested in (it must go after the div). Also change the line that adds the polygon to the page:

<div id="u135228"><!-- custom html -->

</div>

<script src="http://brangerbriz.net/labs/threejs_playGnd/js/three.min.js"></script>

<scr

...
Translate
replies 2 Replies 2
latest latest Jump to latest reply
David_Powers
LEGEND ,
Dec 08, 2015 Dec 08, 2015

The reason it appears at the bottom of the page lies in the following line of code:

document.body.appendChild( renderer.domElement );

That appends the element to the body rather than to the div that you have nested the code inside.

Move the script outside the div it's currently nested in (it must go after the div). Also change the line that adds the polygon to the page:

<div id="u135228"><!-- custom html -->

</div>

<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.getElementById('u135228').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>

</div>

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
PS777
Participant ,
Dec 08, 2015 Dec 08, 2015
LATEST
In Response To David_Powers

Thank you David

I have copy and paste the new code you provided, pinned the HTML Object to the top and now it works!

Piero Salardi's Online Portfolio // Home

Thanks again

Piero

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Coding Related Communities
Plugins, Exchange Marketplace, Scripting, APIs & SDKs
UXP Developer Forum
Open in a new window
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices