Question

如何在three.js中使用GLTFLoader查看几何图形和材料？现在是空白的页面。抱歉，这是我在three.js上的第二天，我认为我对手册没有完全了解。 https://threejs.org/docs/#examples/loaders/GLTFLoader

<html>
<head>
    <title>demo</title>
    <style>
        body {margin: 0; overflow: hidden;}
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script src="three.min.js"></script>
    <script src="GLTFLoader.js"></script>

    <script>
        var renderer, scene, camera, myCanvas = document.getElementById('myCanvas');
        var renderer = new THREE.WebGLRenderer({ canvas: myCanvas, antialias: true });
        renderer.setClearColor(0xffffff);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);

        var camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 300, 10000);
        var scene = new THREE.Scene();
        var light = new THREE.AmbientLight(0xffffff, 0.8);  
        var light2 = new THREE.PointLight(0xffffff, 0.5);
        scene.add(light); 
        scene.add(light2);

        var loader = new THREE.GLTFLoader();
        loader.load('model.gltf', function (gltf) {
            scene.add(gltf.scene);
        });


        requestAnimationFrame(render);
        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }
    </script>
</body>
</html>

Answer 1

您的相机在靠近飞机的地方太远了。.我也注意到您最初并不放置相机。.它可能是从物体内部开始的。或您的物体太大或太小而无法看到，因为它位于相机的剪切平面附近。

尝试一下：

var camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(100,100,100);
camera.lookAt(new THREE.Vector3(0,0,0));

three.js GLTFloader几何和材质

1 个答案: