Question

我是HTML5新功能的新手是否可以将现有的webgl页面嵌入到我的页面中？我会朝着正确的方向前进吗？

 <!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>

由于

Answer 1

如果要将图像添加为纹理，则必须使用ImageUtils。

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);

如果您有另一个three.js场景，并且想要将其加载到您的应用程序中，请查看three.js中的loader / scene示例。

如果您想嵌入整页，可以考虑使用iframe - 标记。

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

如何将来自其他源的three.js图像嵌入到HTML中？

1 个答案: