0

我真的希望这个问题能得到解决。我真的很感谢你的帮助。

要重现此问题，您只需下载我在下面提供的文件。并打开一个终端，然后在终端中键入 python3 -m http.server 8000 。在网络浏览器中搜索 localhost:8000。预期的输出是： https ://threejs.org/examples/?q=xyz#webgl_loader_xyz 但我的输出是一个空的画布。

谁能帮我解决这个问题？我很高兴提供更多细节。

原始问题位于https://discourse.threejs.org/t/xyzloader-example-in-three-js-not-working-locally/34704，您可以从该帖子下载文件。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - loaders - XYZ</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link type="text/css" rel="stylesheet" href="main.css">
        
    </head>

    <body>
        <div id="info">
        <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - XYZ loader<br/>
        asset from <a href="https://people.math.sc.edu/Burkardt/data/xyz/xyz.html" target="_blank" rel="noopener">people.math.sc.edu</a> via GNU LGPL
        </div>

        <!-- Import maps polyfill -->
        <!-- Remove this when import maps will be widely supported -->
        <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

        <script type="importmap">
            {
                "imports": {
                    "three": "https://cdn.skypack.dev/three@0.137.5"
                }
            }
        </script>

        <script type="module">

            /*import * as THREE from 'three';*/
import {PerspectiveCamera, Scene, BoxGeometry, MeshNormalMaterial, Mesh, WebGLRenderer, PointsMaterial, Clock, Points} from 'https://cdn.skypack.dev/three@0.137.5';

            import { XYZLoader } from './XYZLoader.js';

            let camera, scene, renderer, clock;

            let points;

            init();
            // animate();

            function init() {

                camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 100 );
                camera.position.set( 10, 7, 10 );

                scene = new Scene();
                scene.add( camera );
                camera.lookAt( scene.position );

                clock = new Clock();

                const loader = new XYZLoader();
                loader.load('./helix_201.xyz', function ( geometry ) {

                    geometry.center();

                    const vertexColors = ( geometry.hasAttribute( 'color' ) === true );

                    const material = new PointsMaterial( { size: 0.1, vertexColors: vertexColors } );

                    points = new Points( geometry, material );
                    scene.add( points );

                } );

                //

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

                //

                window.addEventListener( 'resize', onWindowResize );

            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function animate() {

                requestAnimationFrame( animate );

                const delta = clock.getDelta();

                if ( points ) {

                    points.rotation.x += delta * 0.2;
                    points.rotation.y += delta * 0.5;

                }

                renderer.render( scene, camera );

            }

        </script>

<!---
<script type="module">
import {PerspectiveCamera, Scene, BoxGeometry, MeshNormalMaterial, Mesh, WebGLRenderer} from 'https://cdn.skypack.dev/three@0.137.2';
let camera, scene, renderer;
let geometry, material, mesh;

init();

function init() {

    camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new Scene();

    geometry = new BoxGeometry( 0.2, 0.2, 0.2 );
    material = new MeshNormalMaterial();

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

    renderer = new WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setAnimationLoop( animation );
    document.body.appendChild( renderer.domElement );

}

function animation( time ) {

    mesh.rotation.x = time / 2000;
    mesh.rotation.y = time / 1000;

    renderer.render( scene, camera );

}
</script>
--->

    </body>
</html>

此致，

乔治

4

0 回答 0