Question

大家好我想在一个THREE.js场景中添加带有一些内容的div标签，有没有办法可以做到。可以说我们在场景中创建了一个像我这样的立方体 var geometry = new THREE.CubeGeometry（100,100,100）; 我尝试做var geometry = document.getElementByID（'div_tag'）之类的东西，然后创建一个网格并将网格添加到场景中 var mesh = new THREE.Mesh（geometry，material）; scene.add（目）; 它没有用，有没有办法可以做到这一点？谢谢

我有什么：

HTML：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<link rel="stylesheet" type="text/css" href="styles.css">
<body>

<div id="mainDiv">   <!---this is what I want to add to the scene-->
    <div id="boxDiv">

    <div id="front"></div>
    <div id="back"></div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="top"></div>
    <div id="bottom"></div>


</div>
</div>
<script src="http://alt.graceland.edu/~gta1/three.js-master/three.js-master/build/three.min.js"></script>
<script src="cube.js"></script>

</body>
</html>

JS：

var camera，controls，scene，renderer;

的init（）; 动画（）;

    function init(){
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 500;

        controls = new THREE.TrackballControls( camera );
        controls.addEventListener('change', render);

        scene = new THREE.Scene();

        var geometry = new THREE.CubeGeometry(100,100,100); /* instead of   this I  want the div tag */
        var material = new THREE.MeshNormalMaterial();

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

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement);
    }

    function animate(){
        requestAnimationFrame( animate );
        controls.update();
    }

    function render(){
        renderer.render( scene, camera );
    }

如何在THREE.js场景中添加div

0 个答案: