0

我刚刚接触到threejs，我正在制作threejs 的“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>

我用于运行网站的 HTML（我是否正确引用了脚本？）

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();

JavaScript 代码

这是我左边的层次结构

4

1 回答 1

0

我已经在我的浏览器中尝试过它并且它正在工作。确保“node_modules/three/three.min.js”存在或将标记替换为src“ scriptthree.min.js”。three.min.js根据屏幕截图，您有文件。

于 2016-03-18T18:55:11.637 回答