Javascript THREE.js未加载对象_Javascript_Html_Three.js_C9.io

Javascript THREE.js未加载对象

javascript html three.js

Javascript THREE.js未加载对象,javascript,html,three.js,c9.io,Javascript,Html,Three.js,C9.io,我刚刚进入3HJ，我正在制作一个3HJ的“Hello World”，基本上就是制作一个形状。我正在使用c9.io编写所有代码，我不知道这是否是导致错误的原因。我已经写了所有的代码，但由于某种原因它没有执行。以下是您可能需要的一些代码片段： <html> <head> <title>test</title> <meta charset="utf-8"> <style>

我刚刚进入3HJ，我正在制作一个3HJ的“Hello World”，基本上就是制作一个形状。我正在使用c9.io编写所有代码，我不知道这是否是导致错误的原因。我已经写了所有的代码，但由于某种原因它没有执行。以下是您可能需要的一些代码片段：

<html>
    <head>
        <title>test</title>
        <meta charset="utf-8">
        <style>
        body {
            margin: 0px;
            background-color: #000000;
            overflow: hidden;   
        }
        canvas {
            width: 100%;
            height: 100%;
        }
        </style>
    </head>
    <body>
        <script src="node_modules/three/three.min.js"></script>
        <script src="scene1.js"></script>
    </body>
</html>

JavaScript代码

我已经在我的浏览器中试用过了，而且效果很好。确保“node_modules/three/three.min.js”存在或将

script

的

src

标记替换为“three.min.js”。根据屏幕截图，您有

three.min.js

文件。

在头部添加一个脚本标记，根据文档加载Threejs，所以您说这可能是c9的问题？是否有其他在线代码编辑替代方案？首先检查解决方案是否有效。如果没有，则运行该文件并检查控制台是否有任何错误（这是屏幕截图底部的第三个选项卡）。我没有使用c9，所以我不能说这是否是问题的根源。我使用了threejs，我确信这部分不会导致问题。你可能在安装threejs时犯了一些错误。不，我似乎找不到错误。我在一个在线IDE之外的另一个程序中尝试了这一点，但它也不起作用。我做错了什么？再次尝试安装threejs。我没有用过c9，所以不能肯定。你能在控制台中看到任何错误日志吗。还可以配置“网络”选项卡以检查文件是否正在加载。我用C9从来没有面对过这个问题。尝试终止进程，并在更改大量时间后重新启动服务器，因为它会产生缓存结果，这对c9不利（随着项目的增长）

import THREE from 'node_modules/three';

var scene = new THREE.Scene();
var fov = 45;
var aspect = window.innerWidth / window.innerHeight;
var near = 0.1;
var far = 10000;
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({color: 0x666420});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var render = function()
{
    requestAnimationFrame(render);

    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;

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