DragControl not working on Android Webview (problem dragging 3d models)

问题

,Greetings! this question is the for the problem which I barged into after I was helped with this.

This code is working fine on web browsers directly but when I try to run it Android WebView, it's not working.These are the logs which i am getting once the app starts in android studio:

 D/CONTENT: THREE.WebGLRenderer: Error creating WebGL context. @ 23538: https://cdn.jsdelivr.net/npm/three@0.115/build/three.js
 D/CONTENT: Uncaught Error: Error creating WebGL context. @ 23539: https://cdn.jsdelivr.net/npm/three@0.115/build/three.js
 D/CONTENT: THREE.WebGLRenderer: EXT_frag_depth extension not supported. @ 16036: https://cdn.jsdelivr.net/npm/three@0.115/build/three.js
 D/CONTENT: THREE.WebGLRenderer: WEBGL_draw_buffers extension not supported. @ 16036: https://cdn.jsdelivr.net/npm/three@0.115/build/three.js
 D/CONTENT: THREE.WebGLRenderer: EXT_shader_texture_lod extension not supported. @ 16036: https://cdn.jsdelivr.net/npm/three@0.115/build/three.js

Here is my complete code: HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Locate the user</title>
    <meta name="viewport" content="width=device-width,
    user-scalable=no, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


    <script src="https://cdn.jsdelivr.net/npm/three@0.115/build/three.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.115/examples/js/controls/DragControls.js"></script>
    <script src="js/GLTFLoader.js"></script>

    <script src="dist/tween.umd.js"></script>
    <script src="js/RequestAnimationFrame.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
    <script src="js/drag-controls.js"></script>

    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>

</head>
<body>


<script src="js/capture.js"></script>
</body>
</html>

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 5;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xff0000, .5 );

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

var controls = new THREE.DragControls( [ cube ], camera, renderer.domElement );
document.body.appendChild( renderer.domElement );

controls.addEventListener( 'dragstart', function ( event ) {

    event.object.material.color.set( 0xaaaaaa );

} );

controls.addEventListener( 'dragend', function ( event ) {

    event.object.material.color.set( 0x000000 );

} );

animate();

function animate() {

  requestAnimationFrame( animate );
  renderer.render( scene, camera );

}

MainActivity

public class MainActivity extends AppCompatActivity {

    WebView wbView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
        wbView = (WebView)findViewById(R.id.myWebview);
        wbView.getSettings().setJavaScriptEnabled(true);
        wbView.setWebChromeClient(new MyWebChromeClient());
        wbView.getSettings().setGeolocationEnabled(true);
        wbView.getSettings().setAppCacheEnabled(true);
        wbView.getSettings().setDatabaseEnabled(true);
        wbView.getSettings().setDomStorageEnabled(true);

        wbView.getSettings().setAllowFileAccessFromFileURLs(true);
        wbView.getSettings().setAllowUniversalAccessFromFileURLs(true);

        wbView.loadUrl("file:///android_asset/test.html");






        wbView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (url != null) view.loadUrl(url);
                return true;
            }
        });



    }




}

来源：https://stackoverflow.com/questions/60881791/dragcontrol-not-working-on-android-webview-problem-dragging-3d-models

标签

javascript

android

three.js

android-webview