How to load 3d modeling data by using Data URLs

Questions
,
1

I’m trying to make three.js contents on New Google Sites.
I want to load necessary file from Google drive.
I can load three.js components (three.min.js ,TrackballControls.js)from Google drive, and It works correctly.
But I can’t load modeling data.
The URL of Google drive is peculiarity like https://drive.google.com/uc?id=1ot7WiRfBnc…
It seems that three.js object.loader does not accept it.
I trying to embed modeling data in java script (or html) for that.
I can use Data URL for loading model to three.js loader, according to the three.js manual.
But I can’t load data.My code is following. What is wrong?
I would appreciate any suggestions or information.

2

Google Drive prevents other websites from downloading files directly that way.

Your code seems to be missing, did you mean to attach it?

4

don mccurdy thank you for your reply.
This is my code.
In this case I load three.min.js from google drive.
It works correctly

< html>
< head>
< meta charset="utf-8" />
< script src="https://drive.google.com/uc?id=1OumVowwuPXbWQ_S6LmwqSaAIuTYbGZx7"></script>
< script>
        window.addEventListener('load', init);
        function init() {
            const width = 712;
            const height = 397;
            const renderer = new THREE.WebGLRenderer({
                canvas: document.querySelector('#myCanvas')
            });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(width, height);
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera(45, width / height);
            camera.position.set(0, 0, +1000);
            const geometry = new THREE.BoxGeometry(400, 400, 400);
            const material = new THREE.MeshNormalMaterial();
            const box = new THREE.Mesh(geometry, material);
            scene.add(box);
            animate();
            function animate() {

                box.rotation.x += 0.005;
                box.rotation.y += 0.006;
                renderer.render(scene, camera);
                requestAnimationFrame(animate);
            }
        }       
< /script>
< /head >
< body >
< canvas id="myCanvas"></canvas >
< /body >
< /html >

And this is second one.
Case of this code, I try to load three.min.js and json file from Google drive.
This code doesn’t work.

< !doctype html>
< html lang="ja">
< head>
< meta charset="UTF-8">
< title></title>
< script src="https://drive.google.com/uc?id=1OumVowwuPXbWQ_S6LmwqSaAIuTYbGZx7"></script>
< script type="text/javascript">
var mesh, renderer, scene, camera;
var width = 1280,
    height = 640;
document.addEventListener( 'DOMContentLoaded', function(){
    scene = new THREE.Scene();
    var fov = 45,
        aspect = width / height,
        near = 1,
        far = 700;
    camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
    camera.position.set( 0, 0, 50 );
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( width, height );
    var bgColor = 0x000000;
    renderer.setClearColor(bgColor, 1);
    document.body.appendChild( renderer.domElement );
    var lightColor = 0xffffff;
    var directionalLight = new THREE.DirectionalLight( lightColor );
    directionalLight.position.set( 1, 1, 1 );
    scene.add( directionalLight );
    var loader = new THREE.JSONLoader();
    var json = 'https://drive.google.com/uc?id=1YsiJ8yhoD7F7oRurFHaOhQY-JV14KWT8';
    loader.load( json, function ( geometry, materials ) {
        var faceMaterial = new THREE.MeshFaceMaterial( materials );
        var materialColor = 0xff8700;
        faceMaterial.materials[0].color = new THREE.Color(materialColor);
        faceMaterial.materials[0].wireframe = true;
        mesh = new THREE.Mesh( geometry, faceMaterial );
        mesh.position.set( 0,0,0);
        mesh.scale.set( 10, 10, 10 );
        scene.add( mesh );
        renderLoop();
    } );
});
function renderLoop () {
    var speed = 0.005;
    var meshRotaX = mesh.rotation.x + speed,
        meshRotaY = mesh.rotation.y + speed,
        meshRotaZ = mesh.rotation.z + speed;
    mesh.rotation.set(meshRotaX, meshRotaY, meshRotaZ);
    renderer.render( scene, camera );
    requestAnimationFrame( renderLoop );
}
< /script>
< /head>
< body>
< /body>
< /html>

I’m not sure what is a problem of this code. So, I’m trying loder.load by DataURLs.
Do you have any idea what is a problem of second code?

5

Please share more complete details. What errors do you see in the developer tools’ JavaScript console, and the Network tab? What result on screen do you see, if any? A live demo on a website like Codepen or JSFiddle would help others to reproduce the problem.

6

here. It first complains about JSONLoader, and if I change to ObjectLoader, it is CORS:
Screen Shot 2020-04-02 at 19.12.12

7

Monchiki you can put your json directly in js code, as well as use its content directly without loaders. Like this: https://jsfiddle.net/783zfevu/

8

donmccurdy,
Thank you your very helphul advice.
I’m not familear to XXX and XXX.
But I will try to use them.
And I will add console logs next time.

makc3d
Thank you your very helphul advice and example.
It was very helpful.
I’m sorry I didn’t make it clear enough.
I thought that what you pointed out was quite right.
I will take care in future.

I tried to embed modeling data into the script.
It seems that Looks like it worked.

This is a animation script by using json.loader.
http://kimuraya-bakery.la.coocan.jp/three_js/load_json.html

And this is a also animation script with embeded modeling data.
http://kimuraya-bakery.la.coocan.jp/three_js/load_dataurls.html

Thank you very mach.