ThreeJS uses AJAX to achieve multi-user interaction

1 Debugging environment is Win7 IIS background using VS2008, C#

  A non-interface program is used in the background to process data directly in page_load, and the received data simply adds 1 to the operation

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        int age =Convert.ToInt32(Request["age"]);
        age++;
        Response.Write(age.ToString());     
    }
}

2 The front end adopts ThreeJS and uses JavaScript to operate

var xhr=new XMLHttpRequest();//ajax数据存取
 var wxpAge=1;

//在键盘函数里发出数据请求
 //键盘函数    
        function WxpKeyPressed(e) {
            var key = event.keyCode;
                       
            switch (key) {

                case 37: /*左方向键*/
                    GuiControls.camerPositionX += 0.1;
                    break;

                case 39: /*右方向键*/
                    GuiControls.camerPositionX -= 0.1;
                    break;

                case 38: /*向上键*/
                    GuiControls.camerPositionY -= 0.1;
                    break;

                case 40: /*向下键*/
                    GuiControls.camerPositionY += 0.1;
                    break;
                
            }
            //get 方法不需要参数
            //xhr.send(null); 

            // post 需要传递参数
            //初始化AJAX  
            xhr.onreadystatechange=WxpCallBack;
            xhr.open("post","default.aspx",true);          
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

            var str=new String("name=jay&age=");
            str=str+wxpAge.toString();
            //alert(str);
            xhr.send(str);        
        }

3 The callback function parses the string sent from the server, and you can use JSON in the future

//主要是解析接收到的字符 
        function WxpCallBack()
        {

            if(xhr.readyState==4)
              if(xhr.status==200)
              {
                var res=xhr.responseText;
                wxpAge=parseInt(res);
                document.getElementById("notice").innerHTML = "请先选中物体" + res.toString();
                
              }
        }

4 Need to pay attention to the settings of web.config in IIS

 
    <!-- 
        在 Internet 信息服务 7.0 下运行 ASP.NET AJAX 需要 system.webServer
        节。对早期版本的 IIS 来说则不需要此节。
    -->
    <system.webServer>
      <validation validateIntegratedModeConfiguration="false"/>
      <modules>
        <remove name="ScriptModule" />
        <add name="ScriptModule" preCondition="managedHandler" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      </modules>
      <handlers>
        <remove name="WebServiceHandlerFactory-Integrated"/>
        <remove name="ScriptHandlerFactory" />
        <remove name="ScriptHandlerFactoryAppServices" />
        <remove name="ScriptResource" />
        <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode"
             type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode"
             type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
      </handlers>
      <httpProtocol>
        <customHeaders>
          <!-- CORS temporary solution -->
          <add name="Access-Control-Allow-Origin" value="*" />
          <add name="--allow-file-access-from-files" value="*" />
          <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization, Accept, X-Requested-With" />
          <add name="Access-Control-Allow-Methods" value="OPTIONS, TRACE, GET, HEAD, POST, PUT" />
        </customHeaders>
      </httpProtocol>
      <staticContent>
        <mimeMap fileExtension=".obj" mimeType="text/html" />
      </staticContent>
    </system.webServer>

5 Finally, here is a simple verification effect, which can also be seen from the server-side code, adding 1 to the application once.

The latter can be used to solve the realization of multi-user interaction effects.

Guess you like

Origin blog.csdn.net/sichuanpb/article/details/111634526