问在三个js项目上插入html表单

EN

function start() {

            //////////////////////////////////////////////////////////////////////////////////
            //      Init
            //////////////////////////////////////////////////////////////////////////////////

            // init renderer
            var renderer    = new THREE.WebGLRenderer({
                antialias : true,
                alpha: true
            });
            //renderer.setClearColor(new THREE.Color('lightgrey'), 0)
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.domElement.style.position = 'absolute'
            renderer.domElement.style.top = '0px'
            renderer.domElement.style.left = '0px'
            document.body.appendChild( renderer.domElement );

            // array of functions for the rendering loop
            var onRenderFcts = [];

            // init scene
            var scene = new THREE.Scene();


            // Create a camera
            var camera = new THREE.Camera();
            scene.add(camera);

            // Create a light
            var light = new THREE.HemisphereLight(0xffffff, 1.5);
            light.position.set(0, 0, 1);
            scene.add(light);



            ////////////////////////////////////////////////////////////////////////////////
            //          handle arToolkitSource
            ////////////////////////////////////////////////////////////////////////////////


            var arToolkitSource = new THREEx.ArToolkitSource({
            sourceType : 'image',
            sourceUrl : URL_markers + 'testwallpaper.jpg',      
            })



            arToolkitSource.init(function onReady(){
                onResize()
            })

            // handle resize
            window.addEventListener('resize', function(){
                onResize()
            })
            function onResize(){
                arToolkitSource.onResizeElement()   
                arToolkitSource.copyElementSizeTo(renderer.domElement)  
                if( arToolkitContext.arController !== null ){
                    arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas) 
                }   
            }



            ////////////////////////////////////////////////////////////////////////////////
            //          initialize arToolkitContext
            ////////////////////////////////////////////////////////////////////////////////


            // create atToolkitContext
            var arToolkitContext = new THREEx.ArToolkitContext({
                cameraParametersUrl: URL_markers + 'camera_para.dat',
                detectionMode: 'mono',
                /*maxDetectionRate: 30,
                canvasWidth: 80*3,
                canvasHeight: 60*3,*/
            })

            // initialize it
            arToolkitContext.init(function onCompleted(){
                // copy projection matrix to camera
                camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
            })

            // update artoolkit on every frame
            onRenderFcts.push(function(){
                if( arToolkitSource.ready === false )   return

                arToolkitContext.update( arToolkitSource.domElement )
            })



            ////////////////////////////////////////////////////////////////////////////////
            //          Create a ArMarkerControls
            ////////////////////////////////////////////////////////////////////////////////

            var myMarker = 'pattern-marker-carrefour.patt';     //marker_axxes.patt, patt.hiro, patt.kanji
            var markerRoot = new THREE.Group
            scene.add(markerRoot)
            //console.log(markerRoot); // ---- log ----
            var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
                type : 'pattern',
                patternUrl : URL_markers + myMarker,
            })

            // build a smoothedControls
            var smoothedRoot = new THREE.Group()
            scene.add(smoothedRoot)
            var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot, {
                lerpPosition: 0.4,
                lerpQuaternion: 0.3,
                lerpScale: 1,
            })
            onRenderFcts.push(function(delta){
                smoothedControls.update(markerRoot)
            })




            // instantiate a loader
            var loader = new THREE.OBJLoader();

            var mtlLoader = new THREE.MTLLoader();
            mtlLoader.load( "3d_models/OBJ/present/present.mtl", function( materials ) {
                materials.preload();
                var objLoader = new THREE.OBJLoader();
                objLoader.setMaterials( materials );
                objLoader.load("3d_models/OBJ/present/present.obj", function ( object ) {
                    var box3d = new THREE.Box3();
                    var size = box3d.setFromObject(object).getSize(new THREE.Vector3());
                    var scal = Math.max(Math.abs(size.x),Math.abs(size.y),Math.abs(size.z));
                    object.scale.multiplyScalar(1.5/scal);

                    object.rotation.set(80, 0, 0);
                    console.log(object);
                    markerRoot.add( object );
                    onRenderFcts.push(function(){
                        object.rotation.y += 0.03;
                        //object.rotation.y += 0.03;
                    })
                });
            });

            //////////////////////////////////////////////////////////////////////////////////
            //      render the whole thing on the page
            //////////////////////////////////////////////////////////////////////////////////
            // render the scene
            onRenderFcts.push(function(){
                renderer.render( scene, camera );
            })
            // run the rendering loop
            var lastTimeMsec= null
            requestAnimationFrame(function animate(nowMsec){
                // keep looping
                requestAnimationFrame( animate );
                // measure time
                lastTimeMsec    = lastTimeMsec || nowMsec-1000/60
                var deltaMsec   = Math.min(200, nowMsec - lastTimeMsec)
                lastTimeMsec    = nowMsec
                // call each update function
                onRenderFcts.forEach(function(onRenderFct){

                    onRenderFct(deltaMsec/1000, nowMsec/1000)
                })
            })
        }

<div class="absolute">
    <center>
    <form class="form-container" name="frmOrderItem" action="demo_AR_axxes.php" method="post" enctype="multipart/form-data">
    <div class="form-title"><h2>Jouer et GAGNER !</h2></div>
    <div class="form-title">Nom :</div>
    <input class="form-field" type="text" name="pers_data2[]" size="20" value="<?php if (isset($_POST['pers_data2'][0])) echo $_POST['pers_data2'][0]; ?>" required><br />
    <div class="form-title">Prénom :</div>
    <input class="form-field" type="text" name="pers_data2[]" size="20" value="<?php if (isset($_POST['pers_data2'][1])) echo $_POST['pers_data2'][1]; ?>" required><br />
    <div class="form-title">Email :</div>
    <input class="form-field" type="email" name="pers_data2[]" size="20" value="<?php if (isset($_POST['pers_data2'][2])) echo $_POST['pers_data2'][2]; ?>" required><br />
    <div class="form-title">Mobile :</div>
    <input class="form-field" type="tel" name="pers_data2[]" min="10" max="10" size="10" value="<?php if (isset($_POST['pers_data2'][3])) echo $_POST['pers_data2'][3]; ?>" required><br /><br />
    <div class="form-title" >Essaie :</div>
    <span class="form-title" style="font-size: 13px; font-style: italic;">Gagné :</span><input  type="radio" id="myRadio3" value="gagne" name="dataradio2"><span class="form-title" style="font-size: 13px; font-style: italic;"> Perdu : </span><input type="radio" id="myRadio4" value="perdu" name="dataradio2"><br />
    <div class="submit-container">
    <input class="myButton" type="submit" value="Jouer !" />
    </div>
    </form>
    </center>
    </div>