為什么我測試時我的Three.js代碼無效？

Question

我正在嘗試Three.js，我一步一步地按照教程。 在我正在使用的代碼編輯器（Visual Studio Code 2019）中，一切看起來都很正常，但是當我測試它時，頁面上沒有任何內容。

我正在使用的編輯器，使用桌面作為查找我的代碼的地方，因為它是一個.html文件，我可以運行它。 當我這樣做時，唯一出現的是我編程的導航欄，沒有別的

This is the entire three.js code:
<script src="three.js-dev/build/three.min.js"> </script>
        <script>
            var scene = new THREE.scene();
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight);

            var renderer = new THREE.WebGLRenderer({antialias = true});
            renderer.setSize( window.innerWidth, window.innerHeight);
            $('body').append( renderer.domElement);

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

            cube.position.z = -5;
            var animate = function () {

             cube.rotation.x += 0.01;

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

這個代碼在它之前：

<html>
        <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <script 
        src="https://code.jquery.com/jquery-2.1.4.js"
        integrity="sha256-siFczlgw4jULnUICcdm9gjQPZkw/YPDqhQ9+nAOScE4="
        crossorigin="anonymous"></script>
        </head>
        <body>
        <div id="navbar"><span>Three.js Tut</span></div>

我期待一個紅色立方體旋轉，但沒有出現。 ¿有什么我做錯了嗎？

Answer 1

您的代碼中有一些錯誤：

THREE.scene應該是THREE.Scene
{antialias = true}應為{antialias: true}
{ color = 0xff0000 }應為{ color: 0xff0000 }

使用您的代碼進行現場演示： https ： //jsfiddle.net/so736vxj/

BTW：如果你正在使用VSCode，我有點惱火，沒有突出顯示任何錯誤。 特別是應該報告最后兩個語法錯誤，因為它不是有效的JavaScript。

three.js R105

為什么我測試時我的Three.js代碼無效？

問題描述

1 個解決方案

解決方案1
0 已采納 2019-06-16 09:47:48

為什么我測試時我的Three.js代碼無效？

問題描述

1 個解決方案

解決方案1 0 已采納 2019-06-16 09:47:48

解決方案1
0 已采納 2019-06-16 09:47:48