How to embed three.js image from other source into the HTML?

Question

I am new to new features of HTML5.
Is it possible to embed existing webgl page to my page?
Am I going to the right direction?

 <!DOCTYPE html>
 <html>
 <head lang="en">
<meta charset="UTF-8">
<title></title>

<script>
    var camera, scene, loader;
    function init() {
        scene = new THREE.Scene();
        camera = new THREE.perspectiveCamera();
        loader = new THREE.ImageLoader("http.......");
        scene.add(camera);
        scene.add(loader);

    }
</script>

Thanks

Jonas · Accepted Answer · 2014-11-07 17:09:58Z

2

You have to use ImageUtils if you want to add an image as texture.

var texture = THREE.ImageUtils.loadTexture( "textures/pic.png" );
var material = new THREE.MeshPhongMaterial( { map: texture } );

// you can edit texture settings
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 512, 512 );

var mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);

If you have another three.js scene and you want to load that into your application, have a look at the loader / scene example from three.js.

If you want to embed a whole page, you could consider using the iframe-Tag.

<iframe src="http..."></iframe>

edited Nov 7, 2014 at 17:09

answered Nov 7, 2014 at 17:01

Jonas

1,3451 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3505689 Over a year ago

So the texture can be threejs.org/examples/#webgl_animation_cloth or it can only be a .png, .jpg?

Jonas Over a year ago

No, a website can't be a texture. But as I said you can include that webpage using an iframe tag: <iframe src="http://threejs.org/examples/webgl_animation_cloth"></iframe>

user3505689 Over a year ago

is it possible to add this iframe to canvas or scene and play with it?

Jonas Over a year ago

There is no need, because the iframe already includes the canvas and scene from the referenced page. If you, however, want to manipulate the external scene, you have to copy the source code that it was made of and modify that.

Collectives™ on Stack Overflow

How to embed three.js image from other source into the HTML?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related