三个js看不到球体

问题描述 投票:0回答:2

我只是在看 Threejs.org 网站上的文档,我想尝试一下制作一个球体,这是我快速模拟的:

<!DOCTYPE html>
<html>
    <head>
        <title>Sphere</title>
        <style>canvas { width: 100%; height: 100% }</style>
    </head>
    <body>
        <script type="text/javascript" src="../../threejs/build/Three.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

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


            var geometry = new THREE.SphereGeometry(5, 32, 32);
            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            var sphere = new THREE.Mesh(geometry, material);
            sphere.overdraw = true;
            scene.add( sphere );

            camera.position.z = 5;

            function render() {                 
                requestAnimationFrame(render); 
                renderer.render(scene, camera); 
            } 

            render();
        </script>
    </body>
</html>

麻烦,我看不到球体,控制台中也没有错误...有人可以帮忙解决这个问题吗?

three.js
2个回答
1
投票

相机似乎位于球体的边缘。尝试一下

camera.position.z = 20;


0
投票

我在使用 Three.js 版本 0.113.0 的项目中遇到了同样的问题,但更新到版本 124 后问题消失了。

© www.soinside.com 2019 - 2024. All rights reserved.